Gobble up pudding

プログラミングの記事がメインのブログです。

MENU

はてなブログの目次記法の簡単カスタマイズ

スポンサードリンク

f:id:fa11enprince:20160508125616j:plain
目次記法なるものがあって、これは良い!とおもって使ってみました。
h3, h4などに相当するタグ(はてな記法でいえばアスタリスクですね)が
勝手に目次になってくれるやつですね。

使い方は

[:content]

です。こうすると…
f:id:fa11enprince:20160508125952p:plain

だっさwwwコミュ抜けるわ・・・となるわけです。

CSS改造します

ということでCSSを軽くいじります。
例によってデザインCSSのをいじります。

/* Table Of Content */
.table-of-contents {
    border: 1px solid #e4e4e4;
    padding: 20px 10px 20px 40px;
    list-style-type: none;
    border-radius: 5px;
    font-size: 90%;
    background-color: #eeeeee;
}
.table-of-contents:before {
    content: "目次";
    font-size: 110%;
}
.table-of-contents li,
.table-of-contents ul {
    list-style-type: none;
}
.table-of-contents a:link {
    color: #000000;
    text-decoration: none;
}
.table-of-contents a:hover {
    color: #000000;
    text-decoration: underline;
}

そうすると、多少ましになります。
f:id:fa11enprince:20160508130135p:plain
色が変わっているのはリンク踏んだところです。
ちなみに、マウスオーバーしたときに下線がひかれるようにしています。

参考リンク

www.yutakalog.com