はてなブログを簡単カスタマイズ！④ブログタイトル編
■始めに
はてなブログはスタイルシートを使うことで、かなり自由にカスタマイズができることが分かってきた筆者です。ブログのデザインのカスタマイズをやり始めると、楽しくて時間が経つのを忘れてしまいます。
基本的に筆者は、いろいろなサイトで公開されている方法を参考にして試行錯誤していますが、どのサイトで何の情報が掲載されていたか、だんだんと分からなくなってきました。
そんなわけで、各種のカスタマイズ方法を記事としてまとめておくことにしました。今回はブログのタイトルまわりの変更です。画像は使わず、テキストだけのタイトルのカスタマイズ方法をまとめています。
■無料版でOKです
今回の内容も、無料版のはてなブログでも利用できるものです。また、レスポンシブデザインを適用すれば、PC向けの画面がそのままスマホ向けにも表示されますので、一石二鳥です。レスポンシブデザインについては、こちらの記事をご確認ください。
■タイトルの背景色を変更する
まずはタイトル部分の背景色の変更です。次のコードをコピーしてください。
#blog-title{
background: #003000; /*背景色*/
}
続いてダッシュボードの「デザイン」メニューを開いてください。スパナマークをクリックしたら表示される「デザインCSS」を、さらにクリックしてください。ここがスタイルシート記述欄なので、先ほどのコードを貼り付けます。
 |
簡単ですよね？コードの中の「#003000」の数字（カラーコード）が色を指定する部分です。カラーコードについては、こちらのサイトなどを参考にしてください。
■タイトル文字のサイズを変更する
続いてタイトルの文字を変更する方法です。次のコードをご覧ください。
#blog-title{
background: #003000; /*背景色*/
font-size:80%;
text-align:center;
}
先ほどの背景色の変更で使ったコードに、タイトル文字のサイズを指定する「font-size」とタイトル文字をどこに配置するかを指定する「text-align」を追加しています。
上記の例では「font-size」をパーセントで指定していますが、「○px」のように絶対値の指定もできます。
「text-align」は、上記の例は「center」でセンタリングを指定しています。「left」を指定すると左寄せになります。
■タイトル文字の色を変更する
普通に考えると、先ほどのコードの中で「color」を追加すればタイトル文字の色も指定できそうな気がしますが、なぜか指定した色に変わりません。
いろいろ調べた結果、次のコードを使うと上手くいきました。
#title a{
color: #000080 !important; /*タイトル文字色*/
}
タイトル文字はリンクになっているので、「a」要素として指定してやれば良いようです。
「!important」は、スタイルシート内で競合する内容がある場合、優先したい方に指定しておくと良いみたいです。筆者の場合、この指定をしておかないと上手くいきませんでした。
あまり深く考えなくても、実際に使う時は単純にコピペでOKです。
■ブログの説明文の文字を変更する
最後はブログの説明文の文字の変更方法です。コードはこちらです。
#blog-description {
color:#000080; /*ブログ説明文の文字色*/
font-size:100%;
text-align:left;
}
「blog-description」がブログ説明文の要素の名前というわけですね。文字のサイズや配置位置の指定方法は、タイトル文字と同様です。
■さいごに
ブログのタイトルは、アクセスした人の目に必ず触れる部分です。タイトルまわりのカスタマイズを行うことで、ブログの印象が結構変わります。画像を使わなくても、配色の組み合わせを工夫するだけで充分に個性的なタイトルにすることができると思います。コピペと多少の変更で簡単に行うことができるので、一度お試しください。
