目次をクリックして見出しに飛ぶと、特にh2タグは見出しデザインが見切れて見えますよね。
Cocoonの目次機能を有効化して、CSSにコピペするだけで目次クリック後の見出しがシッカリ見えるようになるので、チェックしてみてくださいね。
Cocoonもくじ機能を有効化する
『Cocoon設定』より『目次』をクリックし、『目次を表示する』にチェックを入れて変更を保存するだけでOK!
プラグインで目次を出力していた場合はまず、目次プラグインを削除してください。
※『目次』が2つ出るので。
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数字
から始まります。
目次プラグイン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; }
ちなみにこのブログ『ビバ★りずむ』では見出し上余白の指定は以下のみです。※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属性値がtoc1
toc2
など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