【ブログカスタマイズ】ZENO-TEALでスマホ向けの設定方法

f:id:cristarin1120biz:20180823195808p:plain

スマホ向けに機能を追加しました。

kuro6さんからのDM
設定方法
さぁ、スマホで開こう！
最後に

kuro6さんからのDM

昨日助けていただいたkuro6さんよりDMがありました。

f:id:cristarin1120biz:20171017125603p:plain

あ、それやってみたかったやーつ！

それ、やってみよう！！

zeno-teal.hatenablog.com

これはスマホ表示のための設定ですね。

世はスマホが当たり前の時代。

なのでやらねば！

設定方法

デザイン→スパナ→ヘッダ→タイトル下に

<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に

@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%;

}

}

を入れます。

すると、

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

とのことです。