Blogger:ナビゲーションをでっかくして目立たせて使ってもらおう！ - 新着情報編

イントロダクション

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

今回は新着情報ナビゲーションをでっかくしちゃおうと思います！
なお、新着情報は Feed によって表示しています。

でっかくする！

Blogger の「シンプル」テンプレートを適用している場合の新着情報(Feed)ナビゲーションは次のようになっています。

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

新着情報(Feed)ナビゲーション

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

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


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

.Feed {
border-style: solid;
border-width: 10px;
border-color: #eeeeee;
margin: -10px -30px -10px -30px;
padding: 0px 20px 0px 20px;
}
.Feed > h2 {
font-size: 30px;
padding: 0px;
margin: 0px;
}

.Feed ul li {
border-bottom-style: solid;
border-bottom-width: 1px;
font-size: 20px;
}

でっかくなった結果

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

でっかくした

新着情報(Feed)ナビゲーション

これで、この新着情報(Feed)ナビゲーションが見落とされることはなくなるでしょう！