はてなブログの目次をカスタマイズする方法まとめました。

スポンサーリンク

f:id:mono-lvx:20180102224816p:plain

どうも、すっちー(@hkc_27)です。

 最近はてなProに変えたにあたって(30日間は無料なのでとりあえず)、ブログのデザインを変えていたら目次のデザインが狂ってしまい、1人てんやわんやしていました(笑)

 

そこで、目次のカスタマイズにあたってどこを変更すればよいか、また次にデザインが狂ったとき自分で確認できるように備忘録を書いておきます。

 

 

そう、今回は私のための記事です!!(笑)しかし、素敵な目次のデザインがおいてあるサイト様も紹介するので「目次カスタマイズしてみたいよ」という方はぜひ見ていってください。

 

 

参考にしたサイト様

上の目次は「LIFE LITTLE ESCAPE」様のデザインを使用しています。オシャレかつシンプルな女性向けの目次でとてもかわいいんです!

この目次以外にも全6種類紹介されているので気になる方はぜひチェックしてみてください。お気に入りの目次が見つかるはず♪

 

kimix.hatenablog.com

 

 

目次の貼り方やその他カスタマイズを参考にさせていただいたのが「えふじん」様。カスタマイズのやり方をわかりやすく説明されていて非常にお世話になりました。「貼る場所忘れた!」「どの部分変えればいいの?」という疑問が出たらここを見ておけば問題ないはず。

 

llewevil.hatenablog.com

 

非常に参考になりました!ありがとうございます!

 

 

実際にコードを貼ってみた

さっそくコードを貼って目次のデザインを変えてみたのですが、実際に貼ってみると全然うまくデザインされていない!

 

f:id:mono-lvx:20180102225955j:plain

 

「ー目次ー」がリンクとかぶってしまっているし、背景はなぞの灰色になっているし(笑)なぜこうなるかは私にはわからないのですが、これでは困るので必至に1時間以上かけて修正をしました!

 

次に修正した部分ひとつひとつ紹介していきます。なお私はHTMLやCSSについては多少ふれたことがある程度でほとんど知識はありません。もっといいやり方がある場合はぜひ教えてください(笑)

 

 

目次の背景を白に変更

目次の背景を白にするには「ul.table-of-contents」の部分に「background-color: #fff;」と追加すれば白になります。

 

f:id:mono-lvx:20180102231404p:plain

 

 

 

「ー目次ー」の位置を動かす

次におかしな位置にある「ー目次ー」を移動させます。同じく「ul.table-of-contents」の部分の「padding」の数字をいじります。この「padding」にある数字は[上][右][下][左]にそれぞれ対応しています。上下左右の方が覚えやすいのに…(笑)

 

対応がわからなくなったらここを見るとわかりやすいです。2個の場合、3個の場合も載っていて便利です。

http://www.htmq.com/style/padding.shtml

 

f:id:mono-lvx:20180102232256p:plain

 

数字をいじった結果がこちら。まだ若干ずれてはいますが、許せる範囲の場所にはいますね。

 

f:id:mono-lvx:20180102232612j:plain

 

 真ん中に「ー目次ー」を持っていきたいのでもう少し修正します。今度は「ul.table-of-contents:before」の部分の「margin」の部分の数字をいじります。

 

f:id:mono-lvx:20180102233845p:plain

 

そうすることでようやく完成します。完成した目次が以下の写真です。真ん中にきたし見た目的にもそんなに悪くないのではないでしょうか?位置をずらしたい場合は基本的に「padding」か「margin」の数字をいじればずらせます。

 

 

f:id:mono-lvx:20180102234032j:plain

 

 

スマホ版の目次も改良

proにしたことでスマホの目次もカスタマイズできるようになったのですが、こちらも問題だらけでした(笑)せっかくなのでスマホ版も説明を残しておきます。スマホの目次の方が直すのが大変でした!

 

そのままコードを貼った場合

f:id:mono-lvx:20180102234946j:plain

 

もうめちゃくちゃずれてて泣けます(笑)箱がずれてるのかアイコン(灰色の⊕)がずれてるのか、どっちずらせばいいんだ!という感じでしたが、今回はアイコンをずらしました。

 

※実際アイコンをずらせたのか自分でもわからないのですが、意識的にはあの箱から出ているアイコンを右に突っ込みました。

 

 

アイコンの位置をずらす

「ul.table-of-contents li:before」の部分の「left」の値を「4em」に変更しました。

 

f:id:mono-lvx:20180102235640p:plain

 

f:id:mono-lvx:20180102235846j:plain

 

箱内にアイコンが収まりました。これでほぼ完成してませんか?最初にやった時はもっといろんなところ変更してめちゃくちゃ時間かかったのにな…。目次の部分は前に説明した部分の値を変更すれば大丈夫なはず。

 

なお、箱が若干右寄りな気もしますが許容範囲内かなと思い今回はこれ以上いじりませんでした。 体力の限界も感じてきたので(笑)

 

 

おわりに:カスタマイズ疲れた

HTML・CSSがバッチリわかっていれば目次のカスタマイズも造作もないことなのでしょうが、うろ覚え同然の私には苦行でしかありませんでした(笑)

 

しかし、なんとかなりますね!疲れますけど!その場で調べていじればできちゃうものでした。実際にコードもいじれてまたひとつ学習できた気がします。

 

もしデフォルトの目次からオシャレな目次に変えてみたい人はぜひチャレンジしてみてください。そしてデザインが狂っていた場合はこの記事を参考にしてみてください。

 

ここまで読んでいただきありがとうございました!

 

次の記事はこちら

hkc27.hatenablog.com