[Cocoon2021]目次を非表示にするCSSは?WordPress

エディタはGutenberg、テーマはCocoon

今回ご紹介するのはワードプレスのCocoon[2020年]でグーテンベルグ(Gutenberg)エディタを使用しての設定方法です。

目次非表示はプラグイン不使用

プラグインは使用せずにCSSにコードをちょこっと追加するだけなので簡単です!

ページの種類によって目次非表示方法が変わります(2種類)

①固定ページと②投稿ページ に分けてご紹介します。

①固定ページの目次非表示

固定ページはCSSを追加するまでもなくチェック✓を入れるだけなのですぐにできます。

固定ページ目次非表示

投稿記事作成画面の右側にある「文書」をクリックすると下の方に「ページ設定」の項目が出てきます。

そこの[目次を表示しない]にチェックを入れればチェックを入れた固定ページだけ目次を非表示にすることができます。これだけです。簡単ですね!

②一般的な投稿ページの目次非表示

下の記事を参考にさせていただきました。私なりにかみ砕いてやさしくご紹介したいと思います。

トップページ(固定ページ)の目次を非表示にしたい
トップページの目次非表示、または指定したページでの目次を非表示にしたいのですが、初心者のためよくわかっておりません。 CSSでのカスタマイズ方法を教えていただけませんか? サイトURL

CSSの追加場所

記事作成画面の1番下に「カスタムCSS」の文字が見つかると思います。記入欄が閉じている場合は下の画像の赤まる(右側)をクリックしてCSSを記入できる状態にします。

CSSを追加できる状態になりました。

目次を非表示にするCSS

CSSはこちらです。

.postid-1945 .toc {
display: none;
}

上のCSSの1945は記事IDで、皆さんの番号に変更して使用してください。

記事IDとは?

記事IDは、投稿画面の上に出てくるアドレスの〇で囲った番号です。

ダッシュボード→投稿一覧でもID番号が確認できます。

実際に目次を非表示にしてみます

CSS欄に何も書いていない状態だと下の画像のように目次が表示されています。

「カスタムCSS」に先ほどのコードを入力して保存。プレビューを見てみると

めでたく目次を消すことができました!

さいごに

今回の方法以外にもデフォルトで目次を表示しないようにしておいて、プラグインを使用して目次の表示・非表示を設定する方法もあるようです。ご自分に合った方法で利用してみてくださいね!

その他Wordpressに関する記事はこちら↓

ワードプレスCocoon
WordpressのCocoonテーマでグーテンベルグエディタを使用しての記事の書き方や設定方法をご紹介しています。その他サイト型トップページ作成方法、Cocoon設定一覧など。できるだけ簡単に設定できる方法をご紹介しています。分かりやすい説明を心がけています。

耳寄り情報

エックスサーバーを使いながらドメインは『お名前.com』や『ムームードメイン』などを利用しているというかたへ

ドメインをエックスドメイン に変更すればエックスサーバーと一元管理できてとっても楽です。

Xサーバー、Xドメインの管理画面です。サーバーとドメインが同じ画面で管理できてすっきりします。ミニマリストさんにもおすすめです。

エックスサーバー、エックスドメイン管理画面

◆エックスドメインただいまキャンペーン中

2021年3月31日までの期間限定で.jp .com .net他8種類ドメインの移管料金が利用料込みでなんと1年間110円(税込み)になるキャンペーン中です。

出典:エックスドメイン
詳しくはこちら→エックスドメイン

◆エックスサーバー以外のサーバーを利用しているというかたへ

エックスサーバー では、2021年4月1日(18:00)まで

“ドメイン永久無料&初期費用0円キャンペーン”を実施中です。

なんとエックスサーバーでアカウントを取るとドメインが1つ無料でもらえます。そしてそのドメインはエックスサーバーと契約している限りずっと無料で使っていいというのです。

ドメインの移管でもこのキャンペーンの対象となるのでこの機会にサーバーとドメインをXサーバーで統一してみてはいかがでしょうか?初回10日間は無料でお試しできます。

わたしはキャンペーンの少し前にXサーバーにドメイン移管をしてしまいました…。みなさんはこの機会をお見逃しなく!

\エックスサーバーキャンペーン中/

さらに上を行くWordpressのテーマはこちら↓

【THE THOR(ザ・トール)】 の特徴
  • 圧倒的にSEOに強い
  • おしゃれで美しいデザイナーズサイトが簡単に作れる
  • アクセスUP収益UPを強力に後押しする「集客・収益化支援システム」を搭載
  • ランキングサイト・口コミサイトなどが簡単に作れる など
ブロガー専用WordPressテーマ「OPENCAGE」 の特徴
  • ブロガー向けのシンプルで高機能なテーマ
  • カスタマイズに時間をかける必要がない
  • 全てモバイルファーストでつくられているのでスマホで見た時のデザインが抜群

インターネット接続キャッシュバックでお得です↓

タイトルとURLをコピーしました