ブログヘッダーのカスタマイズ⑦・(3-2) ブログヘッダー・初級アメブロカスタマイズガイド
>>こちらもどうぞ
このコラムは連載コラムです。過去の記事は上記のアメブロカスタマイズガイドまたは、以下の記事をご覧ください。前回の記事はこちらです。まだ見ていない方はこちらから見ていただくとより理解が深まるかと思います。
アメブロのヘッダーにに横幅の小さい画像を設定する方法
では早速はじめましょう。今回も前回に引き続きCSS編集用画面の(3) エリアのスタイルブロックの中の、「(3-2) ブログヘッダー」の解説をします。第7段となります。ヘッダーの解説はこのコラムと次回のコラムで完結です。今回はあなたの用意したヘッダー画像の横幅が小さい場合にどのようにCSSを編集すると良いのかを解説します
ブログのヘッダーに小さい画像を入れたい場合
CSS編集用デザインのヘッダーの横幅は前回のコラムでも解説しましたが、基本的に980pxです。縦方向は前回のコラムで解説したように、heightプロパティを使用することで解消できますが、横方向が980pxよりも小さい場合にはどのように画像を配置するのがよいのでしょうか?
横幅が小さい画像の場合はバランスも考えて以下の3種類の配置方法が考えられます
①画像を左に揃える 右が空白
②画像を右に揃える 左が空白
③画像を中央揃え 左右が空白
これら3つの中からバランスを考慮して背景の設置を考える必要があります。
では設定方法を解説します
アメブロCSS設定方法
CSS編集用を開き(3-2)ブログヘッダーの部分に以下のコードを追加してください。赤色が追記部分。
/* (3-2) ブログヘッダー
--------------------------------------------*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{background-image:url(あなたがアップロードした画像のURLをコピーして貼り付け);
background-repeat:no-repeat;
height:あなたの画像の高さpx;
background-position:center;}/* ←ブログヘッダーに背景画像を敷きたいとき */
background-image:url()とbackground-repeatと、heihgtのプロパティは前回のコラムで解説しましたので、割愛します。ここで注目するプロパティはコードの一番下にある、background-positionというプロパティです。コロン(:)の後にcenterとありますがこれは画像を中央にそろえる設定になります。
その他はleft(左寄せ),right(右寄せ)があるのでそれぞれのプロパティで画像を設定してみてください。以下に設定イメージを掲載しましたので参考にしてください。ここでは一色の緑色の正方形の背景がbackground-positionプロパティの変化によってどのように位置が変わるかのイメージを掲載しましたので確認してみてください。
(当然ですがこの緑色の画像の横幅は980pxではありません)
最後に(まとめ)
ここで留意すべき点は、ブログタイトルと説明文の文字です。画像の配色が、タイトルや説明文の文字色に近い場合はできるだけ重ならないように配置するようにしましょう。当サイトのヘッダーのコラムを順番に見ていただいたあなたなら、ブログタイトルや説明文の色の設定や、位置の変更も自由にできることだと思います。忘れてしまった場合はヘッダーのコラムを振り返って解説を見てみてくださいね♪
次回は最終章です。前回につかった葉っぱの画像の設定に戻って文字サイズや文字位置をもう一度再確認し、ヘッダーの完成と行きましょう。