タイトル下のオススメ記事その2（画像サイズバラバラ対応版）

タイトル下にオススメ記事を表示するカスタマイズを以前の記事で紹介しましたが、画像サイズがバラバラの場合にうまく表示されません。これを解決する方法はいくつかあるのですが、面倒なのでもう1つ新しいスタイルを作ってみました。

完成イメージ

今回のコードでは、以下のような表示になります。

適用方法

今回も前と同じように、ブログのデザイン設定からスパナマークのカスタマイズタブを開き、その中のヘッダにあるタイトル下に入力します。

そして、前回のhtmlに変えて以下のように入力します。

<div class="recommends">
    <a href="記事URL" class="recommend-entry2" style="background-image:url(画像URL);"><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry2" style="background-image:url(画像URL);"><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry2" style="background-image:url(画像URL);"><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry2" style="background-image:url(画像URL);"><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry2" style="background-image:url(画像URL);"><span class="recommend-title">記事タイトル</span></a>
</div>

以前のコードはimgタグで画像を表示していたのですが、今回のものは背景として表示させています。そして、その背景画像がリンクのブロック全体を覆うように表示されます。

更にカスタマイズ

タイトル部分の透明度を変える

そのままだとタイトル部分が半透明の白になっています。これはこれでカッコいいのですが、全体的な雰囲気と合わない気もします。なので透明度を変えてみます。

デザイン設定からスパナマークのカスタマイズタブを開き、デザインCSSに以下のコードを追加します。

.recommend-entry2 .recommend-title{
    background:rgba(255,255,255,1)!important;
}

これで半透明ではなく真っ白になります。rgba(255,255,255,1)部分が色を示しています。最後の1の部分が透明度なので、0.5などに変えれば半透明になります。最初に設定してある値は0.8なので、それより小さい値にすればより透明に、大きい値にすれば白くなります。

画像の高さを変える

それぞれのブロックの高さを変えることもできます。表示される画像もそれに伴って表示範囲が変わります。同じくデザインCSSに以下のコードを追加します。

.recommends a.recommend-entry2{
    height:250px!important;
}

height:250pxの数字部分が値です。最初に設定してある値は180pxです。

まとめ

ほかにもカスタマイズの方法はあると思いますが、なるべく変更を少なくしてみました。それでもコード自体変えてしまっていますが…。

このオススメ記事部分は、表示する画像は実際の記事と違っても大丈夫です。なので全部の画像の縦横比を合わせたものを別途アップロードして使うのが一番かとも思います。ただそれは画像編集ができる人向けですよね。画像編集が面倒な人は今回のコードなら縦横比バラバラでも大丈夫なので使ってみてください。

なお、今回も含めこのブログ内で解説しているカスタマイズはテーマ「ZENO-TEAL」においてのみ動くものです。他のテーマにそのまま貼り付けても違う表示になるので、その点はよろしくお願いします。