2015年2月3日火曜日

[Blogger] 「人気の投稿」ガジェットをCSSで装飾

Blogger 人気の投稿 装飾 カッコ良く 使いやすく


公式で提供されている「人気の投稿」のガジェットの見た目をカスタマイズしてみました。
以下サイトを参考に設定。説明もとても細かくされているので非常に解りやすい。
ここでは当サイトの忘備録的な記録です。


<参考サイト>
[Blogger]標準の「人気の投稿」ガジェットのスタイルを自分好みに変更する方法!
http://www.sunabox.net/2012/08/popularpostscustom.html






CSSを追加で以下のコードを追加

「人気の投稿」ガジェットを追加した後、「CSSを追加」から適宜CSSのコードを追加します。





当サイトでは以下のコードをCSSで追加


/*人気の記事の装飾*/


.PopularPosts img {
  height:80px;
  width:120px;
  padding:0;
  margin:1px 4px 0 0;
  border-radius:5px;
  -moz-border-radius:5px;
}の 



見た目はあまり変わっていませんが以下のようになりました。
画像のアスペクト比をよく使う3対2にしましたが、どうやら元の画像を横に引き伸ばしただけできちんとクロップして表示してくれているわけではなさそうですね。

この辺は今後の考慮の余地ありでしょうか。


Blogger 人気の投稿 装飾 カッコ良く 使いやすく