【はてなブログ】超初心者向け☆目次の作り方と目次・見出しのデザイン変更方法
普段ブログを書く時はほとんど文章のみで
複雑な技術は使わないのですが
というか使いたくても使えないのですが
先日はてなブログで吹き出しを吹き出す方法を
超初心者向け（＝自分）のために書いた時に
情報量が多すぎて
こりゃ色々まとめないと読みづらいぞ
と思い
調べに調べまくって
先人たちの知恵をお借りすることにしました
まとめてくれている方々ほんとありがたいです
吹き出しの吹き出し方記事はこちら
そしてこの中で使った
（自分的）超難関技術その①【目次をつくる】
こちらの方法をまとめてみたいと思います
超難関と言いましたが
私がとんでもない初心者なだけで
慣れている方でしたら秒でできちゃうと思います
目次の作り方
目次とはこんな感じのものです
見たいページにすぐ飛べるのが、そう目次
一度使うと病みつき間違いなしの便利機能です
このやり方は意外と簡単で
①目次のお題にしたい部分を選択して
②大見出し、中見出し、小見出しの中から選ぶだけです
私は何となく中見出しにしています
中見出しの中にさらに小見出しで細かくわけることもできます
大＞中＞小 っていう感じです
見出しを選択したらあとは
目次を置きたいところで目次ボタンを押すだけ
[:contents]という文字が出てきて
はぁ？！と思ったあなた、そして私
大丈夫です
プレビューを見れば納得の完成度
目次のデザイン変更方法
目次を設置するところまでは
私でも難なくできたのですが
最初に設定されていた目次がこんな感じだったんです
なんか目次っぽくないしわかりづらい
と思い目次デザインの変更方法を調べました
色々な方が色々なテイストのデザインを載せてくれているのですが
私はこちらを参考にさせて頂きました
めっちゃ可愛いです
背景色やマスキングテープの色、文字の色も変更できます
吹き出しの時のようにデザインCSSにコピペだけで
あら不思議
可愛くてわかりやすい目次に早変わりです
見出しのデザイン変更方法
やり進めていくと色々凝りたくなるのが人間の性
次に気になったのは見出しのデザインです
元々のデザインはこちら
元々もすごい可愛いんですが
見出しっていう主張が少ない控えめな子なので
こちらも変更することにしました
参考にさせて頂いたのはこちら
たくさんの見出しデザインを載せてくれていて
迷うぐらい素敵です
これも目次と同じくデザインCSSにコピペで出来ました
あと、私もそうでしたが
元々のデザインが被って表示されてしまった場合
/* 既存見出しのリセット */
.entry-content h4,
.entry-content h4:before,
.entry-content h4:after {
content: none;
background: none;
background-color: none;
border: none;
border-radius: 0;
}
このコードを見出しデザインの前に入れると綺麗に表示されました
参考にさせて頂いたのはこちら
目次を使ってわかりやすいブログ
私はあんまり使う時がないけど
プロみたいで憧れちゃう
よかったら使ってみて下さい～
