はてなブログ目次のデザイン崩れの直し方とカスタマイズ方法まとめ!

この記事では、はてなブログの目次をカスタマイズ方法とデザインの崩れを修正する方法をまとめています。

せっかくはてなブログを始めたのなら、オシャレで素敵なブログにしたいですよね!

でもはてなブログの目次ってシンプルで少し個性に物足りなさを感じてしまいませんか?

今はワードプレスでブログ運営をしている私ですが、はてなブログ時代は目次を可愛くてオシャレなものにしたいと思って目次をカスタマイズしているブログ様にお世話になっていました。

しかし、紹介されているやり方でカスタマイズをしてみると目次のデザインが崩れてしまっているという事態に、、、

(後にブログデザインのCSSとうまく合わなかったせいであったと解決しました。)

 

そんな過去の私と同じように「目次のデザインが崩れてしまい困っている」人向けに、デザインが崩れた場合の対処方法とオシャレな目次のサンプルCSSを紹介しているサイト様を紹介します!

 

目次をオシャレで素敵なものにカスタマイズしていきましょう!

目次のカスタマイズで参考にしたサイト様

目次は「LIFE LITTLE ESCAPE」様のデザインを使用していました。

オシャレかつシンプルな女性向けの目次でとてもかわいいんです!

全6種類の目次が紹介されていますので気になる方はぜひチェックしてみてください。

あなたのお気に入りの目次が見つかるはずです(*´∀`*)

kimix.hatenablog.com

 

目次の貼り方やその他カスタマイズを参考にさせていただいたのがえふじん様のブログ。

カスタマイズのやり方をわかりやすく説明されていて非常にお世話になりました。

「貼る場所を忘れてしまった!」「どの部分変えればいいの?」という疑問が出たらえふじん様のブログを参考にすれば問題ないはずです。

llewevil.hatenablog.com

 

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

目次のデザイン崩れの修正方法

サンプルCSSのコードをそのまま貼ってみた状態

サンプルCSSのコードをそのまま貼ってみた状態が以下の画像です。

「ー目次ー」のタイトルが項目と重なってしまっていますし、本来であれば白の背景ですがなぜか灰色になっています。

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

このままではあまりに見栄えが悪くて困るので、実際に修正したコードを一つずつ解説していきます。

ちなみに、私はHTMLやCSSについては多少触れたことがある程度でほとんど知識はありません。

もっといいやり方がある場合はぜひ教えてほしいと思っています!

目次の背景を白にする

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

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

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

次におかしな位置にある「ー目次ー」を移動させます。

同じく「ul.table-of-contents」の部分の「padding」の数字を変更していきます。

この「padding」にある数字は[上][右][下][左]にそれぞれ対応しています。

数字の対応がわからなくなったら以下のサイトを参考にするとわかりやすいです!

2個の場合や3個の場合も載っていて便利です。

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」にしたことでスマホの目次もカスタマイズできるようになったのですが、こちらも問題だらけでした。

せっかくなのでスマホ版のデザインカスタマイズも説明をしていきます。

 

スマホ版の目次の方が直すのが大変でした!

サンプルCSSをそのままコードに貼ってみた状態

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を知らない人にとっては少し難しい作業だったかもしれませんが、これを機にHTMLやCSSの学習をしてみるのもいいかもしれませんね。

 

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

3 Comments

Tekaten

僕も時間をとってカスタマイズしようと考えていたので、参考にさせてもらいますね!

返信する
kimix

ご利用になってるテンプレート次第でcss修正が必要になってしまうみたいですね…!お手を煩わせてしまい申し訳ございませんでした(>_<)

返信する
mono-lvx

id:Tekaten
てかてんさんのカスタマイズ楽しみにしてます!参考にしてくださり嬉しいです(/ω\*)コメントもありがとうございます!!

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください