読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

【はてなブログ】JS不要!たった1行で「目次」を追加!早速CSSを調整してみた。

f:id:sitk:20150913135125p:plain

はてなブログに「目次記法」が実装された。

staff.hatenablog.com

いままで、JSで対応していたが、今度から「目次記法」でいける。

表示が早い。

これはイイ!

ソースコード

目次記法」を実装するには、、、

たった1行、本文に下記コードを追加するだけ。

[:contents]

至って簡単だ。

JSでの出力の問題点

JS版での表示は、読み込みが遅い!

コレに尽きる。

まぁ、アレコレJSで処理しているので、しょうがない。

Googleさんも怒ってる。

f:id:sitk:20150913142401p:plain

PageSpeed Insights

はてな側で、細かい所は対応していただきたい。

自分のサイトが気になる方、上記サイトよりチェックしてみよう。

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で追加していた。

サイトのパフォーマンスが気になってたので、なんとかならんもんかなと。

ようやく、はてな側で対応してくれた。

ありがとうございます。

今後の改善も期待しよう。