[Blogger]標準の「人気の投稿」ガジェットのスタイルを自分好みに変更する方法！

おはようございます！すなふ(@sunafu35)です。

Bloggerの標準ガジェットに用意されている「人気の投稿」。
文字通り、よく見られている記事をリスト状に表示してくれる、とてもいい子なガジェットですが、サムネイル画像の大きさや、フォントサイズなど、そのままでは設定出来ない項目も多くあります。

冷静に考えて、CSSを設定すればどうにかなるんじゃないか？と思ったので、設定してみました。

CSS設定前の状態

▲「人気の投稿」は、【管理画面>レイアウト>ガジェットの追加】から。

▲設定前は、こういう状態。
　サムネイル画像の縦横比が1:1の為、画像が縱に細くなっていたり、記事のタイトルと要約のフォントサイズが同じで少し見難いと感じるところが気になっていました。

▲そして、こちらは「人気の投稿」の設定画面。
　期間の設定はともかく、表示のON/OFF程度しか選ぶことが出来ません。

CSSの確認

▲画像クリックで元のサイズが表示されます。

いつもどおり、Chromeでブログを開いて、HTMLとCSSを確認したい箇所で右クリック→要素を検証を選択して、構造を見ておきます。

▲HTML側のaタグ部分を選択すると、右側にCSSが表示されます。
　画像では、サムネイル画像部分を確認中。CSSは【.PopularPosts img】で設定されていることが分かりました。

今回は、サムネイル画像の表示と、記事要約のフォントサイズを変更しようと思います。

CSSの設定用のクラス名は、それぞれ

• .PopularPosts img
• .item-snippet

と確認。このクラス名を使って、カスタムCSSでスタイルを設定します。

カスタムCSSに追加

▲カスタムCSSの追加があるテンプレートデザイナーには、
【管理画面>テンプレート>カスタマイズ>アドバンス>CSSを追加】で移動。

画像は、私の設定がそのまま表示されているので、ゴチャゴチャしていますが、何も追加していいない人は、当然真っ白な状態のフォームが表示されることになります。

ここに、設定用のCSSコードを追加！

.PopularPosts .widget-content ul li {
  padding:5px 0;
}
.PopularPosts img {
  height:85px;
  width:110px;
  padding:0;
  margin:1px 4px 0 0;
  border-radius:5px;
  -moz-border-radius:5px;
  box-shadow:2px 2px 3px #999;
  -moz-box-shadow:2px 2px 3px #999;
}
.PopularPosts img:hover{
  opacity:.7;
  filter:alpha(opacity=70)
}
.item-snippet{
  font-size:12px
}

▲上から順に説明をしていくと、

【.PopularPosts .widget-content ui li】・・・人気の投稿の1記事毎のまとまり。

• 「padding:5px 0」・・・内部余白（とでも言えばいいのかな？）の上下を少し詰めています。

【.PopularPosts img】・・・サムネイル画像。

• 「height:85px」・・・高さの設定です。
• 「width:110px」・・・横幅の設定です。
• 「padding:0」・・・標準ではpadding-right:4emが設定されているのをキャンセルするため。
• 「marigin:1px 4px 0 0」・・・余白設定で、画像の位置を微調整。
• 「border-radius:5px」・・・画像の角に丸みを付けています。
• 「box-shadow:2px 2px 3px #999」・・・画像に影を追加。

▲border-radiusとboxshadowの「-moz」がついているものはFirefoxでの表示用の設定。


【.PopularPosts img:hover】・・・画像にマウスオーバーした時の設定用です。

• 「opacity:..7」・・・マウスオーバー時に、少し透明感が出るようにして、変化を付けています。
• 「filter:alpha(opacity=70)」・・・上記設定のIE表示用。

▲数値はパーセント設定です。


【.item-snippet】・・・記事要約部分の設定用。

• 「font-size:12px」・・・フォントサイズを少し小さく。人によってサイズは変わってきますね。

こういった設定を追加しました。

結果

変更前

変更後

どうでしょうか？個人的に微調整が好きなタイプなので、劇的な変化とまでは言えませんが、サムネイル画像が見やすくできたような気がしますヽ(´ー｀)ノ

こういった、失敗しても影響が少ない部分からHTMLやCSSに慣れていくと、ブログカスタマイズも分かりやすいと思うのです。

「人気の投稿」は便利なんだけど、表示がちょっと気に入らない！って人は是非お試しを。

それではまた！


Blogger Custom - Sunabox

標準機能がここまで便利！サイトデザインを変えたい初心者にこそオススメしたい、Chrome「デペロッパーツール」で驚いた！ - Sunabox