ころさんです。
このブログもそろそろ2年を迎えようとしているので、少し外装に手を加えることに。
普段あまりやらないのですが、ブログのデザインを変えました。
この記事は普段からブログを見ている人向けになりそうです。
サイレントでデザイン修正している部分もちょくちょくあったりもします。
なんか細かすぎてお伝えする必要あるのかな？と思うので、今回は割愛とさせていただきます。
そういうわけで今回は大きく変わった部分を中心に紹介します。
目次のデザインが変わりました
目次のデザインが変わることに。
写真はスマホバージョンになっています。
理由は箇条書きの部分がうまく作れなかったからなんですよねー…
箇条書きの詳しい話はこの後で。
大見出しのみ表示されるように
目次があまりにも長くなってしまう記事もあるので、基本的には大見出しのみ表示させることにしました。
今までこのブログを見てきた人にとっては、少し違和感を感じるかもしれませんね。
ちなみにPC版の目次のデザインはほぼ変わっていないです。
（サイレント修正はしていますが…）
箇条書きの部分も変わりました
箇条書きになっている部分が分かりやすくなりました。
今までですとスマホ版の箇条書きの部分が
・無塗装
・全体をほぼやすりがけ
・
・
・
という感じに味気ない感じになってました…
実は今まで設定はしていたはずなんですが、なぜか反映されていないまま今まで放置してました…
はてなブログの仕様のせい？
箇条書きがすんなりとうまく行かない理由は、はてなブログの仕様のせいだと思います。
技術的な面で語るとすると、CSSのliタグが箇条書きだけではなく、目次の方までも適用されてしまうという。
（もう少し噛み砕いて言うなら、目次の部分も箇条書きの種類の一つになっている）
つまり、箇条書きの部分を下手にいじると目次の部分にまで反映されてしまうという。
自分はWEBプログラマ屋さんではないので、表現としては合ってるかは微妙ですが…
はてなを使っている以上、仕方ないかなと思います。
検索してみると、同じことで悩んでいる人がいそうだなあと感じました。
（使っているはてなのスキンのせいでもあるかもしれない？）
これは先人のコピペのコードを使っても解決しなかったので、最終的には自力でうまい具合に調整しました…。
これが大変なんですよね…
箇条書きがより見やすくなった！
個人的な感想ですが、主に箇条書きの部分が見やすくなったと感じました！
ただの点打ちよりは囲んであった方が良いですもんね。
ちなみに、このブログはスマホから見てくれる人が7割もいるっぽいんです。
…今までの箇条書きが見づらくて申し訳なさが出てきましたね…
おわりに
今回大きく変わったのがこの2つです。
-
目次が大見出しのみの表示
-
箇条書きの部分がハッキリと分かりやすく
…早速デザインの変わった箇条書きを使ってみました！
読みやすくなったとは思いますが、いかがでしょうか？
コードの公開は反響があったらしようかな？と思います。
（ただし綺麗なコードではない気がします…）
しばらくはこのままでいきたいと思いますので、これからも趣味充日誌をよろしくお願いします！
ではでは