ブログタイトルは自分の名刺ともいうべき、重要なアイテムです。
しかしデフォルトのテーマやインストールしたテーマでは、タイトルが小さくて目を引きづらかったり、タイトルの色が背景写真と同色で見づらかったりする場合があります。
今回は、はてなブログにてブログタイトルの大きさや色を変更する方法をご紹介いたします。
はてなブログに関する記事で人気なのはこちらの記事です。こちらも是非お読みください。
はてなブログで人気の記事
ブログタイトルの変更方法
はてなブログの管理画面からデザインを選択し、カスタマイズ（スパナアイコン）をクリックします。
一番下にあるデザインCSSを選択し、コードを追加すればOKです。コードについては、次章で説明いたします。
ブログタイトルに関連するCSSコード
ブログタイトル自体のカスタマイズ
ブログタイトルのフォントサイズを変更するには、
#blog-title{font-size:○○%; }
と入力してください。○○の部分にはお好みの数字を入れてください。100が現在のフォントサイズと同じで、200にすれば2倍、50にすれば半分にサイズを変更できます。
また、ブログタイトルの色を変更するには、
#title a{color: #○○○○○○ !important;}
と入力してください。○○は色コードを入力してください。例えば、黒なら#000000、白なら#ffffff、赤なら#ff0000という感じです。ちなみに!importantを記述することで、テンプレートで指定したフォントサイズや色よりも本コードを優先することができます。
ブログ説明文のカスタマイズ
ブログ説明文とは、ブログタイトルのすぐ下に表示される見出し文のことです。ブログ説明文のフォントサイズを変更するには、
#blog-description{font-size:○○%;}
と入力してください。○○の部分にはブログタイトルと同じように数字を入力して変更できます。
同様にブログ説明文の色を変更するには、
#blog-description {color: #○○○○○○ !important;}
と入力してください。こちらも○○の部分には色コードを入力してください。
私のブログでのカスタマイズ例
私のブログでのカスタマイズ例をご紹介します。
ちなみに、たびたびデザインを変更する場合もありますので、現在の設定と下記CSSコードが同じとは限りませんので、ご容赦ください。
/* タイトルカスタマイズ */ #blog-title{font-size:200%; } /* ブログタイトルを2倍にする */ #title a{color: #f5f5f5 !important;} /*ブログタイトルのフォント色を変更する*/ #blog-description{font-size:70%;} /*ブログ説明文を1/2にする*/ #blog-description {color: #f8f8ff !important;} /*ブログ説明文のフォント色を変更する*/
まとめ
はてなブログでの、ブログタイトルの大きさや色をカスタマイズするCSSをご紹介しました。
ブログタイトルはブログの顔ですので、ぜひ設定をいじりながらブログデザインを楽しんでみてくださいね。
コメント