サムネイルにタイトルを重ねるスタイルを他のウィジェットにも適用したい場合

そのランキングのhtmlがどういう構造かにもよりますが、例えば

<li>
  <div class="thumb"><img></div>
  <div class="text">何かしらのテキスト</div>
</li>

このような構造なら、liが親要素になりますので、liにposition:relativeを入れます。
.thumb、.textはposition:absoluteを入れます。

こうすると、親要素は通常通り表示され、その中の子要素が絶対配置になります。絶対配置とは、relativeの要素の中の座標で表示できるようになるということです。

サンプル: imgをそのまま何とか使う | jsFiddle

で、imgタグはちょっと使いにくいので、jQueryで背景画像にすることもできます。

サンプル: imgを背景にする | jsFiddle

僕的にはこっちのをオススメしますが(いろいろやりやすいので)、手を入れればimgでも色々できます。
とにかく元のhtmlがどのような構造であるかが重要です。それがわかればどのようにもできると思います。

返信したんですが、表示されないのでわいひらさんの救援待ちです。

Hidekichiさん

了解致しました(⌒-⌒; )

いつもありがとうございます！

Hidekichiさん

ご返信ありがとうございます。

現在出力されている構造はこういう状態です。

 <aside id="simple_ga_rankig-2" class="widget widget_simple_ga_ranking">
<h3 class="widget_title sidebar_widget_title">週間人気記事ランキング</h3>
　<ol class="sga-ranking">
　　<li class="sga-ranking-list sga-ranking-list-1">
　　　<div class='ranking-img'>
　　　　<a href="URL" title="○○○"><img src="○○○" alt="○○○" title="○○○"></a>
　　　</div>
　　　　<a href="○○○"class="sga-simplicity-merge" title="○○○">○○○</a>
　　</li>
//以下入れ子構造続く

出力されるタイトルにClassが振られていなかったので、プラグイン側で
タイトルにClassを出力する様に編集はしたのですが。

サンプル: jQueryの方で指定のhtmlにあわせてみた | jsFiddle

ul　を　.sga-ranking
.thumb　を　.ranking-img
.text　を　.sga-simplicity-merge

と読み替えれば前のサンプルのまんまイケると思います。今回のは全部適用しました。
リンクがあるのでそこだけcssに追加してます。

jQuery使わないバージョンの方はwidthやらを指定すればいい感じにできると思います。
サイドバーに入っている場合widthは300px(336px)だろうと思うので計算もしやすいです。
これが#maimの中に入っている場合はメディアクエリやらも必要になりますが。

元々のSimplicityのcssの兼ね合いもあると思うので、必要のないプロパティは打ち消すなどの対応も別途必要かと思いますが、olで書かれているのでさほど手を入れなくてもイケるのではなかろうかと思います。

jQueryで中身を変更する際、画像が縮小されたりするのがチラっと見えたりするので、人手間加えると軽減できます。

投稿してもた。
で、人手間とか怖いよ、なんぞそれ。

サンプル: ひと手間加えてちらつき軽減 | jsFiddle

Hidekichiさん

レスが大変遅くなりました。

やっと時間が出来ましたので、頂いたサンプルコードを用いて
早速調整を実施しました。

いい感じにはなったのですが、

#sidebar li {
margin-bottom: 10px;
}

を調整すればサムネイル間のマージンを変更出来るのですが、
カテゴリリストまでマージンが変わってしまいます。

書き方が悪いのか、どこにマージンを設定しても効かないのは
この#sidebar liの方が上書きされていると言うことでしょうか？

少し思ったのですが、Simplicityに標準で設定されている【最近の投稿】に
適用されるスタイルをそのまま適用できればコードが増えないかな・・・と
思ったりもしたのですがどうでしょう。

#sidebar .xxx li {
  margin-bottom: 10px;
}

のように、.xxx部分に適用したい範囲のセレクタを入れればよいだけです。.xxx部分だけにmargin-bottomが適用されます。

サンプル: サンプルでは.sga-ranking liにmargin-bottom追加 | jsFiddle

Hidekichiさん

ありがとうございます！！

概ね期待通りの仕上がりになりました。

モバイル表示の際に画像のサイズが微妙に大きくて左右にずれる挙動も、
mobile.cssに画像サイズの調整値を入れて調整したらうまく纏まりました。

本当にありがとうございます<(_ _)>