目次のカスタマイズ覚書です。
目次
cocoonの目次をおしゃれにCSSカスタマイズ【WordPress】
cocoonの目次はデフォルトのHtmlを簡潔に表記すると、こんな感じです。
<div class="toc">
<input type="checkbox" class="toc-checkbox" id="toc-checkbox-1" checked>
<label class="toc-title" for="toc-checkbox-1">目次</label>
<div class="toc-content">
<ol class="toc-list open">
<li><a href="#heading1">見出し1</a>
<ol>
<li><a href="#subheading1-1">小見出し1-1</a></li>
<li><a href="#subheading1-2">小見出し1-2</a></li>
</ol>
</li>
<li><a href="#heading2">見出し2</a></li>
<li><a href="#heading3">見出し3</a>
<ol>
<li><a href="#subheading3-1">小見出し3-1</a></li>
</ol>
</li>
</ol>
</div>
</div>次のような仕様にカスタマイズしてみましょう。
- h2黒丸数字
- h3は数字を表記せず黒丸だけにする
Cocoonの目次、CSSの作り方
カスタマイズ方法はもともとあるリストタグのマルを消して、beforeに追加するという形をとっています。cocconは管理画面の目次からもリストタグを非表示にできますが、あえてデフォルト設定を使ってCSSのみで消しています。管理画面とCSS、両方で調整すると2ついじらないといけないので、1つの方がすっきりとするかなという考え方です。
/************************************
** 目次
************************************/
.toc-list {
list-style-type: none;
counter-reset: item;
}
.toc-list > li {
counter-increment: item;
}
.toc-list > li > a::before {
content: counter(item);
background-color: #000;
color: #fff;
width: 24px;
height: 24px;
display: inline-block;
text-align: center;
line-height: 150%;
border-radius: 50%;
margin-right: 0.5em;
}
.toc-list > li > ol {
list-style-type: none;
}
.toc-list > li > ol > li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #000;
border-radius: 50%;
margin-right: 0.5em;
}table of contents plusのおしゃれなカスタマイズ・デザイン
WordPressのプラグインで有名なtable of contents plusのcssのカスタマイズやデザインなどをまとめておきます。覚書をかねています。
table of contents plusのWordpressのプラグイン【公式】
公式サイトはこちらです。
table of contents plusの行間
table of contentsの行間も調整すると綺麗に見えます。 設定にはないため、cssに追加ですね。
/* table of contents plusの行間 */
#toc_container li {line-height: 1.8;}
table of contents plusで数字を消してアイコンに置換
h3の見出しが増えるにつれ、2-1、2-2のような表記がうざったくなりました。そこで数字を削除して●を追加します。
span.toc_number.toc_depth_2 {
display: none;
}
#toc_container .toc_list > li > ul > li {
list-style-type: disc;
}
アイコンに切り替えたい場合、FontAwesomeを使う方法があります。擬似要素のbeforeを使います。
/* table of contents plusのh3の数字を削除し、FontAwesomeでアイコンを追加 */
span.toc_number.toc_depth_2 {
display: none;
}
#toc_container ul ul li:before{
font-family: FontAwesome;
font-size: 18px;
content: "\f040";
}
table of contents plusの設定にある、番号振りのチェックは入ったままです。
この方法以外に番号振りのチェックやtable of contents plusのcssを使わない方法もあります。
simplicityやコクーンはFontAwesomeが入っていたため、何もせずコードを書くだけで簡単に対応できましたね。
table of contents plusのタイトルの横にアイコンを追加
デザイン的に物足りないので、table of contents plusのタイトルの左にアイコンを追加することにしました。
FontAwesomeを利用しています。simplicityなどテーマによってはデフォルトで入っています。
#toc_container .toc_title::before {
position: relative;
font-family: FontAwesome;
font-size: 14px;
content: "\f0ca";
display: inline-block;
width: 40px;
line-height: 40px;
margin-right: 8px;
border-radius: 50%;
vertical-align: baseline;
speak: none;
-webkit-font-smoothing: antialiased;
color: #fff;
background-color: #5f7b96;
}table of contents plusでタイトルを左寄せ
タイトルを左寄せする方法です。
#toc_container .toc_title {
display: inline-block;
position: relative;
margin: 0 0 0 40px;
}おしゃれなカスタマイズ・デザイン(table of contents plusのcssを使用しない編)
table of contents plusでは、デフォルトのcssを読み込まない設定があります。より思い通りにデザインをカスタマイズする場合、こちらの方がいいかもしれません。読み込まない設定にしない場合、!importantなどが必要になる場合があり、cssが反映されない場合もあります。あと、わずかながら余計なcssを読み込まないため、こちらの方が軽くなります。
table of contents plusの設定
cssを読み込まない場合、table of contents plusの必要な設定は2つです。
チェックを外します。
チェックをいれます。
table of contents plusで簡単なデザインする
何もないので、背景ぐらいつけましょう。
#toc_container{
background: #f9f9f9;
box-shadow: 0 1.5px 2.4px rgba(0,0,0,.15);
}輪郭のcssも簡単に効くようになります。
#toc_container{
border: solid 2px;
border-color: #0d8797;
}サンプルです。色、margin、paddingなどはお好みでデザインしてください。
table of contents plusで疑似要素beforeの連番
最初、他の方法で作ってしまいましたが、こういうカウンタあるんですね。css素人なので知りませんでした。。覚書です。
この方法で作成する場合は、table of contents plusの番号振りはいりません。
/* h2の見出し */
#toc_container .toc_list {
counter-reset: li; /*数字をリセット。必須っぽい*/
}
#toc_container .toc_list > li {
list-style-type: none;
}
#toc_container .toc_list > li:before {
counter-increment: li; /*連番のカウンタ*/
content: counter(li); /*表示する*/
}サンプルです。めもるため必要最低限のコードだけ抽出しました。jinというwordpressのテーマはこの方法で実装されていましたね。
table of contents plusのアンカーを綺麗にあわせる方法
小ネタの追記です。table of contents plusのジャンプ先の位置がずれるため、アンカーの調整をしました。
ジャンプすると、見出しの下にあわさります。 見出しによってマージンなどが違うため調整が必要ということですね。
初期値の30はWordpressのツールバーの高さのようです。「Enable smooth scroll effect」をチェックしていると 上級者設定の方に「Smooth scroll top offset」という項目が追加されます。これが位置が違う場所にあるからわかりにくい。。
でも、オフセットが調整できるわけですね。
日本語化している場合は「スムーススクロール」をチェックしていると、 上級者向けの「スムーススクロール先の余白」が追加されています。
移動中にユーザーがマウスをまわす可能性もあるため、多少ゆとりを持って設定した方がいいかもしれません。
あとキャッシュ系のプラグインを利用していたらキャッシュをクリアすること。
table of contents plusでアンカーが正常に飛ばない、一瞬表示されるけど戻る不具合
小ネタの追記です。table of contents plusのアンカー先にジャンプすると、一瞬表示されるけど、遷移先の記事の上部に戻るという、謎の現象が発生しました。
ただ、ちゃんと飛ぶアンカーもあるのです。
原因をさぐると、ブラウザの設定でjavascriptをオフにすると正常に動作します。
つまり、javascriptが悪さをしていることは確定。しかし、テーマやプラグインが原因ではなさそうです。
ちゃんと飛ぶアンカーもあるのです。という点を思い出しました。
はい。よくみたら、記事内にtwitterの埋め込みコードがありました。これ外したら解決しました。
twitterの埋め込みコードがjavascriptでした。
table of contents plusのFAQ
table of contents plusの目次が表示されない
バグがあるバージョンがあったようです。
表示されなくなったのは、上級者向けの見出しレベルでチェックが外れてしまったため、再度チェックすると表示されます。
table of contents plusのフォントサイズのcssが効かない
通常、プラグインの管理画面からフォントサイズを指定すれば終わりですが、とあるテーマでフォントサイズのcssが効かない状態になりました。結局、スタイルシートで直接書き換えました。
.toc_list a {
font-size: 22px;
line-height: 1.8;
}また、上級者向けの設定に、
CSS除外 プラグインのCSSを読み込まない場合チェックを入れてください。
のチェックボックスもあります。こちらチェックを入れると、背景や中央寄せも消えて1からcssをカスタマイズできるようです。
このプラグインは設計が美しく、ほんとすごーくよくできていると思います。^^
ご参考になれば幸いです。
コメント