ZENO-TEAL

今日もドッタンバッタン大騒ぎ

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

f:id:c-miya:20170602180415p:plain 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の値を調整することで、大きさなど変更できます。

f:id:c-miya:20170602181404p:plain

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

参考: