
スマホ向けに機能を追加しました。
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に
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以外でもカスタマイズになりそうなものがありましたら
実践してアウトプットしていきたいと思います。