【はてなブログ】JS不要！たった1行で「目次」を追加！早速CSSを調整してみた。
はてなブログに「目次記法」が実装された。
いままで、JSで対応していたが、今度から「目次記法」でいける。
表示が早い。
これはイイ！
ソースコード
「目次記法」を実装するには、、、
たった1行、本文に下記コードを追加するだけ。
[:contents]
至って簡単だ。
JSでの出力の問題点
JS版での表示は、読み込みが遅い！
コレに尽きる。
まぁ、アレコレJSで処理しているので、しょうがない。
Googleさんも怒ってる。
はてな側で、細かい所は対応していただきたい。
自分のサイトが気になる方、上記サイトよりチェックしてみよう。
CSSを変えてみた
簡単に実装できたは良いが、、、
デフォルトだと「目次」というのがわかりづらい。
ということで。
下記のように設定してみた。
/* 目次 Markdown用 */
article .entry-content .table-of-contents{
background: #F8F8F8;
margin: 50px 0;
padding: 15px;
border: 1px solid #CCC;
}
article .entry-content .table-of-contents{
margin: 10px 0 0;
}
article .entry-content .table-of-contents li{
margin-left: 1.5em;
list-style: decimal;
}
article .entry-content .table-of-contents li li{
margin-left: 0;
}
article .entry-content .table-of-contents:before{
content:"目次";
display:block;
font-weight:bold;
font-size:16px;
}
ご自由にどうぞ。
※自己責任でお願い致します。
さいごに
いままで、目次はJSで追加していた。
サイトのパフォーマンスが気になってたので、なんとかならんもんかなと。
ようやく、はてな側で対応してくれた。
ありがとうございます。
今後の改善も期待しよう。
