Cafi Netつながる情報技術
  1. トップ>
  2. アメブロカスタマイズ>
  3. デザインのカスタマイズ

デザインのカスタマイズから変更

まずは、CSS の編集よりデザイン変更が簡単な「デザインのカスタマイズ」を行ってみたいと思います。

アメブロへログインしデザインのカスタマイズを選択

アメーバブログ(アメブロ)へログインし「ブログを書く」-「デザインの変更」へと進み、適用中のデザイン「カスタム可能ベーシック」の「カスタマイズ」をクリックします。

アメブロのヘッダ部分のカスタマイズ

ヘッダ部分の簡単な変更としては、カラーとパターンイメージの変更があります。カラーだけでなく、パターンイメージも多数用意されています。

ヘッダの高さは、50・80・100 から選択可能です。

今回はせっかくのカスタマイズなので、画像を追加してみたいと思います。

フリー写真素材のPhoto Chips 様からヘッダ用画像として「伊勢えびのお刺身」をダウンロードしました。

画像を追加する際の注意点は「横幅が800ピクセル以下の画像の場合は繰り返して表示」されます。

画像を繰り返して表示したくない場合は、横幅 800 ピクセル以下の画像は使用しないようにして下さい。

画像のサイズ調整は、ウェブアートデザイナーなどの画像加工ソフトで簡単に行えます。

今回は、幅800 高さ300 に Fireworks(ファイアワークス)で調整しました。

ヘッダ画像の追加をクリック

「画像の追加」-「ファイルを選択」から、ヘッダ用のファイルを開きます。「アップロード」-「この画像を使う」で、ヘッダ用画像が追加されます。

ヘッダ用画像の追加完了

プレビューをクリックして、ヘッダ用画像が追加されたのを確認します。

パターンイメージより画像が優先表示されますが、カラーはヘッダ用画像の下に少し表示されます。

ヘッダ用画像とマッチせず気になる場合は、カラーを変更してください。(今回はサイドコラムのカラーと合わせて 9CD6E9 にしています)

続いて、バックグラウンド、メインコラム、サイドコラム(左右)のカラーを変更します。変更はクリックで簡単に行なえます。プレビューで確認しながら変更します。

アメブロのバックグラウンドカラーなどの変更

バックグラウンド 0099CC、メインコラム FFFFFF、サイドコラム 9CD6E9(左右とも同色)に設定しました。

プレビューで確認して OK なら「保存」をクリックします。

※デザインのカスタマイズ前

デザインのカスタマイズ前のアメブロ

※デザインのカスタマイズ後

デザインのカスタマイズ後のアメブロ

デザインのカスタマイズから、ヘッダ画像と背景を変更するだけでもかなり印象が変わりました。

CSS の編集からブログのタイトルと説明の文字色を変更

今回のようにヘッダ画像を入れたことで「ブログのタイトル」と「ブログの説明」が見えにくくなった場合は、「CSS の編集」をクリックし「ブログタイトルの文字色を変更する」と「ブログ説明の文字色を変更する」のカラーナンバーを変更してください。