毎日、Twitterで日々の成果や頑張りをツイートしてします!

【ブログ初心者でも簡単】目次の導入方法|WordPressテーマStork19

アイキャッチ画像
カズトン

みなさん、こんにちは!

カズトンです!

今回はWordPressの有料テーマである「Stork19」に、目次を導入する方法を解説していきます。

ブログに目次を導入するメリットって、たくさんありますよね!

SEO対策になったり、読み手に「この記事では、こんなことを書いているよ!」と紹介できたりと。

目次があるだけで記事が見やすくすることができます。

「でもブログ始めたばかりだし・・・」や「WordPressの使い方もまだ慣れていないしなぁ」、「HTMLやCSSは使えない」と思っている方も多いと思います。

大丈夫です!

ブログに目次を導入するのって、全然難しくないんですよ!

HTMLやCSSが使えなくても、ブログを始めたばかりの初心者でも、目次はカンタンに導入できるんです。

本記事はブログ初心者でも簡単に目次を導入できるように、画像をたくさん使って説明しています。

ですので上から順番に読み進めていただけたら、必ず目次を導入できるでしょう!

カズトン

では、ブログに目次を導入しちゃいましょう!

この記事を見ると、こんな目次を作れる

まずは、この記事をどんな目次が作れるのでしょうか。

本記事を読むと、以下のような目次を作ることができます。

目次の例

この目次は、「【初心者におすすめ】WordPressテーマ Stork19(ストーク)を徹底レビュー!」から取ってきました。

色の変更や枠のデザインを変更できたりするので、あなたのブログに合ったカラーやデザインに変えて見てくださいね。(詳しくは、「Rich Table of Contents」の設定で説明します。)

目次を作れるプラグイン「Rich Table of Contents」を紹介

目次をブログに導入するためには、WordPressのプラグインである「Rich Table of Contents」を使います。

ブログ初心者でも簡単に設定することができるし、設定の際に一緒に目次のレビューも見ることができて直感的に設定を行うことができます。

目次を作成するプラグイン「Table of contents plus」をよく耳にすると思います。

ですが今回はブログを始めたばかりの初心者でも、簡単に見た目のデザインやカラーを変えることができる「Rich Table of Contents」を使って目次を導入していこうと思います。

Rich Table of Contents」のダウンロード方法

さっそくですが、WordPressの管理画面から「Rich Table of Contents」をダウンロードして使えるようにしましょう。

プラグインのダウンロード手順は以下の通りです。

ダウンロード手順
  1. WordPressのダッシュボードから、【プラグイン>新規追加】を開く。
  2. 「Rich Table of Contents」と検索する。
  3. 「Rich Table of Contents」をインストールして、有効化にする。

Step1

WordPressのダッシュボードから、【プラグイン>新規追加】を開きましょう。

Rich Table of Contentsの導入方法1

Step2

プラグインの検索から、「Rich Table of Contents」を検索してください。

Rich Table of Contentsの導入方法2

Step3

「Rich Table of Contents」をインストールして、有効化をクリックしてください。

Rich Table of Contentsの導入方法3

これで「Rich Table of Contents」プラグインをWordPressにインストールすることができました。

Rich Table of Contents」の設定方法

Rich Table of Contentsの設定項目は、全部で5つあります。

設定項目
  • 基本設定
  • デザイン設定
  • プリセットカラー
  • カラー設定
  • 応用設定

まずは、設定画面に移動しましょう。

WordPressの管理画面のサイドバーから、【RTOC設定】を開いてください。

Rich Table of Contentsの設定画面へ

設定画面の右側には、設定した目次のプレビューを見ることができるので、直感的に設定できます。

基本設定

Rich Table of Contentsの基本設定

Rich Table of Contentsの基本設定項目は、以下の5つです。

基本設定の項目
  • 目次のタイトル
  • 目次を表示させるページ
  • 表示させる見出しの設定
  • 表示条件
  • フォント設定

目次のタイトル

その名の通り、目次のタイトルを設定します。

デフォルトでは「目次」となっていますが、ひらがなで「もくじ」としても構いません。

好きなタイトルに設定してくださいね。

両者を比べると以下のような感じ。

目次のタイトル変更
タイトル

目次を表示させるページ

ブログには、以下の2つのページがあります。

  • 投稿
  • 固定ページ

投稿はネットでよく調べ物をするときに利用する記事のこと。

固定ページはお問い合わせページやプライバシーポリシーなどのこと。

投稿は必ず目次を表示させましょう。

固定ページは自分の好みで目次を設定してください。

表示させる見出しの設定

みなさんがブログ記事を作成するときに、どれぐらい見出しまで見出しを使いますか?

自分はよく”H4″までの見出しを使うことが多いです。

ですが目次に”H4″まで表示させてしまうと、内容が見にくくなってしまいます。

自分は記事の内容が把握しやすいように、見出しレベルを”H3″までの表示に設定しています。

H3までの表示とH4までの表示の違いは、以下の通りです。

見出し表示の設定
見出しレベル

表示条件

目次の表示するときの条件を設定します。

それぞれのブログ記事でも、見出しの個数が変わってきます。

見出しが一つのときには、目次を表示させる必要はないと思いますので、見出しが2つか、3つのときから目次を表示させるように設定しましょう。

フォント設定

ここでは、フォントの設定を変えることができます。

フォントの種類は、以下の3つです。

  • デフォルト
  • Helvetica
  • Noto Sans

みなさんのお好みで設定してみてください。

自分にはあまり変化を感じられませんでした笑

デザイン設定

