Blogger:ナビゲーションをでっかくして目立たせて使ってもらおう！ -人気の投稿編

イントロダクション

「ナビゲーションをでっかくして目立たせて使ってもらおう！」シリーズは Blogger の各ナビゲーションをでっかくして、使ってもらいたい機能・目立たせたい情報を読者にアピールしようとする一連のシリーズです。

今回は人気の投稿ナビゲーションをでっかくしちゃおうと思います！

でっかくする！

Blogger の「シンプル」テンプレートを適用している場合の人気の投稿ナビゲーションは次のようになっています。

Blogger の「シンプル」テンプレートを適用している場合の

人気の投稿ナビゲーション

(一部のpaddingなどはスタイルシートで変更しています。)

ブログ内で使われている本文と同じサイズのフォントサイズのため、上からスクロールしてきたときには見落としてしまいそうです。


そこで、テンプレートのカスタマイズにて、上級者向け→CSSを追加にて以下のスタイルシートを適用してみました。

.PopularPosts > h2 {
padding: 0px;
margin: 0px;
font-size: 30px;
}
.main > .PopularPosts {
border-style: solid;
border-width: 10px;
border-color: #eeeeee;
margin: -10px -30px -10px -30px;
padding: 0px 20px 0px 20px;
}
.popular-posts ul li {
border-bottom-style: solid;
border-bottom-width: 1px;
font-size: 20px;
}

でっかくなった結果

でっかくした結果、次のようになりました。

でっかくした

人気の投稿ナビゲーション

これで、この人気の投稿ナビゲーションが見落とされることはなくなるでしょう！