エディタはGutenberg、テーマはCocoon
今回ご紹介するのはワードプレスのCocoonでグーテンベルグ(Gutenberg)エディタを使用しての設定方法です。
目次非表示はプラグイン不使用
プラグインは使用せずにCSSにコードをちょこっと追加するだけなので簡単です！
ページの種類によって目次非表示方法が変わります(2種類)
①固定ページと②投稿ページ に分けてご紹介します。
①固定ページの目次非表示
固定ページはCSSを追加するまでもなくチェック✓を入れるだけなのですぐにできます。
投稿記事作成画面の右側にある「文書」をクリックすると下の方に「ページ設定」の項目が出てきます。
そこの[目次を表示しない]にチェックを入れればチェックを入れた固定ページだけ目次を非表示にすることができます。これだけです。簡単ですね！
②一般的な投稿ページの目次非表示
下の記事を参考にさせていただきました。私なりにかみ砕いてやさしくご紹介したいと思います。
CSSの追加場所
記事作成画面の１番下に「カスタムCSS」の文字が見つかると思います。記入欄が閉じている場合は下の画像の赤まる(右側)をクリックしてCSSを記入できる状態にします。
↓
CSSを追加できる状態になりました。
目次を非表示にするCSS
CSSはこちらです。
.postid-1945 .toc {
display: none;
}
上のCSSの1945は記事IDで、皆さんの番号に変更して使用してください。
記事IDとは？
記事IDは、投稿画面の上に出てくるアドレスの〇で囲った番号です。
ダッシュボード→投稿一覧でもID番号が確認できます。
実際に目次を非表示にしてみます
CSS欄に何も書いていない状態だと下の画像のように目次が表示されています。
「カスタムCSS」に先ほどのコードを入力して保存。プレビューを見てみると
めでたく目次を消すことができました！
さいごに
今回の方法以外にもデフォルトで目次を表示しないようにしておいて、プラグインを使用して目次の表示・非表示を設定する方法もあるようです。ご自分に合った方法で利用してみてください。
その他Wordpressに関する記事はこちらです↓
