(2)ヘッダーエリアのスタイル・全体像(新CSS編集用デザイン)
(2) ヘッダーエリアのスタイル・(新CSS編集用デザイン解説)
この解説は2016年3月に追加されて新CSS編集用デザイン用のカスタム解説です。旧デザインの変更はこちらのリンクをご参考ください→旧CSS編集用デザイン目次
では解説です。
(2)ヘッダーエリアのスタイルの部分では、ブログ上部の背景色、そしてヘッダー画像の設定や、ブログタイトルや、説明文など、アメブロでも重要なパーツのカスタマイズ部分となります。
今回のテーマは5つです。
その1 ヘッダー部分の背景色の設定
ブログ上部に単色の背景色を設定します
その2 ヘッダー部分に画像背景の設定
ブログ上部に背景画像を設定します
その3 ブログタイトルの設定
ブログタイトルの文字の大きさや色、サイズの設定方法。余白による位置関係を解説します。
その4 ブログ説明文の設定
ブログの説明文の文字の色、大きさの設定方法を解説します。
その5 ヘッダー画像を設定する
アメブロのヘッダー画像を設定する方法を解説します。
では、次のセクションでブログ文字のフォント設定について解説します。
(2)ヘッダーエリアのスタイル のコードは以下になります。
/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
(2)ヘッダーエリアのスタイル
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/
/* (2-1) ヘッダー背景
——————————————–*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
}
/* (2-2) ヘッダータイトル、説明文
——————————————–*/
/* ブログタイトルエリア、ヘッダー画像の下にテキストを隠す */
.skin-blogTitle {
z-index: -1;
}
/* ブログタイトル */
.skin-blogMainTitle {
color: #333333;
margin-bottom: 10px;
font-size: 27px;
}
/* ブログ説明文 */
.skin-blogSubTitle {
color: #999999;
font-size: 16px;
}
/* ヘッダータイトル */
.skin-headerTitle {
padding-top: 80px;
padding-bottom: 80px;
text-align: center;
}