ブログヘッダーのカスタマイズ④・(3-2) ブログヘッダー・初級アメブロカスタマイズガイド
このコラムは連載コラムです。過去の記事は上記のアメブロカスタマイズガイドまたは、以下の記事をご覧ください。前回の記事はこちらです。まだ見ていない方はこちらから見ていただくとより理解が深まるかと思います。
今回はタイトルと説明文の文字のサイズ、そして色の設定を解説
では早速はじめましょう。今回も前回に引き続きCSS編集用画面の(3) エリアのスタイルブロックの中の、「(3-2) ブログヘッダー」のを解説します。第4段となります。前回は、ヘッダの高さ、タイトルと説明文の位置の設定を解説しました。今回はタイトルと説明文の文字のサイズ、そして色の設定をします。
前回の最後は以下の画像のように設定をしました。
ヘッダー全体の背景色をグリーン、高さを300pxとし、
タイトルと説明文を囲うエリアの幅を300px、中央揃えに設定し、上の余白を150pxにしていました。
ですのでスタイルシートは以下のようになっています。
/* (3-2) ブログヘッダー
--------------------------------------------*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{background-color:green;
height:300px;}/* ←ブログヘッダーに背景画像を敷きたいとき */
/* skinBlogHeadingGroupAreaタイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{background-color:yellow;
padding:20px 0 30px;
width:300px;
margin:auto;
margin-top:150px;/*ヘッダーの上からの距離*/
}
/* skinTitleAreaブログタイトルのエリア */
.skinTitleArea{background-color:pink;
padding-bottom:4px;
}
/* skinDescriptionAreaブログの説明エリア*/
.skinDescriptionArea{background-color:orange;}
タイトルと説明文の文字の大きさと色を追記する
上記のスタイルシートに以下のように追記します。
/* (3-2) ブログヘッダー
--------------------------------------------*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{background-color:green;
height:300px;}/* ←ブログヘッダーに背景画像を敷きたいとき */
/* skinBlogHeadingGroupAreaタイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{background-color:yellow;
padding:20px 0 30px;
width:300px;
margin:auto;
margin-top:150px;/*ヘッダーの上からの距離*/
}
/* skinTitleAreaブログタイトルのエリア */
.skinTitleArea{background-color:pink;
padding-bottom:4px;
font-size:2em;
}
/* skinDescriptionAreaブログの説明エリア*/
.skinDescriptionArea{background-color:orange;
font-size:1.2em;
}
.skinTitle{color:red!important;}/*タイトルの文字色の設定*/
.skinDescription{color:red;}/*ブログ説明文の文字色の設定*/
タイトルと説明文の文字サイズを大きくし(それぞれ2emと1.2em）、そしてタイトルと説明文の文字色を赤色（red）に設定しました。まずはプレビューを見てください。
スタイルシートの解説
ひとまずヘッダーの基本事項は終了です。
まずはヘッダーのそれぞれの役割を知ってもらうために、極端な背景色をつけることから始まり、そして、タイトルと説明文のエリアを移動する方法。そしてタイトルと説明文の文字サイズや文字色を変更する方法を解説しました。今回出てきたプロパティを解説します。
font-size
文字の大きさを指定するプロパティで今回ならばタイトルを２emに設定し、説明文には1.2emと設定しました。当然数字を大きくすれば文字は大きくなるし、小さくすれば文字は小さくなります。
color
colorは英語の表記の通りで「色」ですよね♪このプロパティは文字色を設定するプロパティです。背景色を設定するときはbackground-colorとなりますので、混同しないようにしてくださいね☆
colorの後のコロン（：）に続けて色を指定します。色の指定には2種類あり、このコラムのように直接色を英語で指定する場合と、カラーコードというコードを入力する方法とがあります。実際はカラーコードを直接入れる方法のほうが実用的です。カラーコードはこちらを参考にしてみてください。
例えばオレンジの色を設定したい場合のカラーコードは #FFCC00 なのでこれを以下のように設定します。
color:#FFCC00
色のカラーコードはたくさんありますので、あなたの好みに合わせた配色を試してみてください。
次回に画像の配置を学びましょう。総まとめです
今回までのコラムで背景色の設定と文字サイズ、文字色の設定がわかれば、それなりのヘッダーはできますが、やはり画像ヘッダーにはかなわないでしょう。
次回はいままでのノウハウを生かして、いよいよ画像ヘッダーの設定方法を解説します。
おすすめ
