こんにちは、新しいテーマ「THE THOR」ライフを満喫中のわうです！
今回は目次のカスタマイズ方法について解説します。
当サイトでの目次はこのようになっています。
お洒落で目に付くという訳ではないですが、「ページに溶け込んでいて読者さんをサポートできる」ことを意識してカスタマイズしました！
今回はみなさんがこの目次を使えるよう、カスタマイズしたCSSを公開します！
CSSって難しいでしょ？
できなさそうなんだけど…
CSSが分からない人は基本コピペで大丈夫！
自分で変えたい人だけ、ちょっと変更してみましょう
CSSには少し解説も付けてますので、それを見たら色の変更とかは簡単にできると思います！
ぜひ活用してくださいね！
なお、HTMLの記述はテーマによって違うので、THE THOR以外の人はこのCSSでは対応できない可能性がありますのでご了承ください。
もし違うテーマだけどカスタマイズしたいという方は、直接ご相談ください！
▼SEOを強めるなら▼
デフォルトの目次
まずはTHE THORのデフォルトとなる目次を見てみましょう。
うん、お洒落ではない。
私はこの目次はちょっとシンプルすぎるなというのと、番号辺りがあまり好きじゃなかったので変えたいと思いました。
「これで十分！」という方は表示設定させて、すぐに使い始めちゃいましょう。
次の章では、目次の使い方、表示設定を解説します。
設定の解説がいらない人は、その次の章に飛ばして大丈夫です！
目次の使い方、表示設定
まだ表示設定が出来ていない人は、目次が表示されるよう設定する必要があります。
目次を表示するには、THE THORのカスタマイズ画面から
[投稿ページ設定] > [目次設定]で設定できます。ここで”■目次を表示するか選択”の箇所を”表示する”にすると、表示できるようになります！
また、その下の項目設定は以下の通りです。
お好みで設定しましょう。
- 目次を表示するための最小見出し数を指定
自動で目次を表示する場合、何番目の見出しの上に目次を表示するかを決める箇所。一般的には1にします。 - 目次に表示する見出しのレベルを指定
h1, h2, h3など、何番の見出しまでを表示するか決めます。
私は3にしていますが、4まで出す人もいます。 - 目次パネルをデフォルトで閉じておく
ここをTrueにしていると、目次は閉じた状態で表示されます。
目次をカスタマイズしよう
それでは目次をカスタマイズしていきましょう！
見た目のカスタマイズをするには、CSSを書く必要があります。
とは言っても冒頭でも言いましたが基本的にはコピペでOKです！
気軽に挑戦してみましょう。
手順としては
- CSSを書く
- THE THORのCSS記入欄に貼り付け
- 設定を保存して公開
これだけです！慣れてない人でも、できそうじゃないですか？
CSSを書く
CSSを書くと言っても、私のと全く同じ見た目で良いという方はコピーするだけで出来上がります！
色などをちょっと書き換えたい人は一旦テキストエディタなどにコピーして、ちょっといじってからサイトに貼り付けましょう。
どう書き換えれば良いかは、下記CSSのコメントを見ながらやってみてください！
という事で、私の目次CSS公開です！
自分なりにカスタマイズできそうですか？
もし分からないところがあれば、コメントでお尋ねくださいね！
THE THORのCSS記入欄に貼り付け
次は上で書いたCSSをTHE THORのCSS記入欄に貼り付けます。
貼り付け先はいくつかあるのですが、今回はTHE THORのカスタマイズ画面の[追加CSS]欄に貼り付けましょう。
もしここ以外の所に書きたいなら、テーマエディタのstyle-user.cssでも可能です。
設定を保存して公開
とりあえずCSSを貼り付けたら、表示を確認しましょう。
確認して問題なければ、最後に設定の「公開」ボタンを押して完了！
これで完成です、お疲れ様でした！
▼これ１冊でアフィリエイトの基礎はばっちり！▼
最後に
手の込んだレイアウトにしたいなら、目次のカスタマイズは大事ですよね！
カスタマイズでわからない点があれば、いつでもお問合せください。
今回のCSS以外にも、「こんな風にしたいんだけどどうしたらいいかな…？」というようなのがあれば、ご相談承ります！
今回も最後まで読んでいただき、ありがとうございます！