技術ブログ

【Cocoon】目次を非表示にする方法

Cocoonテーマで目次を非表示にする方法をご紹介します。

結論:Cocoonでは、ページごとに目次の表示/非表示を設定することができません。

サイト全体またはページ種別ごとに目次を表示設定する場合は、Cocoon設定から。特定のページでのみ目次を非表示にしたい場合は、カスタムCSSを利用しましょう。

サイト全体・すべてのページで目次を表示しない場合

Cocoon設定→目次タブ→目次の表示→目次を非表示に設定する

  • 目次

目次の表示

  • 目次を表示する

「目次を表示する」のチェックをオフ


表示ページ

  • 投稿ページ
  • 固定ページ
  • カテゴリーページ
  • タグページ

ページ種類ごとに
目次表示を切り替えも可能

特定のページだけ目次を表示しない方法

該当ページの編集画面下部「カスタムCSS」テキストエリアに、下記コードを記述する。

#toc { display: none; }

目次エリアのHTMLコードは、下記の通り「id=”toc”」が指定されています。idで要素を指定して、スタイルを設定することができます。

<div id="toc" class="toc">目次</div>

【余談】CSSで要素を非表示にする方法

display:none;

「display: none;」された要素は、子要素含め画面から消えます。

CSS

要素 { display: none; }

visibility: hidden;

「visibility: hidden;」された要素は、画面に空きスペースが残ります。

CSS

要素 { visibility: hidden; }

HTML5 hidden 属性

HTMLタグの中に「hidden」と書きます。

HTML

<要素 hidden>内容</要素>

テキストの色や不透明度を調整して見えなくする方法

「opacity: 0;」や「color: transparent;」の他にも、colorをrgba(0,0,0,0)するとか、hsla(120,100%,50%,0)とか、いろいろな指定が可能です。

CSS

要素 { opacity: 0; }
要素 { color: transparent; }

CSSで要素を非表示にする12の方法 - CSS note

コメント