(2)ヘッダーエリアのスタイル(2-2)ブログ説明文の設定(文字色・大きさ)(新CSS編集用デザイン)

(2)ヘッダーエリアのスタイル(2-2)ブログ説明文の設定(文字色・大きさ)(新CSS編集用デザイン)

アメブロカスタマイズ

ブログ説明文の文字色・大きさの設定方法

この解説は2016年3月に追加されて新CSS編集用デザイン用のカスタム解説です。旧デザインの変更はこちらのリンクをご参考ください→旧CSS編集用デザイン目次

では解説です。

ブログ説明文とは、ブログの一番上のメインタイトルの文字の下にある、タイトルを補う文字列の部分のことです。この文字はサイズを大きくしたり、小さくしたり。色を変えたりすることが可能です。

この設定をするには、CSS編集用デザインの「(2)ヘッダーエリアのスタイル」の中にある、「(2-2) ヘッダータイトル、説明文」の項目のさらに中にある、「/* ブログ説明文 */」のの部分で修正します。

※ただし、ブログトップにヘッダー画像を入れたい場合は、別記事でヘッダー画像の設定方法を紹介しますので、このページでの設定は必要ありません。

実際に、説明文を修正した場合、以下のようになります。

head2

では、もう一度修正箇所のコードを見てみましょう。修正箇所は「(2)ヘッダーエリアのスタイル」の中にある、「(2-2) ヘッダータイトル、説明文」の部分で、以下の赤い部分を今回は修正していきます。

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

では、上から順番にコードの解説をします

コードの解説 clolor

.skin-blogSubTitle につづく{}(中括弧)の後に、プロパティcolorが表記されています。これは、文字色をカスタマイズする合図なんですね。そして:(コロン)の後に#(ナンバー)をつけて色のコードを表す6ケタの数字とローマ字の組み合わせを記述します。ちなみに、現在は「#999999」となっていますよね?これは、黒系の色を意味しています。ですので、現在はブログタイトルの文字黒っぽい色で設定されているということになります。この6桁のコードのことをカラーコードと呼び、カラーコードはコード表で調べることが可能です。カラーコードのサンプルは,わたしの記事でも紹介しているのでそちらも合わせてご覧ください。

ちなみに、上記画像では、赤色(コードは、#FF0000)にしてありますね。

コードの解説 font-size

つづいてfont-sizeが表記されています。これは、読んだままですが、フォントの大きさ、つまり文字の大きさを意味します。そして:(コロン)の後に、大きさをしていしますが、現在は27px(ピクセル)という文字のサイズが表記されています。px(ピクセル)というのは、長さや大きさを表す単位だと考えてください。ですので、現在は16pxの大きさだということですね。上記の、変更後の画像は、極端な例としての54pxとしてカスタマイズしています。

上記のカスタマイズ例にそって、カスタマイズしたコードを以下に表記します。

/* (2-2) ヘッダータイトル、説明文
——————————————–*/
/* ブログタイトルエリア、ヘッダー画像の下にテキストを隠す */
.skin-blogTitle {
z-index: -1;
}/* ブログタイトル */
.skin-blogMainTitle {
color: #333333;
margin-bottom: 10px;
font-size: 27px;
}
/* ブログ説明文 */
.skin-blogSubTitle {
color: #FF0000;
font-size: 54px;
}
/* ヘッダータイトル */
.skin-headerTitle {
padding-top: 80px;
padding-bottom: 80px;
text-align: center;
}

いろいろと試してみてくださいね。

>>ページのトップへ

おすすめ

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

«

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