1. TOP
  2. アメブロカスタマイズ
  3. ブログヘッダーのカスタマイズ・(3-2) ブログヘッダー・初級アメブロカスタマイズガイド

ブログヘッダーのカスタマイズ・(3-2) ブログヘッダー・初級アメブロカスタマイズガイド

お知らせ(2016年3月8日追記) 2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。 新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次

>>こちらもどうぞ

(3) エリアのスタイルブロックの中の、「(3-2) ブログヘッダー」の解説です

「(3-2) ブログヘッダー」のアメブロカスタマイズ解説

(3-2) ブログヘッダーのブロックはブログの顔であるタイトルと説明文を含む部分のことを言います。今回はまず基本概念を覚えましょう。CSS編集のコードは以下のようになっています。

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}

/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
padding-bottom:4px;
}

/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{}

ブログヘッダー部分のCSSの部分を確認しよう

上記コードの赤字の部分を見てください。ブログヘッダーのスタイルシートは、4つのブロックからできています。まずは画面イメージを見てください。

image-11046945455-11544994985

まずこのイメージ画像と上部のスタイルシートのコードとを対応させて場所の対応を確認してください。

次回はこれらにそれぞれ背景色や文字サイズの大きさを設定してみましょう。

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