個別のWebページで目次を非表示にする方法
- 画面のスクロールに合わせて移動する目次をつくれたのに、不要なページで表示される。
- Table of Contents Plusのヘルプや記事を確認してno_tocをつかったのに、非表示にならない。
ココがポイント
結論：
目次を自動生成してしまうページに、埋め込みスタイルシートを適用して、表示されている目次を隠します。
つまづきポイント
このメリットを使用して、非表示にしたいページの目次を隠していこうと思います。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、WordPressで記事を書いていると、目次一覧を自動で生成、表示してくれる便利で助かるプラグイン「Table of Contents Plus」を使用していることと思います。
しかし、このプラグインはカテゴリー一覧ページなどで最新記事の「見出し」を参照してしまう。
その結果、必要がないのにスライドメニューやサイドバーに目次が表示されていました。
今回は、この問題を解決するために、「特定のページで項目を非表示にする」方法について解説していきます。
目次を非表示にしていく流れ：
- HTMLのコードからid属性を確認する。
- 埋め込みスタイルシートで、id属性を指定してブロックを隠す。
目次
1.「Table of Contents Plus」とは？
記事を書くごとに、目次を手作業でつくるのは時間のロスになります。
そこで、「Table of Contents Plus」という非常に便利なプラグインを使います。
このプラグインの設定は簡単で設定方法についての詳しい記事もあるので、この機会にインストールしてみてはいかがでしょうか？
もっと詳しく
2.まだ、画面スクロールに合わせて移動する目次を設定してない
画面と一緒に目次が移動してくれれば、WebページTOPに戻る必要がなくなります。
画面に合わせてスクロールできる目次を設定する方法についてはこちらの記事を読んでください。
3.目次を特定のページで非表示にする
3.Step1 WebブラウザでHTMLを確認できるコンソール画面を開く
Webブラウザで非表示にしたい目次のid属性を確認します。
この確認が非常に大変な作業になります。
しかし、確認さえできれば、後はコピペですむので頑張っていきましょう。
自身のWebページを開きます。
開いたら、どこでも大丈夫です。
Windowsではマウスの右クリック、MacではControl＋クリックでメニューがでてきます。
メニューの一番下の「検証（I）」をクリック。
すると、ウィンドウが2分割されソースコードが確認できるようになります。（閉じるには右上の×をクリック）
一番左の長い文字の羅列がこのページのHTMLになります。
検証ウィンドウのレイアウトは右上のアイコン 
から好きなものに変更できます。
また、左上の
アイコンからスマホ用画面とPC用画面に切り替えることができます。
3.Step2 HTMLの中から目的のidを探す
参考
まず、スマホ用スライドメニューのソースコードを確認します。
スライドメニューの場所は上の方にあることが多いです。
<header>内の小ククリに<nav>があると思います。
その中のさらに小さいククリ内に私の環境ではスライドメニュー用目次の<div～～～>が入っていました。
<nav>はナビゲーションメニュー（画面TOPにある横並びメニューによく使われます）をひとかたまりでククルときによく使うタグです。
私の環境ではスライドメニュー用目次のid属性は「toc-widget-5」でした。
次に、サイドバーのソースコードを確認します。
サイドバーの場合は下の方にあることが多いです。
<header>と<footer>に挟まれた本文のククリ。
その中を▶で開いていくと下の方に<aside>があると思います。
私の環境では<aside>の中の小ククリにサイドバー用目次の<div～～～>が入ってました。
<aside>タグは2カラムレイアウト（Webページの2列レイアウトのこと）でサイドバーに入れたいアイテムをククルときによく使うタグです。
私の環境ではサイドバー用目次のid属性が「toc-widget-3」でした。
お疲れ様です。時間をかけて確認したので、スクショなりでメモとして保存しておきましょう。
もっと詳しく
3.Step3 埋め込みスタイルシートでパーツを隠す
後はコピペ作業だけです。頑張っていきましょう。
idを確認できたら、今度は目次を非表示にしたいページを「編集」します。
「編集」画面で本文の入力を「テキストエディタ」側に切り替えます。
<style type="text/css">#toc-widget-3, #toc-widget-5 {display: none;}</style>
上記をまるまるコピーします。
<style type="text/css">のあと「#toc-widget-3, #toc-widget-5」のドット下線部分、ここを、各個人の目次を囲んでいる<div>タグのid属性の値（id名）に変えます。
私の場合は、id="toc-widget-3"（サイドバーの目次）、id="toc-widget-5"（スライドメニューの目次）でしたので上記のように変更してます。
<style type="text/css">〜</style>でかこうと、HTML（記事を書くエリア）にCSSスタイルを書くことができます。これを埋め込みスタイルシートといいます。
もっと詳しく
CSSでid名、class名を指定するには、「id」は「#（シャープ）」、「class」は「.（ドット）」から始めます。
「display: none;」部分でブロックを非表示にする命令を出してます。（noneとは「なし」の意味です）
埋め込みスタイルシートのコードを残したまま、隠した目次を表示させたい。
「none」を「block」に打ち替えると表示されるようになります。
つまづきポイント
あれ？「ビジュアル」表示で編集した後に、Webブラウザで確認すると、 目次がまた表示されてしまってるぞ？
このようになってしまったときは、コードの途中で改行をいれてしまってるかもしれません。
「ビジュアル」表示で編集すると、改行位置に自動で改行タグ<br>が挿入されてしまいます。
そのようなときは、もう一度「テキスト」表示で編集し、今度は改行なしの一行でコードを完成させてください。
[/st-cmemo]
以上になります。
まとめ
お疲れ様でした。
今回は、埋め込みスタイルシートを記事ページに直接書き込むやり方で、「目次を非表示にする方法」をご紹介させていただきました。
問題解決のステップ
- 自身のWebページでid属性を確認する。
- 確認したidをメモ。
- 非表示にしたいページを「テキスト」タブで「編集」。
-
<style type="text/css">#toc-widget-3, #toc-widget-5 {display: none;}</style>をコピペして#からはじまる部分を調べたid属性の値に変更。
この方法はWebページで非表示にしたい任意のパーツにもつかうことができます。
そのやり方は、ページ編集で先ほどのコードを貼り付け、非表示にしたいククリを「検証（I）」で確認し、確認したid属性の値に打ち替えればOKです。
ご一読いただきありがとうございました。
