パソコン

ワードプレスの目次の作り方と共有や関連が表示された場合の除外方法

投稿日:2018年4月17日 更新日:

ワードプレスの目次の作り方
 
 
あなたのブログには目次を設置していますか?

ワードプレスのプラグインはとっても便利なのですが、「設定を間違えてサイトが消えてしまった!」などという話をときどき聞くので、ビビリの私は記事を書く上で必要最低限のプラグインしか入れていませんでした。

最近、目次を設置しているサイトが多くなったように感じます。とっても見やすいので、私も記事に目次を設置してみました。

設置後、[共有:]や[関連]という見出しまで目次に表示されてしまったので、表示させない方法もご紹介しますね。

スポンサーリンク

ワードプレスの目次の作り方

ワードプレスで目次を作るメリットは?

長い記事を読むときに目次が設定されていないと、記事の内容が理解しにくく、とても読みづらくなってしまいますよね。
 
記事の冒頭に目次があれば、サイトを訪れてくれた人が記事の全体像をイメージすることができますし、目次の気になる項目をクリックすれば、リンクが貼ってあるので好きな順番で気軽に記事を読むことができます。
 
この記事で例えると、「ワードプレスの目次の作り方は知っているけど、共有や関連が表示されるのが鬱陶しいから消し方だけ知りたいんだよね」という場合は、目次の[2 ワードプレスの目次に共有や関連が表示された場合の除外方法]をクリックすれば、共有や関連の除外方法の内容にジャンプするので、記事の上から順番に探す手間が省けますね。
 
書く側にとってのメリットは、目次を設定せずに大きなテーマに沿って記事を書き始めてしまうと、書きたいことがアレもコレもとどんどん増えていって収集がつかなくなることがあるのですが、最初に目次を考えてから書き始めると脱線しづらくなるので、この方法はブログだけでなく多くの作家さんも取り入れている方法なのです。

ワードプレス目次自動生成プラグインの設定方法

それでは、ワードプレスに目次を設置できる[Table of Contents Plus]というプラグインの設定の手順をご紹介していきますね。
 
 

 
 
まずは、ワードプレスのダッジュボードで、赤枠で囲った[プラグイン]をクリックしたあと[新規追加]をクリックします。
 
 

 
 
次に、検索窓に[Table of Contents Plus]と入力してプラグインを検索します。
 
 

 
 
[Table of Contents Plus]が表示されたら[今すぐインストール]をクリックします。
 
 

 
 
次に[有効化]をクリックします。
 
ここまでの操作で目次が表示されますが、さらに細かく設定したい場合は次に進みます。
 
 

[Table of Contents Plus]の詳細設定方法

 
 
[設定]をクリックしたあと、Table of Contents Plusの頭文字の[TOC+]をクリックします。
 
 


 
 
・位置:目次を表示する場所は基本的にデフォルトのまま。
 
・表示条件:目次を表示させる見出しの最少数の2に設定します。
 
・以下のコンテンツタイプを自動挿入:目次を表示させるのは投稿ページ(=post)だけでOK。
 
・見出しテキスト:デフォルトは[Contents]ですが、お好みの目次タイトルに変更できます。
 
[最初は目次を非表示]にチェックを入れると、目次[表示]の表示という青い文字をクリックをするまで目次は表示されません。
 
・階層表示:チェックを入れると見出しの階層ごとに表示されます。
 
・番号振り:チェックを入れると見出しに番号が振られます。
 
・スムーズ・スクロール効果を有効化:チェックを入れるとスクロールしながらクリックした項目に移動して、チェックを外すとパッとジャンプします。
 
・横幅:基本的にデフォルトのまま。
 
・回り込み:基本的にデフォルトのまま。
 
・文字サイズ:基本的にデフォルトのまま。
 
・プレゼンテーション:目次のデザインをお好みで選べます。

スポンサーリンク

見出しレベルも設定できます

 
 

 
 
