MAGAZINEWordPressの目次デザインをおしゃれにカスタマイズする方法WordPressでWebサイトを運営している方で、記事の冒頭に目次を導入している方もたくさんいると思います。目次は記事のコンテンツを読者にわかりやすく伝えてくれ、必要な情報へのアクセシビリティを向上させます。Plus」が有名です。Plusの設定方法とカスタマ...WordPressで記事を執筆していると、長文になってしまった時や見出しがたくさん増えてしまった時が出てくると思います。いった場合、目次があるとユーザーが最初に記事中のコンテンツを一目で理解することができるため、とても便利です。Plusを目次のデザインを自分の好みにカスタマイズする方法をご紹介します。Plusで作成された目次のデフォルトのデザインです。シンプルなデザインですが、自分のWebサイトの世界観に合わせたいという方には少し物足りないかもしれません。カスタマイズ」→「追加CSS」で編集することができます。具体的なカスタマイズ方法を解説していきます。CSSをコピペするだけで実装できるので、好みのカスタマイズを選んで参考にしてください。枠線の横幅の最低値を設定する枠線の横幅の最低値を設定します。左寄せに配置した目次の見出しが短い場合、右側にかなり余白が出てしまいます。見た目があまりよくありませんので、横幅を最低値を決めて、右側が余りすぎないようにします。以下のコードを「追加CSS」に記述します。30%;}30%と指定していますが、お好みに合わせて任意の値を入れてください。Qiita##CSSで使う長さの単位|単位|説明|ピクセル換算||:--|:--|:--||em|相対単位。基準は要素のフォントサイズ|-||ex|相対単位。(小文字xの高さ)|-||in|絶...枠線を丸くする外側の枠線を丸くします。女性向けメディアなど、やさしい雰囲気をもたせたいときに実践したいカスタマイズです。以下のコードを「追加CSS」に記述します。10px;}5pxの値を編集することで、丸みを調整することができます。枠線と見出しの間隔を変更する枠線と見出しの間隔を変更することもできます。枠線と見出しの文字列の間隔が狭いと感じたり、反対に広いと感じた場合は実装してみましょう。以下のコードを「追加CSS」に記述します。1.75em;}フォントを変更する目次のタイトルと見出しのフォントを変更します。Webの世界観とフォントの雰囲気を合わせることができます。以下のコードを「追加CSS」に記述します。{font-family:'Impact',sans-serif;}フォントカラーを変更するフォントのカラーを変更します。目次の見出しはリンクになっているので、aタグのスタイルを変更していきましょう。以下のコードを「style.css」に記述していきます。color:#F5A9E1;}今回はカラーコードに#F5A9E1を使用しましたが、ご自身のWebサイトに合わせて好みのカラーコードに調整してください。見出しにアンダーラインを表示する見出しにアンダーラインをつけることもできます。フォントカラーと同じくaタグのスタイルを変更していきます。text-decoration:underline;}見出しにマウスオーバーした時のカラーを変更する見出しにマウスオーバーした時のカラーを変更します。擬似クラス:hover、:activeを使って実装していきます。#F7819F!important;}フォントサイズを変更するフォントサイズを変更していきます。文字量は本文のフォントサイズトンバランスを考え、変更しましょう。9px;}9px;としていますが、適宜調整してください。Plusではショートが用意されています。記事ごとに目次の表示/非表示をカスタマイズしたり、タイトルを変更したりと何か便利なショートがたくさん用意されています。スタイル変更による見た目のカスタマイズではなく、記事別に目次の内容を変更するといった動的なカスタマイズをしたい場合はショートコードを活用しましょう。周りでは細かいところが気になる小倉(@ogr8beat)です。Plus」は、自動的に...WordPressの目次デザインのカスタマイズについてのまとめ目次のデザインはデフォルトのままでは、他のブログと全く同じデザインになってしまいます。オリジナリティを出したいと思ったときは是非参考にしてみてください。記事の最後に紹介したショートコードは、使いこなすとかなりフレキシブルに目次を活用することができます。こちらも合わせて確認しておきましょう。MAGAZINEの運営者TOMATOではWeb制作をはじめ、ランディングページの制作やSEO対策などWebに関する事業を包括的に展開しております。ご意見・ご相談、料金のお見積もりなど、お気軽にお問合わせください。お問合せ内容の確認後、こちらからご連絡させていただきます。Webのことなら何でもご相談下さいホームページ制作はもちろんLP制作、SEO対策に関するご相談も承ります。お気軽にご相談ください。最低契約期間3ヶ月その他サイト不具合等のご。