(2)ヘッダーエリアのスタイル・全体像(新CSS編集用デザイン)

(2)ヘッダーエリアのスタイル・全体像(新CSS編集用デザイン)

新CSS編集用【2016年3月追加分】

(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;
}

>>ページのトップへ

おすすめ

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

« »

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