BloggerのPupularPostsを字幕付きサムネイルにする方法（文字を画像に重ねる方法）

Google Bloggerには人気の投稿を表示してくれるPopular Postsという便利なウィジェットがありますが、
デフォルトでは画像の横にテキストという順番で表示されます。

それでも良いんですけど、画像の上にテキストを重ねるっていうのをやってみたかったので色々と試しました。
結果的になんとか実現できたので、それまでの経過をまとめておこうと思います。
記事の途中でWLWがバグってデータが飛んだことにより折れかけているハートで何とか頑張ります。

参考サイト

画像上の自由な位置に文字を重ねる方法という記事を参考にします。
かなり分かりやすい解説をしてくれていますので、理屈系はこっちに丸投げします。

要は親となるブロックを探してposition: relative;を指定して基準を作り、
かぶせたいテキストにposition: absoluteを指定して位置を調整します。
その要素をBloggerのPupularPostsに使われている名前に当てはめていくそうです。

というわけで、早速やっていきましょう。

PopularPostsの名前を確認しよう

Chromeでサイト上で右クリックして要素の検証を使って一通り調べました。

まずはPopularPostsのIDを調べます。
これは人によってIDの最後につく数字が違う可能性があるので、何とかして探り当ててください。
この場合は　PopularPosts1　がid名です。
ちなみに頭に#がついてるのがidで、.がついてるのがclassです。

サムネイルエリアのclass名は
item-thumbnail　のようです。

この名前はBloggerなら不変なので、調べなおす必要はないです。

テキスト部分のclass名は
item-title　です。

こちらの名前もBloggerなら不変なのでそのまま使えます。

CSSを記述する

 

#PopularPosts1 li {
list-style-type: none;
}
#PopularPosts1 img {
height:200px;
width:200px;
padding:0;
margin:0;
}
#PopularPosts1 .item-snippet { font-size:12px ;}
#PopularPosts1 .item-thumbnail-only { position: relative;}
#PopularPosts1 .item-title a {
position: absolute;
top: 150px;
left: 0;
width: 200px;
height: 50px;
padding: 0;
opacity: 0.8;
filter: alpha(opacity=80);/*IE7*/
background: #000000;
overflow:hidden;
}
#PopularPosts1 a, #PopularPosts1 a:link{color: #ffffff;}
#PopularPosts1 a:visited{color: #ffffff;}
#PopularPosts1 a:hover{color: #cccccc;}
#PopularPosts1 a:active{color: #cccccc;}

 

これをそのまま適用するとこんな感じ。

後はこれを適当に調整してください。

#PopularPosts1は自分のサイトのウィジェットのidに修正してください。

#PopularPosts1 img のwidthとheightでサムネイルのサイズ変更。

#PopularPosts1 .item-title aのwidthとheightで字幕のサイズ変更、
topで基準値からどれだけ下に表示するかの設定、
leftで基準値からどれだけ右に表示するかを設定できます。
字幕内のテキスト位置はpaddingで微調整することができます。
字幕背景の色はbackgroudを変更してください。
opacityを変更すると字幕背景の透明度が変わります。

 

というわけで、以上で人気の投稿に字幕をつける方法の説明は以上です。
デザインに関してはWEB道様のCSSサンプルが参考になると思います。