【はてなブログ】タイトルの大きさと色の変更~カスタマイズ「Brooklyn」

現在、このブログはワードプレスを使って書いてますが、はてなブログでも時事ネタを書いています。

はてなブログはテンプレも豊富でお洒落、特に何も手を加えなくてもそのまま使えてとても重宝しています。

私のようにPCスキルもあまりない人間がブログを書くには、はてなブログはとても使いやすいですね。

カスタマイズができない、とよく言われますが、私はとくに不満はありません。テンプレもたくさん種類があって、なかなかお洒落だと思います。

とは言え、最低限のカスタマイズ、例えば本文記事の文字の大きさの変更ブログタイトルの大きさの変更色の変更などはしたいところです。

記事の文字の変更は難しくないのですが、ブログタイトルの文字色の変更は少し手こずりました。

備忘的な意味も込めて、その方法を記しておきます。

ちなみに私のはてなブログのテーマは「Brooklyn」です。

スポンサーリンク

はてなブログで記事本文の文字の大きさを変える方法

管理画面からデザインを選択します。

デザイン設定から、「カスタマイズ」を選択します。

そして一番下の「デザインCSS」を選択。

こちらに追加で書き込んでいきます。

本文記事の文字を大きくしたい場合は、

.entry-content {font-size:18px;}

と追記するだけです。

私は見やすくするために文字を18pxに指定していますが、お好みのサイズにしてください。

はてなブログでタイトル文字の大きさ、色を変更する方法

ブログタイトル(ブログの名前)はそのブログの顔でもあり、私はデフォルトよりも大きくしたいと思いました。

そこで以下の記述をCSSに追加しました。

#blog-title{font-size:200%; }

200%にすると、ブログのタイトルがデフォルトの倍の大きさになります。150%なら1.5倍です。

同様に、その下のブログの説明文(ブログディスクリプション)の大きさも変えました。

#blog-description{font-size:50%;}

これでブログの説明文はデフォルトの半分の大きさになりました。

次はブログタイトルの色の変更です。

私はタイトル色を黄色にしたかったので、ふつうに考えれば、

#title {color: #ffff00;}

を付け加えれば簡単に色が変わると思ったのですが、これがうまく行きません。

色々調べてみると、テンプレの記述の方が優先されてしまい、変更できないようです。それを変えるには!importantという記述を加えればいいとわかりました。

#title a{color: #ffff00 !important;}

注意点としては、#titleの後にaを入れないと私のブログは変わりませんでした。

次にブログの説明文の色の変更です。

#blog-description {color: #ffff99 !important;}

こちらは#blog-descriptionの後にaは不要でした。

♯ffff00 、♯ffff99 は色のhtmlですので、使いたい色のコードを書いてください。

ただ、これでもブログタイトルの色が変わらないという人も中にはいるかもしれません。

そのような場合は、CSSの記述の順番を、

1.タイトル文字の大きさの記述

2.ブログ説明文の大きさの記述

3.タイトル文字の色の記述

4.ブログ説明文の色の記述

5.本文文字の大きさの記述

で書いてみてください。

「本文文字の大きさの記述」を上に持ってくると変わりませんでしたので。

以上となります。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする