再び、記事一覧のデザイン変更
はじめに
11:58:45
昨日、codexとこちらのブログのデザイン変更を行った
https://github.com/ki-hi-ro/ki-hi-ro.com-2022/commit/cb10110f9e1f606dc23158af8846e30914f2f609
トップの記事一覧を雑誌風にしてもらったが、
朝起きてみてみたら、元の丸いデザインの方がいいなと直感的に思った
codexにチャッピーに以前作ってもらったデザインを提示する
AIプログラマーのcodexにAIコンサルタントのチャッピーからもらった以下のデザインを提示して修正してもらおう
記事一覧へ戻るは不要
年月などのテイストもそれに合わせてもらおう
せっかくなのでチャッピーにcodexへの指示書を作成してもらう
優秀なAIコンサルタントの力を借りよう
ブログ「ki-hi-ro.com」の記事一覧デザインを修正してください。
昨日、トップの記事一覧を雑誌風のデザインに変更しましたが、
実際に朝見返してみると、以前チャッピーに提案してもらった
丸みのあるカード型デザインの方が、自分のブログには合っていると感じました。
そのため、添付画像のデザインを参考にして、
記事一覧ページの見た目を修正してください。
やりたいことは以下です。
1. 記事一覧をカード型デザインに戻す
- 白背景のカード
- 角丸
- 軽い影
- 余白をしっかり取る
- 全体的に柔らかく、読みやすい印象にする
2. 各記事カードの構成
- 左側に投稿日
- その下に更新日
- 中央〜右側に記事タイトル
- 可能であればカテゴリやタグを小さなラベルとして表示
- 右端に「>」や矢印アイコンを配置
- hover時は少し浮く、または背景がわずかに変化する程度にする
3. 「記事一覧へ戻る」は不要
一覧ページ内に表示されている「記事一覧へ戻る」ボタンは削除してください。
4. 年月アーカイブのデザインも合わせる
年月アーカイブも、現在の線だけのシンプルな見た目ではなく、
記事一覧カードと同じトーンに寄せてください。
具体的には、
- 余白を広めにする
- 角丸や淡い背景を使う
- 年と月の階層が分かりやすい
- クリックできる項目はhover時に自然な変化をつける
- 全体としてトップの記事一覧と統一感を出す
5. 全体の方向性
雑誌風というより、
「技術ブログだけど、個人の日記や人生の記録としても読みやすい」
という雰囲気にしたいです。
デザインの印象は、
- やわらかい
- 余白がある
- 清潔感がある
- 少しポートフォリオ感がある
- ブログ資産が整理されて見える
この方向で、既存のWordPressテーマの構造を壊さずに、
必要なテンプレートファイルとCSSを修正してください。
修正後、どのファイルを変更したか、
どのCSSが記事一覧・年月アーカイブに対応しているかも説明してください。
昨日、復活させたMAMPの開発環境でデザインの確認を行う
昨日、以下の記事でMAMPが起動できなくなっていた問題を解消した
ここでデザインの確認を行ってから本番環境に上げよう
AIの出した答えらしきものを自分の感情的な納得感と照らし合わせることが大事
AIの出した答えを評価するという作業がとても大事
AIは答えらしきものは出してくれるが、本当に自分の心の琴線に触れるものかどうかまでは、最終的には自分が判断しなければならない
判断というよりも、感情が納得しているかどうかである
デザイン確認 ー いい感じなのでは？ ー
細かい調整 ー 気になった点 ー
自分はHSP気質があるので、細かいところまで気になってしまう
その特徴をプラスに活かしていこう
hover時に他のタグなどと同じように浮き上がるようにしたい
My blog, my life 以外にも検討しよう
目次でクリックできる範囲を全幅にして欲しい。あと、要素の間隔をもう少し狭くして欲しい。
優秀なAIコンサルタントにAIプログラマーへの指示書を書いてもらう意義
チャッピーに再び指示書を作成してもらう
追加で、細かいデザイン調整をお願いします。
自分は細かいところが気になりやすい性格ですが、
その感覚をブログの品質改善に活かしたいです。
以下の点を修正してください。
1. ランダム記事カードのhover調整
サイドバーの「ランダム」に表示されているカードについて、
hover時に他のタグやカードと同じように、少し浮き上がる動きにしてください。
具体的には、
- transform: translateY(-2px) 程度
- box-shadowを少し強める
- transitionを自然につける
- hover時にテキストだけが変化しすぎないようにする
既存のタグやカードのhover表現とトーンを合わせてください。
2. トップコピーの再検討
現在のトップコピーは、
My blog, my life
自分 × 何か, 自分の心のコップを満たす
ですが、これ以外の案も検討したいです。
ブログの方向性は、
- 技術ブログ
- 人生の記録
- 思考の整理
- フリーランスへの過程
- 自分の感覚を言語化する場所
です。
この方向性に合うトップコピー案をいくつか提案してください。
英語、日本語、英語＋日本語の組み合わせで出してください。
3. 目次のクリック範囲を全幅にする
記事内の目次について、
各項目のクリックできる範囲を横幅いっぱいに広げてください。
現在はテキスト部分だけがクリック範囲になっているように見えるため、
ユーザーが押しやすいように、liまたはaタグ全体をクリック可能にしてください。
4. 目次の要素間隔を少し狭くする
目次内の項目同士の余白が少し広く感じます。
以下の方向で調整してください。
- 各項目の上下paddingを少し小さくする
- 余白を詰めすぎず、読みやすさは残す
- スマホでも押しやすい最低限の高さは確保する
5. 全体のトーン
今回の修正は大きなデザイン変更ではなく、
細部の質感を整える調整です。
目指したい印象は、
- 触ったときに自然
- クリックできる場所が分かりやすい
- 余白が整っている
- 他のパーツとhover表現が統一されている
- 個人ブログらしい柔らかさがある
修正後、変更したCSSセレクタと、どの部分に効いているかを説明してください。自分でcodexに指示するのとは全然違う
自分で指示すると、マイクロマネジメントになってしまう
codexは優秀なので、細かく指示するよりも、目的を与えて、自律的に動いてもらった方が、アウトプットの質が高くなる
自分の意思決定エネルギーも温存できる
細かい調整の内容
テキストはこちらの要望通り、hover時に浮き上がった
記事内目次がテキストをクリックしないとクリックできないままになっている
スマホは全幅リンクになっていた
トップコピー案
以下を選択した
Code, Thought, Life
技術と思考と人生を、自分の言葉で整理する。もう十分 ー 先に進もう ー
ブログのデザインはこれくらいにして、もっと価値のあることに自分の時間を使おう
GitHubにプッシュする
これは、自分の頭で考えることを放棄しているわけではなく、自分の頭のリソースを無駄遣いしないための戦略
自分の中の引き出しを増やすという目的もある
どうしても気になる部分
PCの目次のクリック領域を幅100%にしたい
事情があって、前回の対象から漏れていたようだ
ドキドキしながら結果を確認する
素晴らしい
This is what I wanted
AIは自分の認知の限界を越えなければ強力なサポーターになる
AIに思考を奪われてはいけない
自分の思考があるからこそ、AIに適切なプロンプトを投げることができる
自分の思考を研ぎ澄ませるために、Apple Watchのタイマー機能で10分測って自分にタイムプレッシャーを与えて本質的な課題に目を向けさせたりしている
タイマーが鳴ったら、席を立って、好きな音楽を聴きながら体を動かしている
体が動けば、頭が動く
13:20:35
修正内容に満足したので、GitHubにプッシュした
GitHub ActionsというCIが走っている
GitHub Actionsに失敗
失敗した
詳細確認
タイムアウトのようだ
自宅のWi-Fiが「KATCH」というものだが、
数秒ネット接続が切れることが、去年から頻繁に起こっている
これは今後、リモートで働く時に、Web会議で支障が出るので、対処していきたい
失敗したジョブを再開するという意味の「Re-run failed jobs」をクリックする
成功した
こちらの本番環境に反映されていることが確認できた
目次を修正したい
こうなってしまっている
ローカルではこの崩れは起こっていない
これは、WordPressプラグインの「Easy Table Contents」の設定が影響しているだろう
DBはローカルと本番で生合成が取れていない
再び、優秀なAIコンサルタントに相談
優秀なAIコンサルタントに相談した
WordPressの記事内目次の表示崩れを修正してください。
現在、本番環境で記事内の目次が崩れています。
現象は以下です。
- 目次項目の前に「-」だけの行が表示されている
- 目次項目の背景が横長のグレー帯になっている
- 本来の目次リストとして見えない
- 階層構造や余白も不自然になっている
- ローカル環境ではこの崩れは起きていない
本番環境では WordPressプラグイン「Easy Table Contents」が影響している可能性があります。
やりたいことは以下です。
1. Easy Table Contents の出力構造を前提にCSSを調整する
以下のようなセレクタを確認してください。
- #ez-toc-container
- .ez-toc-list
- .ez-toc-list li
- .ez-toc-link
- .ez-toc-heading-level-2
- .ez-toc-heading-level-3
プラグインが出力するul/li/a構造に対して、
テーマ側CSSが過剰に効いていないか確認してください。
2. 「-」だけの行を出さない
目次項目の前に不要なハイフンが表示されています。
原因として、
- li::before
- a::before
- list-style
- テーマ側の汎用リスト装飾
- 記事本文用CSSが目次にも適用されている
などが考えられます。
Easy Table Contents内では不要な疑似要素やリスト装飾を無効化してください。
3. 目次項目のクリック範囲を全幅にする
各目次項目は、テキスト部分だけでなく横幅全体をクリックしやすくしてください。
- .ez-toc-link を display: block; にする
- paddingを設定する
- hover時に自然に背景が変わるようにする
4. 目次の間隔を整える
現在は余白が大きく、見た目が間延びしています。
以下の方向で調整してください。
- li同士の余白を少し狭くする
- aタグの上下paddingを適度にする
- スマホでも押しやすい高さは残す
- 見出しレベルごとのインデントを自然にする
5. 目次全体の見た目
目次は記事本文の補助要素なので、主張しすぎない見た目にしてください。
希望する方向性は以下です。
- 白または淡いグレー背景
- 角丸
- 控えめなborder
- 余白は整える
- hover時だけ少し背景が変わる
- 記事本文のh2/h3デザインとは混ざらないようにする
6. 本番とローカルの差分確認
ローカルでは崩れていないため、本番のEasy Table Contents設定や出力HTMLと、
ローカルの出力HTMLに差分がある可能性があります。
以下を確認してください。
- 本番で出力されている目次HTML
- ローカルで出力されている目次HTML
- Easy Table Contentsの設定差分
- テーマCSSが本番だけで効いている箇所
- キャッシュの影響
7. 修正方針
プラグイン本体は直接編集せず、
テーマ側のCSSで上書きしてください。
必要であれば、Easy Table Contents専用のCSSブロックを追加してください。
例：
#ez-toc-container {
...
}
#ez-toc-container ul,
#ez-toc-container li {
...
}
#ez-toc-container a {
...
}
8. 修正後に確認したいこと
修正後、以下を確認してください。
- 目次前の「-」が消えている
- 目次項目がリストとして自然に見える
- クリック範囲が横幅いっぱいになっている
- hover時に自然な変化がある
- h2/h3など本文見出しのデザインに影響していない
- スマホ表示でも崩れていない
変更したファイル、追加・修正したCSSセレクタ、原因として考えられる点も説明してください。
チャッピー → 自分 → codex というようなサイクルを回していこう
codexにやってもらったこと
可能な範囲で本番 / ローカルの差分を確認してくれた
本番の崩れ原因の特定と、CSS修正を行ってくれた
cyberbuckで本番反映して確認してみる
修正してもらった「assets/css/single.css」を本番反映して表示を確かめる
思っていたのと違う
PCでは、目次のデザイン自体が変わってしまった（これはこれでいいか？いや、下の余白が広すぎる）
スマホの目次は消えていた
違和感を即座に言語化する
AI時代では、何となくの違和感をいかに素早く言語化できるかどうかが勝負となる
目次デザインの修正について、意図と違う結果になっているため再調整をお願いします。
現在の状態は以下です。
1. PC表示
- 目次のデザイン自体が大きく変わってしまった
- これはこれで悪くないが、下の余白が広すぎる
- 目次ボックスの高さが必要以上に大きく見える
- 目次の中身とボックス下部の間に空白がありすぎる
2. スマホ表示
- 目次が表示されなくなっている
- スマホでも目次は表示したい
- PCと同じように、記事上部で自然に使える状態にしたい
今回やりたいことは、
「目次デザインを完全に作り替える」ことではなく、
Easy Table Contentsの崩れを直しつつ、自然に見えるように整えることです。
具体的には以下をお願いします。
- PCでもスマホでも目次を表示する
- 目次ボックス下部の余白を詰める
- 目次全体のpadding / marginを見直す
- 目次リストの最後のliやulに不要なmargin-bottomが付いていないか確認する
- #ez-toc-container、.ez-toc-list、.ez-toc-list li、.ez-toc-link 周辺のCSSを確認する
- スマホ用メディアクエリで display: none; になっていないか確認する
- Easy Table Contentsの出力HTMLに対して、テーマCSSが過剰に効いていないか確認する
修正の方向性は以下です。
- 目次は記事本文の補助要素として、主張しすぎない
- 余白はあるが、間延びしない
- クリックしやすい
- PCとスマホで同じ思想のデザインにする
- スマホで非表示にしない
- 本文見出しや通常のリストには影響させない
確認してほしいこと。
- PCで目次下部の余白が広すぎないこと
- スマホで目次が表示されること
- 目次項目のクリック範囲が自然であること
- Easy Table Contents以外のリスト表示に影響していないこと
- キャッシュの影響がないか確認すること
補足として、
AI時代では、何となくの違和感をいかに素早く言語化できるかが重要だと感じています。
今回の違和感は、
「崩れは直ったが、目次の余白とスマホ表示が意図と違う」
という点です。
この前提で再修正してください。「違和感の切り分けがかなり正確です」と優秀なAIエンジニアに褒められた
再調整完了
妥協して前に進む
PCが当初のデザインではないが、これでひとまずOK
スマホの目次は消えている
でも、もっと重要なことに時間を割くために、先に進もう
13:58:30
時間は止まらない、だから、自分も止まらない
でも、突破口が見つかりそう
ローカルのスマホでは目次は表示されている
PCの目次デザインは当初のイメージとは少し違いますが、ひとまずOKとします。
ただし、スマホの本番環境で目次が消えている点は気になります。
一方で、ローカルのスマホ表示では目次が表示されています。
そのため、テーマCSSだけでなく、以下の可能性を確認してください。
- 本番環境のキャッシュ
- Easy Table Contentsの本番設定
- 本番とローカルのプラグイン設定差
突破口なんて存在しない ー 一歩一歩進んでいく ー
「スマホ目次は表示される状態になっている」とのこと
残された可能性
現時点では、スマホ端末側に旧CSSまたは旧HTMLが残っている可能性が最も高いです。プライベートブラウズで確認し、表示される場合はSafari／Chromeのサイトデータを削除してください。それでも消える場合
それでも消える場合は、現象が起きている記事URLを教えてください。記事単位の目次無効化や見出し数条件を確認できます。
確認ありがとうございます。
「スマホ目次は表示される状態になっている」とのこと、理解しました。
現時点では、テーマCSSや本番サーバー側ではなく、
スマホ端末側に旧CSSまたは旧HTMLが残っている可能性が高いという認識です。
まずはこちらで以下を確認します。
- スマホのプライベートブラウズで表示確認
- Safari / Chrome のサイトデータ削除
- キャッシュ削除後の再読み込み
- 別ブラウザでの確認
それでも目次が消える場合は、
現象が起きている記事URLを共有します。
その場合は、
- 記事単位で目次が無効化されていないか
- 見出し数条件を満たしているか
- Easy Table of Contents の記事別設定
- 該当記事のHTML出力
を確認してください。
スマホのプライベートブラウズで表示確認
表示された
下書き状態だと表示されていなかっただけかもしれない
下書き
公開後
下書きでもPCでは表示されている
公開してみたら、今の記事はスマホで目次が表示されていなくて、 過去の記事は表示されています
追加確認です。
公開後に確認したところ、過去記事ではスマホでも目次が表示されています。
しかし、今回公開した記事だけ、スマホで目次が表示されていません。
そのため、サイト全体のCSS不具合というより、
今回の記事固有の条件、または今回の変更が特定の記事にだけ影響している可能性があります。
以下を確認してください。
1. 今回の記事で Easy Table of Contents の表示条件を満たしているか
- h2 / h3 見出しが十分な数あるか
- 目次表示に必要な最小見出し数を満たしているか
- 見出しが通常の段落や太字になっていないか
2. 記事個別設定
- この記事だけ目次が無効化されていないか
- 投稿編集画面の Easy Table of Contents 設定を確認
3. スマホ表示のCSS
- 今回追加・修正したCSSで、特定の目次だけ display: none になっていないか
- @media max-width 内の #ez-toc-container 周辺を確認
- PCでは表示されるがスマホだけ消える条件がないか
4. 過去記事との差分
スマホで目次が表示される過去記事と、
今回の記事のHTMLを比較してください。
特に以下を比較してください。
- #ez-toc-container がHTMLに存在するか
- .ez-toc-list が存在するか
- 見出し数
- body class
- 投稿タイプ
- 記事個別のEasy Table of Contents設定
- CSSの適用差分
5. 結論を出す
今回の変更によるCSS影響なのか、
記事固有のEasy Table of Contents条件なのか、
切り分けてください。
プラグイン本体は編集せず、必要であればテーマCSS側で調整してください。
最新記事固有の「本文目次の自動挿入」が無効になっている可能性が極めて高い ー 原因はCSSではない ー
原因はCSSではなく、最新記事固有の「本文目次の自動挿入」が無効になっている可能性が極めて高いです。
WordPressをバージョンアップしたことも影響しているかもしれない
先ほどの最有力仮説は外れました ー Next actionへ ー
こちらが真の原因
この記事本文には、今回のやり取りとして文字列 #ez-toc-container が複数回そのまま掲載されています。Easy Table of Contents 2.0.31.1は本文中に ez-toc-container という文字列があるだけで「目次は既に挿入済み」と判定し、自動挿入を中止します。
本文中に「#ez-toc-container」があるのがダメだったみたい
content.phpを修正してくれた
問題が解決した
cyberduckで本番アップして確かめてみる
素晴らしい。問題が解決している。
別の問題を発見 ー スマホで横揺れ発生 ー
目次の問題が解決したことは、まだ伝えていなかった
伝えよう
スマホ表示の横揺れについて調査をお願いします。
最初は目次まわりが原因かと思っていましたが、
画面を見ていると、目次そのものではなく、
別の要素がスマホ幅をはみ出している可能性があるように感じています。
そのため、#ez-toc-container だけに絞らず、
ページ全体から横スクロールの原因要素を特定してください。
確認してほしいことは以下です。
1. スマホ幅で横スクロールが発生する原因要素の特定
Chrome DevToolsのスマホ表示で、
以下を確認してください。
document.documentElement.scrollWidth
document.documentElement.clientWidth
scrollWidth が clientWidth より大きい場合、
どの要素が画面幅を超えているかを特定してください。
2. 原因候補を広く確認
特に以下を確認してください。
- 記事内画像
- figure / img
- iframe
- pre / code
- table
- URLなどの長い文字列
- WordPressの画像ブロック
- Easy Table of Contents
- サイドバー目次
- ランダム記事カード
- 関連記事カード
- コメントフォーム
- 投稿本文全体のwrapper
- .entry-content
- .article-content
- main
- body直下のコンテナ
3. CSSの確認ポイント
以下の指定が、スマホ幅で悪さをしていないか確認してください。
- width: 100vw
- min-width
- max-widthの指定漏れ
- 固定width
- margin-left / margin-right
- padding込みで100%を超えている指定
- transformによるはみ出し
- white-space: nowrap
- overflowの指定
- box-sizing: content-box
4. 修正方針
bodyやhtmlに overflow-x: hidden; を入れて無理やり隠すのではなく、
まずは原因要素を特定してください。
原因要素が分かったうえで、
必要であれば以下のような方向で修正してください。
- max-width: 100%;
- box-sizing: border-box;
- overflow-wrap: anywhere;
- word-break: break-word;
- img, iframe, table のレスポンシブ対応
- pre/code の横スクロール対応
- スマホ時のpadding調整
5. 目次は原因候補の一つとして見る
目次も確認対象には含めてください。
ただし、今回の違和感としては、
目次そのものが原因というより、
ページ内の別要素が横幅を押し広げている可能性があると感じています。
6. 調査結果としてほしいもの
修正前に、まず以下を教えてください。
- 横スクロールが発生しているか
- scrollWidth と clientWidth の差
- はみ出している要素のセレクタ
- 何px程度はみ出しているか
- 原因CSS
- 修正案
そのうえで、必要最小限のCSS修正を行ってください。
7. 確認条件
修正後、以下を確認してください。
- スマホ幅375px〜430pxで横スクロールが発生しない
- PC表示に悪影響がない
- 記事内画像が画面幅内に収まる
- 長いURLやコードがレイアウトを壊さない
- 目次、サイドバー、コメントフォームに影響がない
今回の目的は、
「目次の見た目を直すこと」ではなく、
スマホ表示でページ全体が横に揺れる根本原因を特定して直すことです。コメント欄の#commentが主原因候補
修正してもらったsingle.cssを本番にアップして確認する
同じ結果だった
次の主有力原因候補は、記事内リンクコンテンツ
横揺れが発生しているスマホ画面を下にスクロールしていくと、以下のコンテンツが表示された瞬間にぴたりと横揺れがしなくなる
こちらが生成されるまでの空白が横に広がっている可能性がある
今回は、codexに直接伝えた
実際の人間関係でも、Aさんに相談せずに、Bさんに相談した方が早いということがあるはずだ
無事、別の問題も解決した
修正してもらった single.css を本番にアップしたら、最初から横揺れが発生しなくなっていた
最後の仕上げ
目次が長くなりすぎた時の、ページ内トップリンクとの余白を調整してもらおう
意図が伝えられていなかったので、プロンプトを修正した
現状は変わっていなかったが、
これは別の機会に修正しよう
15:02:34
コメントを残す