Wordpress

目次を個別のページで非表示にする方法【WordPress】【AFFINGER5】

  1. HOME >
  2. Wordpress >

目次を個別のページで非表示にする方法【WordPress】【AFFINGER5】

コーディング

個別のWebページで目次を非表示にする方法

  • 画面のスクロールに合わせて移動する目次をつくれたのに、不要なページで表示される。
  • Table of Contents Plusのヘルプや記事を確認してno_tocをつかったのに、非表示にならない。

ココがポイント

結論:

目次を自動生成してしまうページに、埋め込みスタイルシートを適用して、表示されている目次を隠します

つまづきポイント

埋め込みスタイルシートとは:

HTMLテキストエディタ(記事投稿編集ページの「テキスト」タブに切り替えた画面です)に直接書けるCSS(Webページの体裁を調整できる命令文)です。
埋め込みスタイルシートを使用すればそれぞれの個別ページにスタイルが適用できます。

このメリットを使用して、非表示にしたいページの目次を隠していこうと思います。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、WordPressで記事を書いていると、目次一覧を自動で生成、表示してくれる便利で助かるプラグイン「Table of Contents Plus」を使用していることと思います。

しかし、このプラグインはカテゴリー一覧ページなどで最新記事の「見出し」を参照してしまう。

その結果、必要がないのにスライドメニューやサイドバーに目次が表示されていました。

今回は、この問題を解決するために、「特定のページで項目を非表示にする」方法について解説していきます。

目次を非表示にしていく流れ:

  1. HTMLのコードからid属性を確認する。
  2. 埋め込みスタイルシートで、id属性を指定してブロックを隠す

 

1.「Table of Contents Plus」とは?

記事を書くごとに、目次を手作業でつくるのは時間のロスになります。
そこで、「Table of Contents Plus」という非常に便利なプラグインを使います。

このプラグインの設定は簡単で設定方法についての詳しい記事もあるので、この機会にインストールしてみてはいかがでしょうか?

もっと詳しく

 

2.まだ、画面スクロールに合わせて移動する目次を設定してない

画面と一緒に目次が移動してくれれば、WebページTOPに戻る必要がなくなります

画面に合わせてスクロールできる目次を設定する方法についてはこちらの記事を読んでください。

 

3.目次を特定のページで非表示にする

目次を非表示

3.Step1 WebブラウザでHTMLを確認できるコンソール画面を開く

Webブラウザで非表示にしたい目次のid属性を確認します。
この確認が非常に大変な作業になります。
しかし、確認さえできれば、後はコピペですむので頑張っていきましょう。

 

WEBページ

自身のWebページを開きます。

開いたら、どこでも大丈夫です。
Windowsではマウスの右クリック、MacではControl+クリックでメニューがでてきます。

 

検証

メニューの一番下の「検証(I)」をクリック。

 

スライドメニューの目次を変更コード

すると、ウィンドウが2分割されソースコードが確認できるようになります。(閉じるには右上の×をクリック)
一番左の長い文字の羅列このページのHTMLになります。

 

検証メニュー

検証ウィンドウのレイアウトは右上のアイコン 検証メニューアイコンから好きなものに変更できます。

PC画面とスマホ画面切り替え

また、左上のPC画面とスマホ画面切り替えアイコンアイコンからスマホ用画面とPC用画面に切り替えることができます。

 

3.Step2 HTMLの中から目的のidを探す

 

スライドメニューの目次を変更コードid

まず、スマホ用スライドメニューのソースコードを確認します。

スライドメニューの場所は上の方にあることが多いです。
<header>内の小ククリに<nav>があると思います。
その中のさらに小さいククリ内
に私の環境ではスライドメニュー用目次の<div~~~>が入っていました
<nav>はナビゲーションメニュー(画面TOPにある横並びメニューによく使われます)をひとかたまりでククルときによく使うタグです。

私の環境ではスライドメニュー用目次のid属性は「toc-widget-5」でした。

 

サイドバーの目次変更するid

次に、サイドバーのソースコードを確認します。

サイドバーの場合は下の方にあることが多いです。
<header>と<footer>に挟まれた本文のククリ。
その中を▶で開いていくと下の方に<aside>があると思います。
私の環境では<aside>の中の小ククリにサイドバー用目次の<div~~~>が入ってました。
<aside>タグは2カラムレイアウト(Webページの2列レイアウトのこと)でサイドバーに入れたいアイテムをククルときによく使うタグです。

私の環境ではサイドバー用目次のid属性が「toc-widget-3」でした。

お疲れ様です。時間をかけて確認したので、スクショなりでメモとして保存しておきましょう。

もっと詳しく

なぜ、id属性の値を今回はつかっているの?

場所を指定できるコードにはid属性class属性タグ(<nav>や<aside>など)があります。
ではなぜ、今回id属性をつかっているのか?

それは、id属性はそのページに一回しか使えないというルールがあるからです。

つまり、

  • 「id属性を探した場所のククリしか絶対にかわらない」
  • 「他の場所にある、必要なパーツが消えたりしない」

というメリットがあるので、今回はid属性をつかっています。

<div>タグについて

<div>タグは、空の箱という認識でOKです。
特別な機能のないただの箱としてつかうときに使用します。

 

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]

以上になります。

 

まとめ

お疲れ様でした。

今回は、埋め込みスタイルシートを記事ページに直接書き込むやり方で、「目次を非表示にする方法」をご紹介させていただきました。

問題解決のステップ

  1. 自身のWebページでid属性を確認する。
  2. 確認したidをメモ
  3. 非表示にしたいページを「テキスト」タブで「編集」
  4. <style type="text/css">#toc-widget-3, #toc-widget-5 {display: none;}</style>

    コピペして#からはじまる部分を調べたid属性の値に変更。

この方法はWebページで非表示にしたい任意のパーツにもつかうことができます。
そのやり方は、ページ編集で先ほどのコードを貼り付け、非表示にしたいククリを「検証(I)」で確認し、確認したid属性の値に打ち替えればOKです。

ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.