ようやくフロントエンド開発終了😍（WordPress＋CSS＝余白調整）
（約 3,400文字の記事です。）
今日も今日とてWordPressのサイトのフロントエンドの仕上げ。超地味。めっちゃ地味。
だが「たったそれだけのこと」に5時間持っていかれた。
今日もWordPress 5時間 修行
これは何という苦行ですか？これはもしかしたら普通にPHPやWordPressの教科書を読んで普通に1から順を追って学んだほうが早いのでは？とすら思ったが、それをやっている時間もない。
そもそもWebサイトは手段であって目的じゃない。別にフロントやバックのエンジニアになるつもりはない。表現のための手段としてのWebサイト作り。それだけだ。そして自分と読者のための快適な仕組み作り。そのためだけのフロントエンド＆バックエンドの開発だった。それで手に職というつもりではない。
なので「こまけぇこたぁいいんだよ！動けばいいんだよ！」ということで5時間かかった。そして5時間の成果を今ココに。
（Before） 何だこの余白は？
またしても謎の余白。
これはずっと気になっていたが実害はないので後回しにする予定だった。だが昨日、念願のサブメニューの自動生成に成功し、PC画面の右側メニューもいよいよ期待通りに充実してきた。そこでこの余白である。
もう戦うしかあるまい😤
（After）5時間の格闘の結果
うん、ごく普通の統一感、ごく普通の見栄えになった。
noteで成果を読めば数秒。だが作れば5時間。
これがWordPressでのサイト改造の現実だ。
画像例の記事はこちら。
これで終わってもつまらないので、なぜ5時間もかかったかの解説。
Webの情報が正しいとは限らない
もともと余白ありの例ではWordPress本文でレイアウトしたHTMLソースをコピペしていた。だって面倒臭いじゃん。HTMLをタグ打ちするなんて。Gutenbergがあるじゃないか！
だがその何かが悪さをして余白を作っているようなのだ。なのでその作戦をやめてゼロから作り直すことにした。
ネットで色々情報収集。見つかった情報通りにHTMLソースを書いてCSSに追加しても予想の挙動にならず。そのテストで2時間使った。
振り出しに戻る。
左寄せ、中央寄せ、右寄せの苦悩
パンがないならお菓子を食べればいいじゃない！
divで区切れないならpで区切ればいいじゃない！
というわけでpタグのクラスとCSSで制御する作戦に変更。
これは一見成功したかに見えた。だがしかし！
マガジンの先頭の記事に移動するとこんな具合で見た目が崩れる。
（画像下段が正しい挙動）
本来中央にピン留めされているべきアイテム「▲Homeへ」が左に寄っている。そしてさらに左側にも謎の空白。
コレジャナイ😭
この作戦だと前後の記事のリンクがないときには表示位置が崩れるのだ😭
この実装テストだけでも1.5時間かかったのにまた振り出しに戻る。ここまでで3.5時間が消えた。何の成果も得られていない……。
こうなると振り出しに戻って、余白ありでもまともに動いていたバージョンを改良する必要がある。WordPressのソースコードを解析。pタグのクラス、これは何だ？消したらどうなる？そんな体当たり実験で1時間。
何だか臭う、臭いクラスがある。これを消したら「余白が少し」減ったのだ。少しだけね。そこで確信した。
昨日に学べ！多分どこかのCSS定義だ
というわけで昨日からの学びを思い返す。恐らくはCSSでどこかのクラスで無駄にマージンを指定しているはずだ。最初に思いつけよ、と思うが、そうならなかったんだ……。
そしてコツコツとChromeのデベロッパーモードで色々と探る。そして1時間格闘した結果、ついに見つけた。
中村 「ドクターウィリス！」
ウィリス「確認した。間違い無く彼だ。」
そして再掲画像の通り、ごく普通に統一感のある見た目になった。
はい、5時間終了。
少しだけスマホ対応
当サイトはPCでの閲覧を前提にしているのでスマホでの見栄えは割と気にしていない。3DCGをやる人でPCを持っていない人などあり得ないし、情報を得ながらソフトを操作するならばデュアルディスプレイも必須だろう。そうなると私のターゲット層は必然的にPC閲覧者となる。なのでスマホ対応はほぼしていない。
ただしマウスホイール回転時の追尾アイテム、これはスマホでは非表示になる。せっかく苦労して作ったサブカテゴリメニューもスマホでも表示させたかったのでサブカテゴリメニューのウィジェットだけはスマホ用に条件分岐を作って実装した。他はやめとく。
こういう例外処理がサイト管理における2のn乗の複雑さを生み出すきっかけになるのだ。ここ1つだけに留めておこう。
フロントエンド側の開発、終了！
これで私としては今の実装でフロントエンド側の見た目の不満点は全て解消できた。ようやくコンテンツの整備に入ることができる。
他の数ピクセルの余白調整など些末なことだ。誰得か？そういうところに入っていくと時間が無限に溶ける。なので見た目にこだわるのはこの辺で終了だ。
長い、長い、とてつもなく長かった。結局1ヶ月と少々かかっている。だが満足だ。目立って不満な点もかなり減った。
後は色分けした方が利便性が高まるなどの「実用性重視」のフロント開発はすると思うが、レイアウト調整は多分これでいったん終了だ。
長かった……。
もうWordPress沼は終わりにしたい。コンテンツ、中身の開発に入りたい。
仕組みが整ったからこそ、モチベーションが高まる！
実はこれが重要で、必死に生み出したコンテンツをしっかりと受け止められて、しかもメンテもできて、後々にコンテンツの価値を高められる「熟成させるための機構」があるかどうかがとても重要なのだ。
今までの私にはそれがなくて、前だけ見て突っ走った結果、うしろには「価値あると信じたガラクタ」が積み上がっていた。
これではいけない。これからは生み出したコンテンツのケアが重要だ。
だがどうやって？これを仕組みとして、Webサイトという器を使って管理するための仕組み作りを1ヶ月かけてついに実現できた。特に昨日の「サブカテゴリの自動生成メニュー」、これの功績がとても大きい。
閉じたメニュー、開いたメニュー
というのも、メインカテゴリはページを読み込むと常に閉じている。
（設定すれば逆に常に開くこともできる。だがカテゴリは時間と共に増大する。必然。それを常にオープンにしていては読む側が辟易する。）
なのでメインカテゴリは閉じた状態をデフォルトとした。
例えばRetopoFlowの使い方を読みたいユーザーが毎回「サブカテゴリーを見るためにプチプチプチ……とメインカテゴリのくの字ボタンを押したいか？」Noである。これだ。
視点の違い、構造の違い。
管理者側の管理のしやすい仕組みと、閲覧者側のアクセスしやすい仕組みは、実はイコールじゃない。
ここに気付いたからこそ、1ヶ月かけてWebサイトのアクセシビリティ向上にこだわってきた。
情報のマスキングへのこだわり
なので管理者＝執筆者としては網羅したいけれど、見せたい人にしか見せたくない、こういう矛盾が生まれる。なのでメインカテゴリは普段は閉じているが、必要な人はクリックして展開すればいい。
そして特定のカテゴリ、つまりマガジン読者については何もしなくてもそのカテゴリのサブメニューを常時表示させることで「ワンクリックの手間」を軽減できるわけだ。
この矛盾する2つの「カテゴリ表示機能」が欲しかったのだ😍それが手に入った。長かった……。しかもサブメニューの自動生成。もう完璧だ。PHPソース109行分の威力をこれから味わいたい。
Webサイトのフロントエンド、開発終了！
今日でいったん終了です。お疲れさまでした自分！よくやったわぁ～。
The 気合いと根性だ。
なにせ右も左も分からん状態からのスタート。
PHPって何ですか？レベルからのスタート。
だがなんとか理想に辿り着けた。
今日の成果物はこちら。
そろそろ生活を朝型に戻したいです🍺
今回の創作活動は約6時間30分（累積 約3,541時間）
（966回目のnote更新）
読んでくれてありがとう。気長にマイペースに書いてます。この出会いに感謝😊