Cocoon！目次クリック直後、見出しに余白を入れスッキリ見やすく！コピペCSSカスタマイズ

目次をクリックして見出しに飛ぶと、特にh2タグは見出しデザインが見切れて見えますよね。

Cocoonの目次機能を有効化して、CSSにコピペするだけで目次クリック後の見出しがシッカリ見えるようになるので、チェックしてみてくださいね。

Cocoonもくじ機能を有効化する

『Cocoon設定』より『目次』をクリックし、『目次を表示する』にチェックを入れて変更を保存するだけでOK！

Cocoon目次機能：HTMLの説明

Cocoonの目次機能は全てtocからはじまり、h2・h3タグなど関係なく見出しの数だけ数字が付きます。

1つ目の見出しh2タグを使ったときのHTML

<h2>
<span id="toc1">midasi</span>
</h2>

2つ目の見出しh2タグのときHTML

<h2>
<span id="toc2">見出し2</span>
</h2>

3つ目の見出しh3タグのときHTML

<h3>
<span id="toc3">見出し3</span>
</h3>

hタグに囲まれたspanのid属性の値（toc1など）は全てtoc数字から始まります。

もくじをクリック後、みだしに移動時hタグの余白調整するCSS

目次からページ内ジャンプで見出しに移動したとき、hタグの上部に余白を作るとユーザーはどの見出しに飛んだか分かりやすいので以下コードを追加します。

style.cssに追記するコード

span[id^="toc"] {
	padding-top: 1.6em;
}

@media screen and (min-width: 769px) {
	span[id^="toc"] {
		padding-top: 2em;
	}
}

amp.cssに追記するコード

span[id^="toc"] {
	padding-top: 1.6em;
}

ちなみにこのブログ『ビバ★りずむ』では見出し上余白の指定は以下のみです。※AMPは1.6em

span[id^="toc"] {
	padding-top: 2em;
}

狭い横幅で動作チェックしたい場合は、padding-top: 1.6emを指定してある以下ampページでご確認ください。

h6まである『該当HTMLを囲む親要素・属性を付けて、範囲指定して装飾する書き方！』ampページをどうぞ。

CSSの説明

span[id^="toc"]はHTMLタグ<span id="toc1"><span id="toc2">などid属性値がtoc1toc2などtocから始まるものすべてを指定してます。

padding-top: 1.6em;は上の内側余白を1.6文字分開けるね。と指定。

@media screen and (min-width: 769px)はブラウザの横幅が769pxからの指定なので、タブレットを縦にしてみた時以上のブラウザサイズのときのみ上書きして読み込みます。

LINKレスポンシブ対応！メディアクエリの書き方と書く場所。あなたのテーマはスマホファースト、PCファースト！？

spanって何？って人は以下リンクをどうぞ。

LINKHTMLのdivとspanの違いは、ブロックレベルとインライン要素★入れ子にしたカスタマイズ例：初心者向け

この関連記事にはCSSを知りたい人向けのページがチラホラありますよ。

さいごに

WordPressの運営しているとプラグインは増えていくし、プラグインは多機能な分ファイル群は多く重いので、Cocoon機能を使ってプラグインを減らすのも手ですよね。

チリも積もればマウンテンなので。

ちなみに、実は…。

functions.phpでtocのカスタマイズし固有のclass属性を付けて装飾してて。目次のアップデートがありカスタマイズし直そうしてたら、CSSで簡単にできるやん！と思ったついでに記事にしてみました。

ちょっとのことだけど、見やすさ・・・…大事！

それではかうたっくでした❦