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
コメント