WordPressの投稿ページに目次を配置してデザインを変更する方法WordPressの投稿ページに目次を配置してデザインを変更する方法メディアやブログのコンテンツページに目次を設置することで、ユーザーにそのページに書かれている内容を最初に伝えることができるので、ユーザビリティの向上に繋がります。Contents」というプラグインを使えば、簡単に機能性の優れた目次を配置することができます。今回は、WordPressの投稿ページに目次を追加して、デザインを変更する方法をご紹介したいと思います。【2020年最新】WordPressの使い方を徹底解説!初心者向けのおすすめ設定もWordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。目次を表示することで、ユーザーがコンテンツを読み始める前にページの内容を知ることができます。1ページのコンテンツ量が多い場合は、目的のコンテンツを探すのが大変なので、目次を設置することでより使いやすいページを提供することができますね。目次の項目をクリックした時に該当する箇所までスクロールするようにしておくと、さらに親切なデザインになります。一方で、目次があることによってコンテンツ開始位置までのスクロール量が増えてしまうというデメリットもあり、何も考えずに目次を設置しておけばいいという訳ではありません。ページの目的や、コンテンツの内容に応じて、目次を配置するのかを決めるようにしましょう。Contents」というプラグインがおすすめです。Contents」を使うようにしましょう。Contentsをインストールします。似たようなプラグインが表示される場合もあるので、間違えずに下記のプラグインをインストールしてください。Contentsのインストールができたら、次は設定を変更していきましょう。設定内容は下記のとおりです。「投稿」のみ選択します。投稿ページ以外にも目次を設置したい場合は、それぞれを選択してください。投稿ページ以外にも目次を設置したい場合は、それぞれを選択してください。位置ここを変更すると、目次が表示される場所を変更することができます。「最初の見出しの前」がおすすめです。見出しの数に応じて目次の表示・非表示を切り替えることができます。表示したい場合は1件に設定しておきましょう。見出しラベル目次の上部に表示されるテキストの内容です。「目次」や「この記事の内容」などと設定しておくといいでしょう。ツリー表示チェックすると、h2,h3,h4と見出しのレベルに合わせてインデント付きで表示されます。スムーズを滑らかにするチェックを入れると、目次の項目をクリックした時にスムーズスクロールで移動するようになります。管理画面上で目次の表示を設定するための項目です。ここの設定を変えるだけである程度デザインを整えることも可能ですが、自分でCSSを書いてデザインを編集する場合は、特に設定しなくて問題ありません。自分でCSSを編集するのが面倒だという方は、ここでスタイルを指定してしまいましょう。設定画面の一番下にある「高度」という項目の設定内容は下記のとおりです。CSSここにチェックすると、自動でスタイルが適用されなくなります。自分でCSSを書いてデザインを編集する場合は、この項目にチェックを入れておきましょう。見出しあまり目次にたくさん項目が並ぶとわかりづらくなってしまうので、h2,h3の2つにチェックを入れておくのがおすすめです。多くてもh4くらいまでにしておきましょう。スムーズスクロールのオフセットここの数値を変更するとスムーズスクロールの時、見出しの上部に残る余白を変更することができます。ヘッダーを固定しているとテキストとヘッダーが重なってしまう場合があるので、その時はここの設定を変更すると解決できます。上記以外にも設定項目はありますが、特に設定を変更する必要はないでしょう。Contentsで作成した目次は、予めクラス名が付与されているので、CSSを記述することでデザインを変更することが可能です。デザインを変更する場合は、上記でご紹介したように上級者向け設定で「CSSファイルを除外」のチェックを入れるのを忘れないようにしてください。下記に目次のスタイルを指定するCSSのサンプルをご紹介しておきます。こちらをベースにしてデザインを変更してみてください。#333;}目次をサイドバーに表示する最近では、目次をサイドバーに表示しているサイトも増えてきていますね。Contentsを使えばサイドバーに目次を表示することもできます。WordPressの管理画面から「外観>ウィジェット」のページを開いて、サイドバーの中に「目次」というウィジェットを追加すれば目次を表示することができます。Widgetなどを使って固定表示して、「閲覧中セクションのハイライト色」の項目を任意の色に設定しておくと、スクロールに合わせて表示中のセクションの色を変えることができます。自分でCSSを編集している場合は自動でスタイルが適用されないので、activeというクラスに対してスタイルを当てるようにしましょう。まとめ目次は簡単に設置することができ、それによってユーザーの使いやすさを大きく向上することができるので、ぜひ設置しておきましょう。その他にも、おすすめのWordPressの設定方法やカスタマイズ内容をご紹介しています。参考にしてみてください。【2020年最新】WordPressの使い方を徹底解説!初心者向けのおすすめ設定もWordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。trends2020年最新!SEOに強いおすすめWordPressテーマまとめWordPressを使ってWebサイトを作成する時、みなさん最初に悩むのがテーマ選びだと思います。Trends(ウェブデザイントレンド)は、Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立つ情報、最新トレンド、チェックすべきサービスなどを配信しています。