前回は「今どうにかしたいもの ～ノートPC編～」と題して4000文字ちょっとの記事を書いたんですよ。
ブログで4000文字以上も書く日が来るなんて夢にも思っていなかったですが、同様にきっと読者の方々も、そんな長文を斜め読みする羽目になるなんて夢にも思っていなかったことでしょう。
なので、はてなブログ公式で実装されていたらしい「目次記法」を利用してみました。
その上で、書きあがったあとに自分のブログを確認してみると･･･
ダサイ。
いやホントごめんなさい！
けっして悪気があったわけでは無いんです！
思ったことがついうっかり口から飛び出しただけなんです！
どうにかならんのか。
ダサイ？よろしい、ならばカスタマイズじゃ。
ブログにしろウェブサイトにしろ、基本的にはhtmlとcssの組み合わせで構成されているはずです。
一部にはJavaScriptとかjQueryも使われているでしょうが。
どちらにせよ、このはてなブログ（無料版）でもcssの編集は許可されていますので、目次部分のコードを眺めてみます。
みーつけた。
このulタグに付与されている「table-of-contents」クラスにあれこれ付け加えれば･･･
このダサイ目次からはオサラバできるはず。
ついでにこの見出しもいい加減飽きてきたので、そちらにも手を加えよう。
見出しって何？という方向け。
目次＆見出しカスタマイズ結果
どうじゃ。
以前よりはそれっぽくなったじゃろう。
左端が1文字か2文字ぶん右に寄っていたり、背景が右端までびろーーーーんと出っ張っているのがまだ気になるが、デフォルトよりはマシになったじゃろう。
･･･htmlとかcssとか、弄るのが久々すぎて猛烈に苦労しました。
前回は155日前ですってよ。
ちなみに今回もゆきひー(id:ftmaccho)様のブログにあったカスタマイズ例を参考にさせて頂きつつ、アレンジを加えようとして迷走しています。汗
具体的な迷走部分である見出しの先頭「◆」については、今後代替案が思いついたら何かしら手を加えなおそうと考えています。
むしろ◆とか◇とか何もつけなくてもいいような気も･･･汗
ついでのカスタマイズ
せっかく目次と見出しに手を加えたので、もう1つどうしても気になっていた部分もカスタマイズすることにしました。
引用部分です。
一応デフォルトの状態でも、マウスカーソルを引用部の黒枠内にもっていけば、右下にそれっぽいマークが出るようにはなっています。
直前の画像と見比べてみましょう。
この引用部分も、もう少し引用していることが分かりやすいように手を加えてみました。
引用部のカスタマイズ結果
これならばマウスカーソルを合わせるまでも無く、引用部であることが分かりやすくなったのではないでしょうか？
こちらはおーとえす様の記事を参考にして･･･どころか、ほとんどそのままです。
ところでやっぱりこの見出し頭の「◆」って邪魔じゃない？汗
まとめ
cssを弄るだけでもブログの見た目はグッと変わりますよね。
たかが見た目・されど見た目。
見た目を侮ること無かれ。
･･･まさかcssとの格闘でこんな時間（現在夜中の2時20分）までかかるとは思わなかったよ。汗
