ぼっち系クズの日常

社内ニートでゆるゆる生きたいと願うパラサイトシングルアラサーぼっちの雑記

はてなブログのデザインを CSS で微調整した

前回: はてなブログのデザインを CSS でちょこっとカスタマイズした

気まぐれでちまちま改造して日記ネタにします。今回は、目次が見づらかったのを改善。

箇条書きが左に寄りすぎていたのを微調整

箇条書きの丸ポチが左に寄りすぎていたので、もう少し右にずらしてみた。

.table-of-contents > li {
  margin-left: 32px;
}

32 の値はテキトー

目次全体を枠線で囲った

目次部分をもっと視覚的にわかりやすくするために、それっぽい枠線で囲ってみた。

.table-of-contents {
    border: 3px dotted #aaa;
}

(挫折) 「【目次】」の文字を大きくする&センタリング

「【目次】」という文字は、今は以下の CSS コードで追加してるんだけど、

.table-of-contents:before {
  content: "【目次】";
}

この content とかいうやつには HTML タグは指定できないみたい。いや、指定はできるけど、そのタグもそのまま表示されてしまう。

まあそうでしょうね。指定した HTML タグを律儀に解釈してたら、悪意のあるコード書いてもそれを挿入できることになるわけで、イタズラとかウイルスとか仕込み放題だものね。

というわけで、CSS でこやつをいじるのは諦めるしかなさそう。