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

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

 kuro6さんからのDM

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

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

それ、やってみよう！！

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の値を調整することで、大きさなど変更できます。 

 とのことです。

さぁ、スマホで開こう！

お、これは！

はみ出とる！

これはスクロールできる感が！

よし、スクロールだ！

バッチリ動いている！

なんだかイカしたサイトになってる！

最後に

これでZENO-TEALのカスタマイズは一通り終わったと思います。

また、ZENO-TEAL以外でもカスタマイズになりそうなものがありましたら

実践してアウトプットしていきたいと思います。