はてなブログのサイドバーにある注目記事の文字の大きさを変更したい
サイドバーの編集の画面では変更できないみたい
集計方法や画像の大きさは指定できるけど、文字の大きさやタイトルをどこまで表示するかは指定できないみたい。
デザインCSSでどうにかできないか考えてみる。
まずはHTMLがどうなっているかを読んで見る
<div class="hatena-module hatena-module-entries-access-ranking" data-count="5" data-display_entry_category="0" data-display_entry_image="1" data-display_entry_image_size_width="100" data-display_entry_image_size_height="100" data-display_entry_body_length="0" data-display_entry_date="0" data-display_bookmark_count="0" data-source="access">
<div class="hatena-module-title">注目記事</div>
<div class="hatena-module-body">
<ul class="entries-access-ranking hatena-urllist urllist-with-thumbnails">
<li class="urllist-item entries-access-ranking-item rank-1">
<div class="urllist-item-inner entries-access-ranking-item-inner">
<a class="urllist-image-link entries-access-ranking-image- link"href="http://１位の記事URL"> <img alt="なぜいい大学をめざすのか 学歴なんて気にしなくていいのか" src="１位の記事の画像のURL情報などなど></a>
<a href="http://gonyogonyo.hatenablog.com/entry/2015/01/23/013201" class="urllist-title-link entries-access-ranking-title-link urllist-title entries-access-ranking-title ">１位の記事のタイトル</a>
</div>
</li>
<li>２位の記事の部分 基本的には上と同じ</li>
<li>３位の記事の部分 基本的には上と同じ</li>
<li>４位の記事の部分 基本的には上と同じ</li>
<li>５位の記事の部分 基本的には上と同じ</li>
</ul>
</div>
</div>
デザインCSSで文字の大きさを変更してみる。
<div class="urllist-item-inner entries-access-ranking-item-inner">
のところの文字の大きさを指定してあげれば良いから
.urllist-item-inner.entries-access-ranking-item-inner
font-size: 9px;
}
これを書き入れて、sizeの数字をいろいろいじってみたらちゃんと小さく出来た！！
どやっ！！！
