はてB!PinterestFeedlyWordpressにおしゃれな目次を追加できるEasyTOCの使い方と設定方法を解説します。自分のブログに目次入れたいけどCSSとかPHPとかわかんない!という場合でも簡単に導入できるのが魅力。EasyTOCの使い方だけでなく、さらにおしゃれにするためのCSSコード例を紹介します。Plus」ですが、こちらは更新がストップしています。Contents(EasyTOC)」がおすすめ。content」検索すると出て来るのでインストールして有効化しておいてください。EasyTOCの設定は、Wordpress管理画面メニューの「設定」にある「目次」をクリックして開きます。一般設定で変更できるのは次の通り。目次の対応をする投稿タイプの選択。目次をクリックした時のスクロールをなめらかにする基本的にはデフォルト設定でOKですが、変更しておきたいところがあるのでそこだけ解説しておきます。目次を表示する投稿タイプの選択は忘れずにやっておきましょう。通常の記事で目次を出すには「投稿」にチェックを入れます。自動挿入の位置は見出しの前後とコンテンツの前後から選べます。「上部」を選ぶとコンテンツの前(タイトルのすぐ下)に目次が表示されます。目次の前に記事の抜粋やイントロを表示したい場合は、「最初の見出しの前」を選べばOK。ここでは目次のスタイルの設定を行うことができます。カスタム設定にしている場合に有効になる幅の設定と見出しラベルの設定をやっておけばあとはデフォルトでもOKです。この記事の下の方に見た目をさらにオシャレにするCSSコード例を載せてるのでそちらも参考にしてみてください。最後はEasyTOCの高度な設定です。いくつか日本語では使えない設定があります。ウィジェットで目次を使用している場合に固定したい位置を指定EasyTOCのCSSカスタムコード例ここからは目次をさらにオシャレに見せるためのCSSカスタマイズの例をいくつか紹介します。「カスタマイズ」にある「追加CSS」にコピペしてください。テーマによっては「追加CSS」の項目がない場合があります。テーマ編集でstyle.cssの下部にコピペしてください。シンプルでクールなどこでも使える目次スタイルどんなタイプのサイトにも使えるシンプルでクールなスタイルがこちら。枠線の色や見出しの色はプラグインの設定から変更できるので配色だけ変えればいろんなところで使いまわせます。15px;}おしゃれでかわいいピンクの目次スタイル2つ目はこちら。女性向けサイトやブログでよくみるスタイルです。#f98886;}落ち着いた色合いのフラットなスタイル3つ目は落ち着いた感じのフラットなスタイルです。背景色を変更することで印象をガラッと変えることも可能。8px;}まとめコンテンツが長くなるとページ全体を確認するのが面倒なので、UX的にも目次は必須。目次は設置してあってもスタイルがデフォルトのままだと、見た目がどうしてもよく見るアフィサイトっぽくなります。ここで紹介したサンプルコードのように少し変更するだけでかなり印象が変わるので、ぜひスタイルカスタマイズに挑戦してみてください。WebデザイナーフリーランスWebデザイナー。レスポンシブサイトの作成、Wordpress、EC-CUBEやカラーミー、BASEなどのネットショップのデザイン・構築を担当。EC-CUBE4プラグイン「UICube」開発者。このブログでは初心者がつまずきやすいポイントや、制作で得た知識をわかりやすく解説します。ショートコードの使い方と作り方Web制作のことでお困りですか?・急に案件が増えて手伝ってくれる人を探している・担当していたデザイナーがやめてしまった・新しくホームページを作りたいこのようなことでお困りでしたら、お気軽にご相談ください。デザインからコーディング、WordpressなどのCMSの構築まで対応させていただきます。homupedia.com。