タイトル下のオススメ記事その3（スマホ表示でスクロールできるようにする）

Freepikによるデザイン タイトル下にオススメ記事を挿入する方法をこれまで2種類紹介しました。しかしどちらの場合も、画面サイズによって表示数が決まっており、スマホ表示の時は2つしか表示できませんでした。（しかも通常記事と同じようなスタイルなので紛らわしい。）これを少し改造してスクロールできるようにします。

html

ヘッダに入れるhtmlのコードは以下になります。

<div style="overflow-x:auto;">
<div class="recommends">
    <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
</div>
</div>

以前のものを<div style=“overflow-x:auto;”>～</div>で囲っただけです。

css

デザインcssに以下のコードを加えてください。

@media screen and (max-width: 480px){
.recommends {
      width: 220%;
}
.recommends a.recommend-entry:nth-of-type(n+3){
      display: block;
}
.recommends a.recommend-entry:not(:last-of-type){
      margin-right: 1%;
}
}

「タイトル下のオススメ記事その2」の方を使っている場合は、以下のコードになります。（未検証ですがたぶん大丈夫だと思います。）

@media screen and (max-width: 480px){
.recommends {
      width: 220%;
}
.recommends a.recommend-entry2:nth-of-type(n+3){
      display: block;
}
.recommends a.recommend-entry2:not(:last-of-type){
      margin-right: 1%;
}
}

これでスマホ表示（というかブラウザの横幅480ピクセル以下）のときに、この部分がスクロールできるようになります。また、表示されているのが2個と、少しはみ出た3個目になります。3個目が途切れていることで「スクロールできるのでは？」と気づかせる仕組みです。.recommendsの値を調整することで、大きさなど変更できます。

どうぞ試してみてください。

参考：