Rich Table of Contentsのデザイン設定1
Rich Table of Contentsのデザイン設定2

Rich Table of Contentsのデザイン設定項目は、以下の6つです。

デザイン設定の項目
  • タイトル表示の設定
  • H2、H3のリスト形式
  • 枠のデザイン
  • 表示アニメーション
  • スムーススクロール設定

タイトル表示の設定

タイトルの表示設定が行えます。

設定は以下の2つ。

  • 左寄せ
  • 中央寄せ

個人的には、左寄せをおすすめします。

その理由は目次のリストは中央寄せにできないため、タイトルだけ中央にしてしまうと見栄えがおかしいと感じたからです。

実際に左のプレビューを見ながら、お好みで設定してみてください。

H2、H3のリスト形式

こちらは、見出しのデザインを変更することができます。

ただの箇条書きなのか、数字を前に置くのか、

プレビューを見ながら、設定してみてください。

おすすめはH2に番号の2つ目を、H3に丸を設定するデザインです。(以下のような感じ)

枠のデザイン

枠のデザイン設定です。

こちらもプレビューを見ながら、設定してみてください。

表示アニメーション

目次を表示するときのアニメーションを設定できます。

設定では、フェードかスライドにしましょう。

これはどちらでもいいと思います。

フェードは「ふわっと浮き出る感じ」で、スライドは「横や下から移動してくる感じ」です笑

スムーススクロール設定

スムーススクロールの設定。

こちらは、必ずONにしておいてください。

目次の見出しを押すと、記事内の見出しまで移動してくれます。

その時に、スライドして移動するようなアニメーションを加えることができます。

プリセットカラー設定

Rich Table of Contentsのプリセットカラー設定

Rich Table of Contentsのプリセットカラー設定は、テンプレートからカラーデザインを選びます。

一つずつカラーを設定したい場合は、次の「カラー設定」をご覧ください。

テンプレートのデザインは、以下の6つです。

  • サニーブルー
  • ダーク
  • フェミニン
  • アクアマリン
  • スマート
  • シトラス

お好みのデザインを選んでくださいね。

カラー設定

Rich Table of Contentsのカラー設定

Rich Table of Contentsのカラー設定項目は、以下の5つです。

カラー設定の項目
  1. タイトルカラー
  2. テキストカラー
  3. 背景カラー
  4. 枠線カラー
  5. H2カラー
  6. H3カラー
  7. 目次へ戻るボタンのカラー

プレビューで対応しているところは、こちらになります。

カラー場所

カラーコードを調べたい場合は、「原色大辞典」を利用してみてください。

応用設定

Rich Table of Contentsの応用設定

Rich Table of Contentsの応用設定項目は、以下の9個です。

カラー設定の項目
  1. 目次に戻るボタンの有無
  2. 目次に戻るボタンの位置
  3. 目次へ戻るボタンのテキスト
  4. 目次へ戻るボタンを上下に調整
  5. 除外する投稿IDと除外する固定ページID
  6. 目次のデフォルト表示設定
  7. 開閉ボタンの開く、閉じるテキスト設定
  8. プラグインのCSSを読み込まない。
  9. 7日間目次使用率を計測する

目次に戻るボタンの有無

目次に戻るボタンを記事に表示させるかさせないかの選択ができます。

目次に戻るボタンの位置

目次に戻るボタンを左寄せか中央寄せにできます。

おすすめは左寄せです。

TOPに戻るボタンを設定する場合は、右側にあることが多いですよね。

中央寄せにしてしまうと、TOPに戻るボタンとの距離が近くて見にくくなってしまいます。

目次へ戻るボタンのテキスト

テキストを変更すると、赤で囲んだ場所のテキストが変わります。

目次へ戻るボタンを上下に調整する設定

デフォルトでは、30という値に設定されています。

画面の上にしたい場合は、30よりも大きな値に変更してください。

デフォルトのままが、一番いいと思います。

除外する投稿ID、除外する固定ページID

特定の投稿や固定ページに対して、目次の表示を制限する設定です。

除外したい投稿と固定ページのID番号を指定しましょう。

投稿や固定ページのIDの探し方

投稿のIDを探す方法

①WordPressのダッシュボードから、【投稿>投稿一覧】を開く。

②IDを知りたい投稿にカーソルをあわせて、下に表示されるIDを取得

post=ID番号です。

今回の記事では、1855がIDとなりますね。

固定ページのIDを探す方法

①WordPressのダッシュボードから、【固定ページ>固定ページ一覧】を開く。

②IDを知りたい投稿にカーソルをあわせて、下に表示されるIDを取得

post=ID番号です。

今回の記事では、1855がIDとなりますね。

目次のデフォルト表示設定

目次を最初から表示させておくか、閉じておくのかを設定することができます。

目次が長すぎる場合は、閉じておいたほうがいいかもしれませんね。

開閉ボタンの開く、閉じるテキスト設定

デフォルトではOPENとCLOSEとなっています。

開く、閉じるとしてもいいですし、お好みで変えてください。

プラグインのCSSを読み込まないの有無

プラグインのCSSを読み込まないことで、独自に追加CSSでデザインすることができるようになります。

初心者の方にはとくに関係がないので、チェックをしないでおきましょう。

7日間目次使用率を計測する。

実際に目次を使用されているのかを計測してくれるので、ONにしておきましょう。

これですべての設定が終わりました。

終わりに

最後まで読んでくださりありがとうございました!

無事、ブログに目次をつけることができましたか?

わからないことがあれば、TwiiterのDMででも質問してくださいね!

では、また!

最後まで読んでくれてありがとう

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です