【1分で作れる】はてなブログの「目次」の作り方・カスタマイズ方法を紹介！
『はてなブログの目次ってどうやって作るの？』
こんな悩みを一発解決します。
本記事では、はてなブログの「目次」の作り方・カスタマイズ方法を紹介します。
この記事を見れば、目次の作り方が分からない初心者でも1分で作ることができますよ。
また、目次をもっとオシャレに・シンプルにするカスタマイズ方法も載っているので、目次のデザインを変えたい方は、ぜひ最後まで見ていって下さいね。
それでは、みていきましょう！
はてなブログの「目次」の作り方
さっそく、目次の作り方を紹介していきます。
目次は以下の2ステップで作ることができます⇩
①見出しを整える
②目次を出す
②目次を出す
順にみていきましょう。
①見出しを整える
まずは、記事の見出しを整えましょう。
見出しの作り方は、アプリ版なら［装飾］→［見出し］から見出しにしたい文を選びます。
パソコン版なら、画面右上「見出し」という四角の所から大見出し(h3)、中見出し(h4)、小見出し(h5)のうちどれかを選んで見出しにします。
また、見出しにする際はちゃんと大見出し・中見出し・小見出しを整えておきましょう。
文で説明すると長くなるので、画像で説明します⇩
このように、大見出し・中見出し・小見出しを整え、記事と目次を見やすくしておきましょう。
②目次を出す
見出しを整えたら、いよいよ目次を出してみましょう。
アプリ版なら、目次を出したい場所に［:contents］と入れるだけで目次ができます。直書きでOKですよ。
(本当は [ ] を使います)
パソコン版なら、目次を出したい場所にカーソルを合わせ、下の画像が指しているボタンを押すと目次ができますよ。
どちらも、見出しを整えれば10秒かからずで作れちゃいますね。
また、目次を出す場所は最初の大見出し前が一番ベストです。下の画像の通りですね⇩
はてなブログの「目次」のカスタマイズ方法
はてなブログ目次の作り方を知ったら、次は目次を自分好みにカスタマイズしちゃいましょう。
はてなブログの目次は、カスタマイズしないとかなりダサいし、粗いつくりなので…。
ということで、ここからは、はてなブログ目次の簡単カスタマイズ方法を紹介していきます。
紹介するカスタマイズ方法は以下の5つ⇩
①枠を丸く青くする
②もっと目次を目立たせてみる
③ストライプ背景にする
④シンプルなデザインにしてみる
⑤女性向けのおしゃれなデザイン
②もっと目次を目立たせてみる
③ストライプ背景にする
④シンプルなデザインにしてみる
⑤女性向けのおしゃれなデザイン
順に紹介します。
※ここで紹介する目次のコードは、全てデザインCSSの欄に貼り付けて下さい。
また、目次カスタマイズのコードはそれぞれ「引用元」の記事に載ってあります。
［デザイン］→［スパナ🔧マーク］→［デザインCSS］からコードを貼り付けられますよ。
①枠を丸く青くするカスタマイズ
引用元⇩
目次カスタマイズその1は、枠を丸く・青くするカスタマイズです。
実際のデザイン⇩
枠を丸くして青色にしたことで、目次がカジュアルになりましたね。
「シンプルめなデザインで良い！」という方におすすめのカスタマイズ方法です。
②もっと目次を目立たせてみる
引用元⇩
目次カスタマイズその2は、もっと目次を目立たせてみるカスタマイズ方法です。
実際のデザイン⇩
上の青色部分がオシャレな雰囲気をかもし出していますね。
「もっと目次をオシャレに目立たせたい！」という方におすすめしたいカスタマイズ方法です。
③ストライプ背景にする
引用元⇩
目次カスタマイズその3は、ストライプの背景にするカスタマイズ方法です。
実際のデザイン⇩
背景がストライプになっていて、どこかかわいくてカジュアルな雰囲気ですね。
「少しかわいくてカジュアルなデザインにしたい！」という方におすすめのカスタマイズ方法です。
また、コードをいじれば背景の色を変えられることもできますよ。
④シンプルなデザインにしてみる
引用元⇩
目次カスタマイズその4は、かなりシンプルなデザインにするカスタマイズ方法です。
実際のデザイン⇩
シンプルなデザインですが、かなり見やすくなっているのが特徴的ですね。
また、この目次のデザインは表示をするかしないかの選択ボタンがありますよ。
「シンプルな目次にしたい！」という方におすすめのカスタマイズ方法です。
⑤女性向けのおしゃれなデザイン
引用元⇩
目次カスタマイズその5は、女性向けのかなりおしゃれなデザインにするカスタマイズ方法です。
実際のデザイン⇩
ここまで紹介してきた目次と比べてかなりスタイリッシュでおしゃれな作りになっていますよね。
女性の方にぜひ使ってみてほしい、おすすめのカスタマイズ方法です。
はてなブログの「目次」まとめ
ここまで、はてなブログ目次の作り方・カスタマイズ方法を紹介しました。
ブログ記事にとって「目次」は欠かせない存在なので、是非あなたも目次を作って、自分好みにカスタマイズしてみましょう！
関連記事
＞＞『【自動広告はダメ】はてなブログでアドセンス広告を貼り付ける方法まとめ』
＞＞『はてなブログ無料版で収益化する2つの方法【無料版でも稼げるけど…】』