プレゼンテーションの下の上級者向け(表示)の、赤枠で囲った表示という青い文字をクリックすると、上級者向けの設定ページに移動します。
 
お好みで、見出しレベルをどこまで表示するかを選ぶことができますが、h1~h6のすべてのチェックボックスにチェックを入れると目次が長くなってしまうので、h3かh4くらいまでがちょうど良いのではないかと思います。
 
見出しレベルの設定が終わったら、最下部の[設定の更新]をクリックして完了です。

ワードプレスの目次に共有や関連が表示された場合の除外方法

 
 
Table of Contents Plus を導入したあと、ちゃんと目次が表示されるかどうかワクワクしながら記事を投稿したところ、「やった~♪」目次はきちんと表示されたのですが・・・
 
あれれ?なんだかちょっと違うなぁ・・・
 
あらら! [共有:]や[関連]まで、目次に表示されていましたよ!
 
 
[共有:]や[関連]まで表示されてしまうと、なんとなく間が抜けているというか、できればない方がすっきりしていて有難いです。
 
ということで、[共有:]や[関連]を表示させない方法を調べたのでご紹介しますね。
 
 

 
 
上級者向けの見出しレベルのすぐ下の項目の、[除外する見出し]のボックスの中に、目次に表示させたくない見出しを入力します。
 
目次に表示させない見出しが1つのときはそのまま入力しますが、複数あるときはパイプ記号[|]で区切ります。
 
今回、表示させたくない見出しは、[共有:]と[関連]なので、[共有:|関連]と入力します。
 
 

 
 
[除外する見出し]の設定が終わったら、最下部の[設定の更新]をクリックして完了です。
 
これだけの操作で、[共有:]と[関連]はすっきりと消えてくれました。

さいごに

今回、久々にプラグインを操作してみましたが、マニュアルに沿って慎重に行えば、「サイトが飛んでしまう!」などと怖がることもないのかな?と感じました。

以前から、サイトのデザインをもう少し明るいイメージに変えたいと思っていたので、じっくり調べてからチャレンジしてみようと考えています。

スポンサーリンク

-パソコン
-, , , ,

執筆者:


comment

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

関連記事

無料画像編集ソフトでおすすめは使いやすいPhotoScape!

無料画像編集ソフトでおすすめは使いやすいPhotoScape!

    ブログを運営していく上で、画像はなくてはならないアイテムなので、私は、画像のダウンロードが無制限にできるイラストAC (プレミアム会員) や、もうひとつのブログでは、写真・ …

スマホ画面でのサイトの表示をPCで確認する方法をご紹介!

スマホでのサイトの画面表示をPCで確認する方法をご紹介!

    チビッ子からお年寄りまで、スマホの所有率が79.4%となった現代、自分が運営しているサイトが、携帯やスマホから見るとどのように表示されるかを把握しておくことはとても重要なこ …

YouTube動画の編集にはパラメータが便利です!

YouTube動画を埋め込んで編集する時はパラメータが便利です!

YouTube動画の編集にはパラメータが便利です! スポンサーリンク 前回、YouTubeで公開されている動画を、自分のサイトやブログに掲載したいときの、HTMLソースコードの埋め込み方法や手順と、動 …

プルダウンメニューがキャプチャできる無料ソフトをご紹介!

プルダウンメニューがキャプチャできる無料ソフトをご紹介!

    Windowsに附属している Snipping Tool は、スクリーンショットが簡単にキャプチャできるのでとっても便利ですよね! スポンサーリンク でも、パソコンのプルダ …

タイピング練習は無料ゲームで楽しく覚えよう!

ブラインドタッチが上達したタイピング練習の無料サイトを紹介します

タイピング練習は無料ゲームで楽しく覚えよう! スポンサーリンク 先日、登録済みの派遣会社に、あるお仕事をエントリーしたところ、「タイピングのスキルチェックをします!」と連絡があったので、慌ててタイピン …