箇条書の左右のインデント追加に6時間（WordPressとCSSの話）
（約 2,700文字の記事です。）
うん、ただ、ほんの少し、箇条書の左右にインデントを入れたかっただけなんだ……😭
Webサイトの見た目を少し整えたかっただけだったんだ。そして6時間。
今に至る。朝が来た。
Wordなら一瞬で終わるような作業を、6時間かけて実装した😭
それでもまぁ、今までWordPressに移行しても不満だったところを今回で改善できたので良しとする。
白背景の画像に枠を付ける
noteだと薄い細線が画像を囲ってくれた。だが私のWordPressの環境ではそんな工夫はなく。しょうがないので今までのブログ投稿ではプチプチと画像に影を付けるボタンを画像ごとに設定していた。
だが今回、noteからの大量の記事移植にあたり、何百枚の画像にWordPressの編集画面からいちいちセットしてられない。今日はひょんなタイミングでたまたま画像の枠のセット方法が分かったのでそれを実装した。CSSの出番である。
フロントエンド側をいじるにあたり、今度はCSSと格闘している。今日は6時間、CSSと戦っていた。
世の中には敵が多い。倒すべき敵が😱
実装後。
まぁ、noteユーザーなら見慣れたグレーの細線が無事に画像に出るようになりましたとさ。CSSで設定しているので各記事への操作は不要。
It's オートマティック。
まほろまてぃっく。
平成ノスタルジー。
さて、本題。
ただ、箇条書にインデントを付けたかっただけなんだ……
WordPressユーザーならご存じの通り、私はSwellという有料テーマを使っている。これ、とっても便利なのだが、ずっと不満があった。それは、箇条書しても「文字列の左側にインデントが入ってくれない」という問題。マイクロソフトのWordを使っていればすぐに入るあの左側の空間、これがSwellテーマでは自動で入ってくれない。
Before
箇条書の左右がピッタリ本文幅まで到達している。見栄えが悪い。もちろん理由も分かる。主にブロック分割時のリストの取り扱いでpaddingは問題になる。（玄人向けなので割愛。）
だがしかし！ごく普通の一般人にとっては、箇条書＝即、左側インデント、なのは常識なのだ！閲覧性で考えても明らかに必要な機能だ。だがそれがない。今までは妥協していたが、もう我慢できない。
『悪・即・斬』である。
……。
（少女祈祷中）
…………。
そしてその解決に6時間かかったのである。CSSとの格闘であった。
PHPでもしどろもどろで泥試合だったのに、今度はCSS……。
6時間後の結果。
After
本当はこの2倍ほどのインデントを入れたかったのだが、そうするとスマホでの見え方がかなり厳しくなる。かといってスマホ用のCSSに手を出すつもりもない。力尽きた😭 なのでテストとして全角1.5～2文字程度のインデントでテスト中。それでも何もないよりは大分マシ。（そもそもPCメインのサイトなのでどこまでスマホでの見栄えを考慮するかは今後の課題。）二兎を追うものは一兎も得ず。
なぜか目次までpaddingが入ってしまうから
そう、これ。最初は本文だけを見ていて「上手く行った」と思ったが、なぜか追尾目次にも無駄に余白が入ってしまうのだ😭これの解決のために5時間使った。どうやって目次だけにpaddingを入れないようにすればいいのか……。色々試行錯誤した結果、ようやく実装完了。たった10文字のコード開始命令だけで、完了できた。これがプログラミングの世界だ。
知識戦は残酷だ。無知に容赦ない。
だが勝ち取ってしまえば確実に動く。そうやってようやく「自分が欲しかった左右のインデント付きの箇条書」という自由の空が広がった。
うん、Wordならマウス操作ちょちょいのちょいで終わる作業なのに、ね。
動作確認用のiPhoneのChromeの不具合
こういう「2重の罠」によって問題がかなり複雑化する。iPhoneでサイトの動作をチェックしたら、いつまで経ってもロードが終わらない。もしかして手を入れたコードが悪さをしているのか？と思って別のスマホでチェックしたが問題なし。メインiPhoneだけがなぜかサイトリロードが終わらない。ロード9割でストップ。終わらない悪夢。
キャッシュ削除や履歴リセットをしてもダメ。だが別のiPhoneやAndroidではサクッと読込終了。どういうことだ？
結局はメインiPhoneのChrome設定の問題だったわけで。
検証中にメインiPhoneのChrome以外では問題なしだったので諦めても良かったのだが、これも何とか解決できた。ふぅ。
トラブルシュートの恐ろしさ＝∞だから
トラブルシュートの世界では、2x2＝4ではなくて8にも16にもなるのだ。これ、解決できたからこそドヤ顔で言えるのだが、解決できなければ32にも64
にも、無限にもなり得るのだ。これがトラブルシュートの恐ろしさ。
いつ諦めるか、諦めなければ解決できるのか。その保証はどこにもない。誰も何もしてくれない。頑張った努力も、報われるとは限らない。
努力は、報われないこともある。それが挑戦。
努力が報われる保証など、どこにもない。無駄な努力だって、世の中にはたくさんある。だからこそ「盲目的に、思考停止での努力」は全くおすすめしない。考えて行動し、フィードバックを次のトライアルに活かす。そうやってバグを潰してようやく成果が手に入る「かも」しれない。だが蓋を開けてみれば「全くの無駄」だったかも知れない。ハイリスク・ハイリターン。それが挑戦。
挑戦の結果は、誰も保証してくれない。
サハラ砂漠の蜃気楼の先には、生きて辿り着けるオアシスはない（何十キロ先の彼方に、それはある）。歩むべき方向を間違えないことだ。絶望したくなければ。
というわけで今回は、地味～に時間がかかったが、WordPressに移行してからの不満をたくさん、ようやく改善できた。
他にも隣接する文字の隙間（字間）や行間などの細かい調整をしている。読者体験がますます「ごく普通」に近づいただけなので、ドヤ顔で伝えられることはない。noteっぽくなった、くらいかな😊
夜型が一周して朝型になりそうです。乾杯☕
今回の創作活動は約6時間30分（累積 約3,469時間）
（953回目のnote更新）
いいなと思ったら応援しよう！
