~ モバイル版(スマートフォン)の操作 ~
左右にスワイプすると、前後の投稿へ移動します。
← 前の投稿 | 次の投稿 →
日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年5月5日月曜日

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;
}


でっかくなった結果

でっかくした結果、次のようになりました。
でっかくした
人気の投稿ナビゲーション


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

スポンサーリンク

コメントを投稿

コメント投稿機能について