Colorful Days

様々な事に興味がある筆者の日々

【EX】ブログのデザインをZENO-TEALに変更しました。

f:id:cristarin1120biz:20171016170623j:plain

昨日は疲れちゃったので辞めちゃいましたけど、スマホ向けに機能を追加しました。

 

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

 とのことです。

 

さぁ、スマホで開こう!

お、これは!

はみ出とる!

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

f:id:cristarin1120biz:20171017130931p:plain

よし、スクロールだ!

 

f:id:cristarin1120biz:20171017130852p:plain

バッチリ動いている!

 

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

 

最後に

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

 

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

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