はてなブログでタイトルや本文の文字色を変える方法

ブログカスタマイズ

　さて、食傷気味のブログ論はわきへ追いやってそれよりは幾分建設的なカスタマイズの記事を書こう。今日はブログの文字色の変え方を説明する。「そんなの分かってるよ」という意見もあるだろうがアクセス解析を見る限りでは少しは需要があるらしい。「はてなブログ　文字色　変更」とかで月に二、三人が来ているのだ。彼らを見殺しにするわけにはいかない。

変え方は簡単、問題はどこを変えるか

　聡明なみなさんならブログ内の文字色を変えることくらいわけないだろう。

 color:#000000;

　こうやって書けば文字色を黒にすることができる。文字の色は十六進数を使って表現している。詳しくはこのページをみると分かりやすい。

WEB色見本原色大辞典 - HTMLカラーコード

　問題はどこを変えるかである。以前デザインを変えようと思いはてなブログのソースを見たことがあるがあれはウェブデザインに疎い人にとっては呪文や迷宮のように感じるはずだ。いったいこのclassはどこまで続いているのか、idって何か。試行錯誤を繰り返しながらなんとか改装を完了した記憶がある。

　しかし安心してほしい。以下のサイトにははてなブログのclassとかidの構造が書かれている。色で分けられていて非常にわかりやすい。

はてなブログのidとかclassとか - kyabana's blog

はてなブログで「デザインテーマコンテスト」が開催されています！オリジナルデ&...

　もっと早く知って入ればよかった。

例：本文のリンク色の変え方

　それでは例を挙げて実際に文字色を変えてみよう。本文中のリンクの色をデフォルトの青にしたい人は結構いるはず。そんなときは上のサイトから「（記事本文）」と書かれているところを探す。「div.entry-content」であることが分かる。そうすると以下のように表せる。

.entry-content a {
    color: #00f;
}

　リンクの文字色を設定するにはセレクタ（.entry-content）の後に半角スペースを開けて「a」と入力する。名前の前に「.」や「#」あるがこれはセレクタがclassかidかの違いだ。ソース内で「id=~~」となっていたら頭に「#」、「class=~」となっていたら「.」とつける。

　また複数のセレクタを同様に指定するには以下のように書けばいい。

.entry-content a,.entry-footer a {
    color: #00f;
}

例：タイトルの文字色、大きさを変更する

　次に（検索流入の多そうな）ブログタイトルのフォントの変え方を説明する。これは次のように書ける。

#blog-title {
    color:#330044;
    font-size:130%;
}

　また、タイトル下の説明文のフォントを変えるのは次にようにすればいい。

#blog-description {
     color:#abcd00;
     font-size:90%;
}

設定が反映されないときは優先順位を確認すること

　さて、いざデザインを変えようとはてなブログ内の"デザインCSS"をいじるも『いくらやってもうまく反映しない！」ということがある。これは記述内容の間違いというより優先順位が低いことが原因である可能性が高い。一般に同じCSSは後から書いた方が優先順位が高くなるがそれは獲得ポイントが同じ場合である。次のサイトを見てほしい。

CSSの優先順位〜CSSテクニック〜

CSSの優先順位はセレクタの獲得ポイントで決まるからです。獲得ポイントが少なければclassやidを指定していても効果を発揮しないことがあります。

セレクタのポイント獲得ルール
*（全称セレクタ）０ポイント
p,h1　などのタグ１ポイント
.sample（classの場合）１０ポイント
#sample（IDの場合）１００ポイント

　つまり適用しているデザインテーマ内であらかじめ指定してあるデザインの方が優先順位が高いため、あなたが付け加えたcssが反映されないことがあるのだ。これを解決するには子孫セレクタを使えば良い。親要素の後に半角スペースを開けて子要素を記述する。

.hatena-module-category li a:hover {
    background: #fdd35c;
}

　それでもだめなら「important」を使えば良い。ただ、わかりにくくなるので多様は禁物。

.hatena-module-category li a:hover {
    background: #fdd35c !important;
}

おわりに

　「はてなブログ　文字色」で検索するとずっと昔の僕のエントリがトップで出てきて驚いた。あれははてなダイアリーのときに書いたものなのではてなブログ用のエントリを書かねばとずっと思っていた。ずるずる引きずっていたがやっと今日書くことが出来た。よかった。

　何かミスとか不具合とか分からないことがあればコメントで教えてください。

マトリョーシカ的日常

ワクワクばらまく明日のブログ。