F-lightのカードレイアウト版でテーマを作り直しました

ChatGPT Plusが使えるうちに、気になるところを少しずつ見直していたら、結局テーマを作り直すところまでいってしまいました。

このまま使うつもりでした

「ChatGPT Plus」でXMLをチェックして、いくつかの修正はしましたが、無理に整理しないほうがいいと言われたので、大きくは変更していません。

ただ、以前から気になっていたところもあったので、Plusが使えるうちにもう少し整理したくなりました。

これまでのテーマは、使いながらその都度CSSやJavaScriptを追加してきました。中を見ると継ぎ足しているところが結構あります。

気になっていたのは、このあたりです。

特に記事一覧は、もともとのCSSを残したまま、Flexbox用のCSSを追加しています。

F-lightには作者さんが公開しているカードレイアウト版があります。

だったら、カードレイアウト版を土台にして、「今使っている機能だけを移したほうがすっきりするんじゃないか」と思いついてしまいました。

今回はChatGPTに確認してもらいながら、必要なものだけを新しいテーマへ移していきました。

細かい変更まで書くとかなり長くなるので、主なものをいくつか挙げておきます。

たとえば記事下のカテゴリー。カテゴリーのリンクまでHTMLに出力しているのに、あとからdisplay: none !important;で見えなくしていました。

表示しないのであれば、最初から出さなければいい。今回は、こうした使わない部分はできるだけ最初から出力しないようにしています。

F-lightでは「濃いブランド色」と「薄いブランド色」を使い分けています。でも、グラデーションにしないため、--brandと--brand-lightを同じ色にしていました。

今回はグラデーションの指定そのものをなくし、濃い色と薄い色をそれぞれ別の用途で使う形に変更。結果的に、ダークモード用のCSSもかなり減りました。

画像や引用、囲み枠などの影は、それぞれのCSSに似たような指定を書いていたので、今回は--content-shadowという変数にまとめました。

ただ、吹き出しは共通の影だと少し強かったので今までどおり弱めにしています。

何でもまとめればいいわけでもないようです。

ブログを始めたころの記事は色や背景などを直接書いているものが多く、その古い記事にも対応できるようにCSSを追加していました。

でも今回あらためて見ると、過去記事のほうを直してしまえば、そのために追加していたCSSをかなり減らせます。

半年前は、過去記事を直すのは大変だと尻込みしていたのですが、それほど大変な作業ではありませんでした。成長したのかな😆

見た目はほとんど変わりません。でも、テーマの中身はかなりすっきりしました。

作り直しを始めると何でもきれいにしたくなります。!importantもなくしたくなるし、追加したCSSも減らしたくなります。

でも、一つずつ確認していくと「なくすと危険」というところもありました。無理に全部直さない。そのくらいがちょうどよさそうです。

数字で見ると、テーマ全体は5,781行から5,447行に減り、!importantも144個から89個になりました。

大がかりな作業になりましたが、なんとなくモヤモヤしていたものがなくなって嬉しい。

今回のように、長いXMLを何度も修正するならPlusだけど、普段のブログ相談ならやっぱりオーバースペック。課金するならGoで十分かな。