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

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

アメブロカスタマイズ アメブロヘッダー

(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
自分で作るアメブロカスタマイズ

« »

コメントは受け付けていません。