(2)ヘッダーエリアのスタイル(2-2)ブログタイトルの設定(文字色・大きさ・位置)(新CSS編集用デザイン)
ブログタイトルの文字色・大きさ・位置関係の設定方法
この解説は2016年3月に追加されて新CSS編集用デザイン用のカスタム解説です。旧デザインの変更はこちらのリンクをご参考ください→旧CSS編集用デザイン目次
では解説です。
ブログタイトルとは、ブログの一番上のメインタイトルの文字のことです。この文字はサイズを大きくしたり、小さくしたり。色を変えたり、位置を変えたりすることが可能です。
この設定をするには、CSS編集用デザインの「(2)ヘッダーエリアのスタイル」の中にある、「(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-blogMainTitleにつづく{}(中括弧)の後に、プロパティcolorが表記されています。これは、文字色をカスタマイズする合図なんですね。そして:(コロン)の後に#(ナンバー)をつけて色のコードを表す6ケタの数字とローマ字の組み合わせを記述します。ちなみに、現在は「#333333」となっていますよね?これは、黒系の色を意味しています。ですので、現在はブログタイトルの文字黒っぽい色で設定されているということになります。この6桁のコードのことをカラーコードと呼び、カラーコードはコード表で調べることが可能です。カラーコードのサンプルは,わたしの記事でも紹介しているのでそちらも合わせてご覧ください。
ちなみに、上記画像では、赤色(コードは、#FF0000)にしてありますね。
コードの解説 font-size
つづいてfont-sizeが表記されています。これは、読んだままですが、フォントの大きさ、つまり文字の大きさを意味します。そして:(コロン)の後に、大きさをしていしますが、現在は27px(ピクセル)という文字のサイズが表記されています。px(ピクセル)というのは、長さや大きさを表す単位だと考えてください。ですので、現在は27pxの大きさだということですね。上記の、変更後の画像は、倍の54pxとしてカスタマイズしています。
コードの解説 padding:
..skin-headerTitleにつづく{}(中括弧)の後にプロパティpadding(パディング)があります。これは、タイトルまわりの余白のことを言っています。上記コードでは-(ハイフン)のあとに、top、bottomの文字がくっついていますが、これは、上余白、下余白を意味しています。ちなみに、
右余白は、padding-right
左余白は、padding-left
となります。
コロンのあとにある、数字を大きくすればするほど、余白は大きくなりますので、試してみてください。
結構使えるので覚えておくと便利です。
コードの解説 text-align:
つぎにその下にある、text-align(テキストアライン)プロパティです。これは、タイトルを表示する位置を指定しています。現在は、:(コロン)のあとに、center(センター)が続いていますので、中央に表示ということになります。
ちなみに、これも
text-align:left とすると、左寄せ
text-align:right とすると、右寄せ
になります。
上記のカスタマイズ例にそって、カスタマイズしたコードを以下に表記します。
——————————————–*/
/* ブログタイトルエリア、ヘッダー画像の下にテキストを隠す */
.skin-blogTitle {
z-index: -1;
}/* ブログタイトル */
.skin-blogMainTitle {
color: #FF0000;
margin-bottom: 10px;
font-size: 54px;
}/* ブログ説明文 */
.skin-blogSubTitle {
color: #999999;
font-size: 16px;
}/* ヘッダータイトル */
.skin-headerTitle {
padding-top: 180px;
padding-bottom: 180px;
text-align: center;
}
いろいろと試してみてくださいね。