理系男子のIoTライフ

理系男子があなたの生活を少し「ラク」にする情報をお届けします。

スポンサーリンク

【はてなブログ】ブログタイトルの大きさや色をカスタマイズする方法

ブログタイトルは自分の名刺ともいうべき、重要なアイテムです。しかしデフォルトのテーマやインストールしたテーマでは、タイトルが小さくて目を引きづらかったり、タイトルの色が背景写真と同色で見づらかったりする場合があります。今回は、はてなブログにてブログタイトルの大きさや色を変更する方法をご紹介いたします。
f:id:rikei_iot:20180523002941p:plain

スポンサーリンク



ブログタイトルの変更方法

はてなブログの管理画面からデザインを選択し、カスタマイズ(スパナアイコン)をクリックします。

一番下にあるデザイン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をご紹介しました。ブログタイトルはブログの顔ですので、ぜひ設定をいじりながらブログデザインを楽しんでみてくださいね。

また、はてなブログをもっとカスタマイズしていくなら、こういった参考書を1冊は持っていた方が良いかもしれません。

読者になるボタンやはてブ!ボタンを押していただけるとブログ執筆の励みになりますので、ぜひお願い致します。