「ブログのレイアウト美化に半日を費やす」の巻
と思わず心の声を吐露してしまうぐらい、途中は絶望タイムもありながらなんとか終えました。
チョラウマレヴォゥの「CSSコード」
もうCSSコードっておそろしいんですよ。トラウマになるレベル(チョラウマレヴォゥ)。

CSSコード編集作業(地道)
上の画像の左端にこうやってコードを書いていくのです。
なんやねんこの余白
今回、強敵だったのが以下に示す余白です(↓の画像内、ブログタイトル画像と広告に挟まれたこの余白なんやねん、ということです)。BEFORE・AFTERにて。

BEFORE

AFTER
もうこの余白を消すだけで2時間は要したと思います…。原因を突き止めるためにひとつずつ試す必要があるのです。navigationなのか、headerなのか等々。
こちらが立てば、あちらが立たず
最終的にはもう無理やり広告を上に引っ張って持っていくしかありませんでした。しかしそうするとほかの部分がずれるのです。こんなふうに↓

例:レイアウト崩れ
「こちらが立てば、あちらが立たず」状態が複数個所で起こるのです。ほんま泣きたくなります。
以前レイアウト美化した部分まで帳消しになることも
さらには、コード同士で予期せぬ競合・衝突が起きて、以前レイアウトを修正した部分まで元に戻ってしまったりするのです(上の画像の上端:青枠の白い点線が下部のみ消えてる!)。そして復旧のさせ方・原因追究にまた一苦労。
原因を特定できない時間帯が続くと、もう途方にくれます。それでもなんとかスタイリッシュにしたい。
もはやその日の予定の変更を余儀なくされましたが、なんとか原因を特定できて、レイアウトの最適化をひとまず終えることができました。
※AIを活用しても、限界あり
ブログの美化作業もたいへんなんです
ブログというのは、私のようなプログラミングの素人に毛が生えた者が独力で外部発注等なしでやっていると、たいへんです(いまだに古いテーマ(=ブログのOSのようなもの)を使い続けているから、というのもありますが)。
記事を書くだけでなく、こうした労力の集積でいま現在のブログが成り立っているのです(たまには苦労アピご容赦)。
追記
その甲斐あってか、「見やすくなった」とのご意見あり。
数時間の絶望タイムが報われました(笑)よかったです。
関連記事