- トップ>
- アメブロカスタマイズ>
- デザインのカスタマイズ
デザインのカスタマイズから変更
まずは、CSS の編集よりデザイン変更が簡単な「デザインのカスタマイズ」を行ってみたいと思います。
アメーバブログ(アメブロ)へログインし「ブログを書く」-「デザインの変更」へと進み、適用中のデザイン「カスタム可能ベーシック」の「カスタマイズ」をクリックします。
ヘッダ部分の簡単な変更としては、カラーとパターンイメージの変更があります。カラーだけでなく、パターンイメージも多数用意されています。
ヘッダの高さは、50・80・100 から選択可能です。
スポンサーリンク
今回はせっかくのカスタマイズなので、画像を追加してみたいと思います。
フリー写真素材のPhoto Chips 様からヘッダ用画像として「伊勢えびのお刺身」をダウンロードしました。
画像を追加する際の注意点は「横幅が800ピクセル以下の画像の場合は繰り返して表示」されます。
画像を繰り返して表示したくない場合は、横幅 800 ピクセル以下の画像は使用しないようにして下さい。
画像のサイズ調整は、ウェブアートデザイナーなどの画像加工ソフトで簡単に行えます。
今回は、幅800 高さ300 に Fireworks(ファイアワークス)で調整しました。
「画像の追加」-「ファイルを選択」から、ヘッダ用のファイルを開きます。「アップロード」-「この画像を使う」で、ヘッダ用画像が追加されます。
プレビューをクリックして、ヘッダ用画像が追加されたのを確認します。
パターンイメージより画像が優先表示されますが、カラーはヘッダ用画像の下に少し表示されます。
ヘッダ用画像とマッチせず気になる場合は、カラーを変更してください。(今回はサイドコラムのカラーと合わせて 9CD6E9 にしています)
続いて、バックグラウンド、メインコラム、サイドコラム(左右)のカラーを変更します。変更はクリックで簡単に行なえます。プレビューで確認しながら変更します。
バックグラウンド 0099CC、メインコラム FFFFFF、サイドコラム 9CD6E9(左右とも同色)に設定しました。
プレビューで確認して OK なら「保存」をクリックします。
※デザインのカスタマイズ前
※デザインのカスタマイズ後
デザインのカスタマイズから、ヘッダ画像と背景を変更するだけでもかなり印象が変わりました。
今回のようにヘッダ画像を入れたことで「ブログのタイトル」と「ブログの説明」が見えにくくなった場合は、「CSS の編集」をクリックし「ブログタイトルの文字色を変更する」と「ブログ説明の文字色を変更する」のカラーナンバーを変更してください。
スポンサーリンク