バズログ BUZZLOG

MENU

ホームページ制作

WordPressで目次を作る手順とコピペで出来るデザイン編集

かまとりーぬ 0

目次

WordPressに目次を表示させたい。

上記の様にお考えではないでしょうか？

WordPressに目次を設置する事でコンテンツ内容が一目で分かる様になり、ユーザーへの利便性が向上するのです。また目次を設置する事によってSEO効果も期待出来るので、WordPressでコンテンツを配信する際には目次の設置をオススメします。

今回はプラグインを使って簡単に目次を設置する方法と、カスタマイズする方法について詳しく解説していきましょう。

1：プラグインを使って目次を作成する方法

WordPressで目次を設置する際に、１から全て自分で目次を作成するのは大変な作業です。

しかしプラグインを使用すれば、10分程度で初心者でも簡単に目次を設置する事が出来ます。

今回は多くの人が利用し高い評価を受けているプラグイン「Table of Contents Plus」を使用して目次を設置する方法を解説していきましょう。

1-1：目次の設置手順

目次

プラグインを使って上記画像の様な目次を作成していきます。

WordPress管理画面にてプラグイン「Table of Contents Plus」をインストールして有効化してください。

目次 プラグイン

プラグインをインストールする方法については下記の記事で詳しく解説しています。

WordPressのプラグインをインストールする方法と出来ない4つの原因

プラグインを有効化したら、以下の手順で目次を設置していきましょう。

(1) 設定から「TOC+」を選びクリック

設定の中に有効化したプラグイン「TOC+」が追加されています。

WordPress 設定

(2) 目次の設定を行う

Table of Contents Plusの設定画面になります。

以下の通りに設定してみましょう。

Table of Contents Plus

  • ① 「最初の見出しの前(デフォルト)」を選択
  • ②  表示条件は「4」を選択（それ以下だと目次が表示されない可能性有）
  • ③ コンテンツタイプを選択 (post/page)
  • ④ 見出しテキストは、目次の上にくるタイトル名(好きなタイトルに変更可)

ここまで変更したら画面下へスクロールし、「上級者向け(表示)」をクリックしましょう。

目次のデザインはプレゼンテーションの項目で選択が可能です。

Table of Contents Plus

(3) ⑤ 見出しレベルのチェックを外す

見出しレベルの項目で見出しタグをどこまで目次に表示させるか設定出来ます。

細かく区切りすぎると目次が見づらくなるので、h4までがオススメです。

Table of Contents Plus

(4) 「設定を更新」をクリックして変更内容を保存する

Table of Contents Plus

上記の様に設定したらコンテンツに目次が設置されます。

WordPress 目次設置

以上がプラグインを使った目次の設置方法です。

簡単に設置する事が出来るので、ぜひ試してみて下さい。

2：作成した目次をカスタマイズしてみよう

作成した目次をカスタマイズしたいけど、方法が分からないな。

上記の様にカスタマイズをお考えではないでしょうか？

目次の土台はプラグインで簡単に作成する事ができましたね。

カスタマイズのCSSを追加するだけで、下記画像の様に色やフォント・形まで変更する事が可能です。

目次　カスタマイズ

CSSにコピーペーストで簡単にカスタマイズする方法を紹介していきます。

また、上記3つの目次を使用する際のコードも紹介しましょう。

2-1：目次のカスタマイズ手順

目次のカスタマイズ手順を紹介します。

目次のカスタマイズはCSSにコードを追加するだけで簡単に目次をカスタマイズする事が可能です。

(1) 外観→「テーマの編集」

WordPress 外観

(2) テーマ編集画面上の「CSSエディター」をクリック

テーマ編集

(3) 追加CSSをクリック

テーマ編集

(4) 追加CSSにコードを貼り付けて保存

追加CSS部分に下記の様なコードを貼り付けます。

  1. #toc_container {
  2.   margin-bottom: 40px;
  3.   padding: 15px 20px;
  4.   background: #fff;
  5.   border: 4px solid #cd5c5c54;
  6.   border-radius: 3px;
  7.   color: #ef6e65c4; }
  9. #toc_container .toc_title {
  10.   font-family: ‘M PLUS Rounded 1c’, sans-serif;
  11.   text-align: center;
  12.   margin-bottom: 35px;
  13.   margin-top: 0;
  14.   padding-top: 0;
  15.   padding-bottom: 0px;
  16.   font-size: 1.7em;
  17.   border-bottom: 5px solid #dedede; }
  19. #toc_container .toc_list {
  20.   list-style-type: none !important;
  21.   counter-reset: li; }
  23. #toc_container .toc_list > li {
  24.   position: relative;
  25.   margin-bottom: 15px;
  26.   margin-left: 6px;
  27.   line-height: 1.3em;
  28.   font-size: 0.9em; }
  30. #toc_container .toc_list > li a {
  31.   text-decoration: none !important; }
  33. #toc_container .toc_list > li a:hover {
  34.   text-decoration: underline !important; }
  36. #toc_container .toc_list > li ul {
  37.   list-style-type: disc;
  38.   margin-top: 15px;
  39.   padding-left: 20px;
  40.   color: #f08080; }
  42. #toc_container .toc_list > li > ul li {
  43.   font-size: 0.9em;
  44.   margin-bottom: 8px; }
  46. @media only screen and (min-width: 641px) {
  47.   #toc_container {
  48.     padding: 25px 40px; }
  50.   #toc_container .toc_title {
  51.     font-size: 2em; }
  53.   #toc_container .toc_list > li {
  54.     margin-bottom: 18px;
  55.     margin-left: 12px;
  56.     font-size: 1em; }
  58.   #toc_container .toc_list > li:after {
  59.     left: -48px;
  60.     top: 0px;
  61.     font-size: 26px; } }

CSSエディター

貼り付けたら変更を画面左の「公開」をクリックして保存します。

すると、目次のデザインがピンク色の目次にカスタマイズ完了です。

目次 デザイン

2-1-2：シンプル目次のコード
シンプル 目次

上記「シンプルな目次」を表示させるコードです。

  1. #toc_container {
  2. margin-bottom: 3px;
  3. padding: 15px 20px;
  4. background: #fff;
  5. border: 1px solid #999;
  6. border-radius: 3px;
  7. color: #555d66; }
  9. #toc_container .toc_title {
  10. font-family: ‘M PLUS Rounded 1c’, sans-serif;
  11. text-align: center;
  12. margin-bottom: 35px;
  13. margin-top: 0;
  14. padding-top: 0;
  15. padding-bottom: 0px;
  16. font-size: 1.5em;
  17. border-bottom: 1px solid #72777c; }
  19. #toc_container .toc_list {
  20. list-style-type: none !important;
  21. counter-reset: li; }
  23. #toc_container .toc_list > li {
  24. position: relative;
  25. margin-bottom: 15px;
  26. margin-left: 6px;
  27. line-height: 1.3em;
  28. font-size: 0.9em; }
  30. #toc_container .toc_list > li a {
  31. text-decoration: none !important; }
  33. #toc_container .toc_list > li a:hover {
  34. text-decoration: underline !important; }
  36. #toc_container .toc_list > li ul {
  37. list-style-type: disc;
  38. margin-top: 12px;
  39. padding-left: 15px;
  40. color: #f08080; }
  42. #toc_container .toc_list > li > ul li {
  43. font-size: 0.98em;
  44. margin-bottom:2px; }
  46. @media only screen and (min-width: 641px) {
  47. #toc_container {
  48. padding: 25px 40px; }
  50. #toc_container .toc_title {
  51. font-size:2.4em; }
  53. #toc_container .toc_list > li {
  54. margin-bottom: 18px;
  55. margin-left: 12px;
  56. font-size: 1em; }
  58. #toc_container .toc_list > li:after {
  59. left: -48px;
  60. top: 0px;
  61. font-size: 26px; } }

2-1-3：水色目次のコード

水色　目次

上記「水色の目次」を表示させるコードです。

  1. #toc_container {
  2. margin-bottom: 3px;
  3. padding: 15px 20px;
  4. background: rgba(30, 140, 190, 0.09);
  5. border: 4px solid #00a0d2;
  6. border-radius: 9px;
  7. color: #00a0d2; }
  9. #toc_container .toc_title {
  10.   font-family: ‘M PLUS Rounded 1c’, sans-serif;
  11.   text-align: center;
  12.   margin-bottom: 35px;
  13.   margin-top: 0;
  14.   padding-top: 0;
  15.   padding-bottom: 0px;
  16.   font-size: 1.7em;
  17.   border-bottom: 5px solid #dedede; }
  19. #toc_container .toc_list {
  20.   list-style-type: none !important;
  21.   counter-reset: li; }
  23. #toc_container .toc_list > li {
  24.   position: relative;
  25.   margin-bottom: 15px;
  26.   margin-left: 6px;
  27.   line-height: 1.3em;
  28.   font-size: 0.9em; }
  30. #toc_container .toc_list > li a {
  31.   text-decoration: none !important; }
  33. #toc_container .toc_list > li a:hover {
  34.   text-decoration: underline !important; }
  36. #toc_container .toc_list > li ul {
  37.   list-style-type: disc;
  38.   margin-top: 15px;
  39.   padding-left: 20px;
  40.   color: #f08080; }
  42. #toc_container .toc_list > li > ul li {
  43.   font-size: 0.9em;
  44.   margin-bottom: 8px; }
  46. @media only screen and (min-width: 641px) {
  47.   #toc_container {
  48.     padding: 25px 40px; }
  50.   #toc_container .toc_title {
  51.     font-size: 2em; }
  53.   #toc_container .toc_list > li {
  54.     margin-bottom: 18px;
  55.     margin-left: 12px;
  56.     font-size: 1em; }
  58.   #toc_container .toc_list > li:after {
  59.     left: -48px;
  60.     top: 0px;
  61.     font-size: 26px; } }

