ぼっち系クズの日常

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

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

私の CSS 実力は、使い方は知っているけど文法は忘れたというレベル。なので Google 先生にあれこれ問い合わせつつ、何とか仕上げた。なお、セレクタの特定には Firefoxプラグイン Firebug を使用。便利だよね、これ。

見出しに「目次」というタイトルを付けた

はてなブログでは(Markdown記法の場合) [:contents] と書くことで、そこに「見出し一覧(目次)」を挿入できる。

しかしこの見出し機能、単に見出しを箇条書きで表示するだけであり、「見出し」的なタイトル文字列を出してくれない。そのため、見出しを表示しても「何だこの箇条書きは?」と、パッと見て目次であることがわかりづらい。

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

content で指定文字列を挿入できるみたい。しかし HTML タグまでは挿入できないのか……。仕方ないので「【】」で強調しておいた。

太字の色合いをちょこっと変えて強調した

単に太字なだけだと、強調されていることがわかりづらいので、色も付けてみることにした。

strong {
  color: #112233;
}

最初は赤色のつもりだったけど、あまり強調されすぎてここばかりに目が行ってしまう(私はテキトーに太字を使ってるので過度な強調は避けたい)のでやめた。もうちょっと色合いを落としてみた。

段落の先頭に全角スペースを入れた

いわゆる日本語文章風。

.entry-content > p:before{
  content: " ";
}

(小説みたく)段落ごとに空行がないスタイルなら、これはアリだと思うけど、はてなブログではデフォルトで空行が入るので、これは別に要らない気がしてきた。まあ、ちょっと様子見ますわ。