はてなブログのスマホ用目次をカスタマイズ!ちょっとだけオシャレにしてみたよ

マックブックでカスタマイズ ブログにアクセスありがとうございます!
きりゅ(@kiryu_2017)です♪

はてなブログの仕様にも慣れて、少しずつこんな風にカスタマイズしたいなぁーなど考えられるようになってきました。

参考にさせてもらったコードを元に、ちょっとアレンジできるようになってきたので、メモとして残しておきます。

今回はスマホ用の目次カスタマイズです。

まず初めに

目次のカスタマイズの前に、このブログでやっているカスタマイズについて。

このブログ全体のカスタマイズについて

このブログは、立ち上げたときから、あいまいみーさん(id:imyme_999) のカスタマイズまとめ記事を参考にさせてもらってカスタマイズをしています。

www.imyme9.com

とてもボリューミー!
そして初心者のわたしにもめっちゃ分かりやすかったです。ありがとうございます♪

スマホ用カスタマイズ

スマホ用カスタマイズも、あいまいみーさんの記事の中で紹介されている、こどみすさん(id:codomisu)のコードをお借りして行ってます。

hitsuzi.hatenablog.com

スライドメニューやトグルメニューがとっても便利♪

・・・とは言っても、まだ記事数の少ない当ブログではまだその機能の実力を十分に発揮できてませんっ!

がんばって更新するぞっ!

話がそれちゃいました。

では、今回の本題!スマホ用の目次カスタマイズについて。

スマホ用の目次カスタマイズ

主なコードは、先ほどご紹介させていただいた、こどみすさんのコードを使わせていただいています。

完成した目次の見た目

スマホ用目次

見た目はこんな感じになりました!

参考にさせていただいたブログ

こどみすさんの記事と合わせて、kimixさん(id:kimix)の記事を参考にさせていただきました。

kimix.hatenablog.com

シンプルでとってもかわいい目次♪

はてなブログで使えるアイコンWebフォントを使ってリストアイコンをおしゃれに設定出来ちゃいます。

今回作った目次の★マークの部分です♪

なんとか形に出来たんですが、コードはほぼお二人のコードの組み合わせ!自分でコード組めるように勉強しよう♪

記事を書きながらCSSも勉強していきます。

まとめ

いつかコピペ用のコードとか紹介できるようになりたいなぁーと夢のようなことを思ってしまいました!

カスタマイズって楽しいですね^^
ではでは、きりゅ(@kiryu_2017)でした♪

読んでみたくなった本▼