2-2：色のカスタマイズ方法

目次の色や形をカスタマイズするには、コード一番上の部分を書き換えれば簡単にカスタマイズする事が可能です。

  1. #toc_container {
  2. margin-bottom: 3px; /目次下の空白スペース/
  3. padding: 15px 20px; /余白/
  4. background: rgba(30, 140, 190, 0.09); /背景色/
  5. border: 4px solid #00a0d2; /枠線の太さ/ /枠線の色/
  6. border-radius: 9px; /枠線の丸み/
  7. color: #00a0d2; } /目次タイトルの文字色/

カラーコードは下記サイトにて取得出来ますので、ぜひ試してみて下さい。

WEB色見本 原色大辞典 – HTMLカラーコード

3：目次のフォントを変更する方法

目次の色は変える事が出来たけれど、フォントが合っていない…。

そんなミスマッチな目次は嫌ですよね。

もちろん目次のフォントも変更する事が出来ます。

ただし、header.phpを変更する必要があるので必ずバックアップを取る様にしましょう。

初心者にも分かる様に解説していきます。手順は以下の通りです。

  • ① Google Fontでフォントを選ぶ
  • ② header.phpのhead内にコードを追記する
  • ③ CSSにコードを追記する

上記の手順に沿って詳しく紹介していきます。

3-1：フォントカスタマイズ手順

目次のフォントを変更する方法を紹介します。

目次 フォント

目次のタイトルを上記画像の様に変更していきます。

(1) Google Fontでフォントを選ぶ

まずはGoogle Fontで使用するフォントを選びましょう。

Google Font

Google フォント

(2) 使用するフォント右上の「+」をクリック

Google フォント

(3) 画面右下に現れるタブをクリックして開く

Google フォント

(4) 「@IMPORT」をクリック

Google フォント

(5) <style></style>で囲まれているコードを全てコピー

Google フォント

(6) header.phpにコードを追記する

Google Fontでコピーしたコードをheader.phpに追記しましょう。

(7) WordPress管理画面 外観→「テーマの編集」

WordPress テーマの編集

(8) テーマヘッダー(header.php)

header.phpを開きます。

WordPress テーマの編集

head内に先ほどGoogleフォントでコピーしたコードを追加します。

以下の箇所に貼り付けましょう。

  1. <!DOCTYPE HTML>
  2. <html lang=“ja”>
  3. <head prefix=“og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#”>
  4.     <meta charset=“UTF-8”>
  5.     <title><?php bzb_title(); ?></title>
  6.     <meta name=“viewport” content=“width=device-width,initial-scale=1.0”>
  7.     <!–[if lt IE 9]>
  8.     <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
  9.   <![endif]–>
  11. <?php wp_head(); ?>
  13. <?php echo get_option(‘analytics_tracking_code’);?>
  14. <?php echo get_option(‘webmaster_tool’);?>
  15. ↓ここに貼り付ける
  16. <style>
  17. @import url(‘https://fonts.googleapis.com/css?family=Kosugi+Maru’);
  18. </style>
  19. </head>

上記箇所に貼り付けたら変更を保存します。

ここまで完了したら、Google Fontで先ほどコピーしたコードの下のコードをコピーしましょう。

(9) Googleフォントで2つ目のコードをコピーする

googleフォント

コピーしたら、CSSに追記します。

(10) 目次タイトルのフォント部分を入れ替える

googleフォント

目次タイトルのフォントが書かれている下記の部分を、コピーしたフォントコードに書き換えます。

  1. #toc_container .toc_title {
  2. font-family: ‘M PLUS Rounded 1c’, sans-serif; ←この部分を入れ替える
  3. text-align: center;
  4. margin-bottom: 35px;
  5. margin-top: 0;
  6. padding-top: 0;
  7. padding-bottom: 0px;
  8. font-size: 1.5em;
  9. border-bottom: 1px solid #72777c; }

上記の箇所を入れ替えれば、目次タイトルのフォント変更は完了です。

まとめ

WordPressの目次について詳しく紹介してきました。

目次はSEO効果も期待できるので、コンテンツを配信する際には表示させるべきです。

プラグインを使用すれば簡単に設置する事が出来ます。

また目次の色などを変更したい場合には、#toc_containerの部分を書き換えれば簡単にカスタマイズする事も可能です。ぜひ参考にしてみて下さい。

会社案内・解説資料はこちら！

資料をダウンロードする ▷
  • シェア
  • このエントリーをはてなブックマークに追加

  • follow us in feedly

    購読

  • 0

    • シェア
    • このエントリーをはてなブックマークに追加
    • follow us in feedly

      購読
    目次

    関連記事