![見出し画像](https://assets.st-note.com/production/uploads/images/119098106/rectangle_large_type_2_a93d5a1055f2ef25da9298d208f93033.jpeg?width=1200)
カテゴリの背景色をカラフルにした(WordPress+Swell)
(約 1,100文字の記事です。)
今日も地味にWebサイトの記事メンテと少しのフロントエンド拡張。今日は作業時間があまり確保できなかったので少ししか進んでいない。
カテゴリの背景、同じ色に不満
これ、読者もそうだが、私から見ても分かりづらいのだ。
![](https://assets.st-note.com/img/1697477749395-AY7SV6UuKX.jpg)
みんな同じ色。Swellのデフォルト設定では1色しか指定できない。
カラフルにしたくてnoteから移転したのだから、ここもなんとかしたい。これは割とすぐに情報が見つかった。
カスタマイズ内容とバッティング
だが紹介記事のソースコードをコピペではダメだった。function.php内で二重の定義が発生してエラー。
そう、カテゴリ名を動的に変更させるコードとバッティングした。しょうがないのでソースコードを解析して必要な内容だけを移植する羽目に😭
1ヶ月前の自分ならばお手上げだっただろう。
だが、今なら、
「読める、読めるぞぉ~!」
![](https://assets.st-note.com/img/1697478383834-ePHjrXllbF.jpg)
なのである。
一発で実装完了。
Before & After
Before & Afterはこちら。
Before
![](https://assets.st-note.com/img/1697477749395-AY7SV6UuKX.jpg)
After
![](https://assets.st-note.com/img/1697478630808-QBWrMHrhSO.jpg)
これ、画像だけだと分かりにくいがホームページでホイールを回すとかなりの認識力の違いになる。
マウスホイールを回していったとき、欲しい情報を色で識別できるのはアクセシビリティにとても関わる。Zbrushだけの情報が欲しい人、MMDだけの情報でいい人などはホイールを回せばすぐに分かる。
ただし1カテゴリごとに指定
ただしこの色指定はプチプチとカテゴリごとに行なう必要がある。一括指定や一括変換は出来ないのが難点。ちょっとだけ色相を変えたい場合でもプチプチ地獄が始まる。なので今回は最上位カテゴリの4つだけに色指定した。他はSwell側の設定が有効だ。
それにカラフルになったからと言って技術文書としての情報量が増えたわけじゃない。ここには注意が必要。あくまでもコンテンツの中身で勝負しなければならない。
だが最近不満に思っていた「カテゴリの背景色が全部同じ」を突破できた。これは地味に嬉しい。だがあまり効率的ではないアナログな手法での管理なので、う~ん、導入は慎重にしないといけない。
とりあえず今日も一歩前進した。
ブログサイトのカテゴリも整理したい。昨日やる予定が色々計画がずれ込んだ。
今回の創作活動は約4時間30分(累積 約3,512時間)
(962回目のnote更新)
読んでくれてありがとう。気長にマイペースに書いてます。この出会いに感謝😊