Cocoonユーザーさんに
やりたいカスタマイズがあれば、お問い合わせよりお待ちしてます。
または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。

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

スポンサーリンク

WordPressテーマCocoon見出しをユーザーに見やすくするコピペOK!CSS

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

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

Cocoonの目次機能を使ってない人はこのCSSは不要です❦
スポンサーリンク
スポンサーリンク

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

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

ポイント

プラグインで目次を出力していた場合はまず、目次プラグイン削除してください。

※『目次』が2つ出るので。

Cocoon目次機能:HTMLの説明

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

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数字から始まります。

ポイント

目次プラグインTOC+はiからはじまる文字列だけでなく、見出しに英数字を使ったとき『その英数字』がid属性id="midasi"id="2"など出力されます。

~ 結果 ~

  • CSSだけで全ての余白調整キビシイ

もくじをクリック後、みだしに移動時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;
}
editor-style.cssの追記は不要です^^

ちなみにこのブログ『ビバ★りずむ』では見出し上余白の指定は以下のみです。※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からの指定なので、タブレットを縦にしてみた時以上のブラウザサイズのときのみ上書きして読み込みます。

ポイント

自分でカスタマイズする時はclass指定することが多いけど、

万が一spanにid属性を付けるときはtocから始まる文字列を指定しちゃ、まぎらわしいから付けません^^

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

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

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

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

さいごに

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

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

ちなみに、実は…。

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

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

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

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る