【はてなブログ：カスタマイズの備忘録】サイドバーの人気記事リンク。タイトルの文字サイズを変更する方法
はてなブログを開始して1年ほど経過しました。
気になったところだけ、ちょっとずつ画面のカスタマイズをしています。
今日は、サイドバーに表示している「人気記事」一覧の文字サイズ（フォントサイズ）を変更する方法を調べたので、備忘録を残します。
【今日の目次】
１．サイドバーに表示の「人気記事」一覧の、文字サイズが気になる・・
サイドバーがあると、ちょっとごちゃつくイメージで
あまり好きではないのですが、
私自身、誰かのブログを見るとき、結構「人気記事」は気になるんですよね！！
もともとの検索意図とは違っても、
興味があれば見ちゃう。それが「人気記事」だと思います。
なので、私のサイトにおいても以前から表示するようにしていました。
が、気になってたのは、デザイン。
もともと（デフォルト）のデザインだと、なんだか記事のタイトルの文字が大きく、ごちゃごちゃ感が半端ないっ。
気になっている部分はこちら↓
【フォントサイズ変更前】
私の付けてるタイトルが長いのが一因なんですけどねっ。。
なんか読みにくいし、やぼったい。。
で、結論から書くと、こんな風に変更しました↓
【フォントサイズ変更後】
変更点は、
- タイトルの文字サイズを<110%> → <85%>に。
- 日付を追加
- 記事本文の表示は消去
です。
タイトルが長いので、このくらいでちょうど良い感じに。
完全に納得してませんが、、だいぶすっきりしました。
２．サイドバーの「人気記事」の、フォントサイズ変更の方法
使っているデザインのテーマによって異なるかもしれませんので、
変更する変数の調べ方から記載します。
①サイドバーの「人気記事」の、フォントサイズを決めている変数を調べる
Webブラウザで、調べたいページを表示し、変更したい箇所「サイドバーの人気記事」のタイトル上にマウスを合わせて右クリックします。
右クリックして出てきた「検証（I）」ボタンを押す。
画面はWebブラウザの「Chrome」での例↓
「検証（I）」ボタンを押すと、次のようにHTML画面が表示されます↓
画面上部の、青枠の囲いの中がクリックしたときに指した要素。
この中を見ると、クラスが、”urllist-title-link” だと分かります。
また、同画面：下の「Styles」というタブの中に、同クラス"urllist-title-link"の”font-size”を決めている項目が見つかります。これが変更ターゲットです！
※上記写真はすでにフォントサイズ修正後のHTMLで、85%に訂正したものですっ。
もともとは、その下に線で訂正されている”110%”となっていました。
②はてなブログのデザインCSSに、この変数の修正値を設定する
まずははてなブログのダッシュボードを表示。
ダッシュボード左メニューの中の「デザイン」をクリック。
次に、デザインの中の、「カスタマイズ」ボタンを押す。
カスタマイズボタンは、工具スパナみたいな絵のやつです↓
下部にある、「デザインCSS」の中をクリック↓
で、表示されたエディタ画面で、一番下の部分に
次のコードを記載する。
------------------------------------------------------
/* サイドバーの文字サイズを変更 */
.urllist-title-link {
font-size: 85%;
}
------------------------------------------------------
サイズは、試行しながら好みの値を調整します。
書き終えたら、「カスタマイズ」ボタン（スパナマーク）の上にある、「変更を保存する」ボタンを押すことを忘れずに！
３．まとめ
はてなブログをはじめて1年。
2年目の今年は、記事内容の充実を図るとともに、ブログのカスタマイズ方法を少しずつ覚えていきたいと思っています。
やっぱり、見やすいサイト、見にくいサイトってあるんですよね～。
見てもらえる、心地良いサイトデザインを探ってみたいと思います。
それでは、また☆
