CSSはAIにおまかせ!アーカイブページのレイアウト崩れを一瞬で解決した話

2025年05月24日
🏷 タグ: wordpress, ChatGPT, css

こんにちは、ダンシングポノ制作のニーダです!

今回は「CSSレイアウトの崩れをAIで解決した実例」をご紹介します。
実は、このスタッフブログのアーカイブページでちょっとした問題が起きていました。


💡 そもそもアーカイブページって?

WordPressでは、カテゴリー別、タグ別、著者別などの一覧ページを「アーカイブページ」と呼びます。
例えば「最新情報」や「感動ダンス動画」などのジャンルをクリックしたときに出てくる記事一覧がそれです。

このページはとても大事な役割を果たしています。
でも、見た目が崩れてしまっては台無し…!


🧩 レイアウト崩れが起きた!

ある日、スマホで確認したところ…
このスタッフブログの「一覧の表示がぐちゃぐちゃ」 に。

スマホでの表示確認してませんでした。。。。

記事が縦に並ばず、幅もバラバラ。まさに崩壊状態。
こんなとき、私はスマホでスクショ📷を撮って、ChatGPTに送ってみました。

スタッフブログ アーカイブページの表示崩れ

🤖 AIに聞いてみた!

ChatGPTには、「カード型にしたい」と伝えるだけ。
さらに、

  • Safariであれば「該当部分を右クリック → 要素の詳細を表示」
  • Chromeなら「右クリック → 検証」

でHTMLソースを表示して、ChatGPTコピーして送るとより正確に対応してくれます。

すると、AIはすぐに以下のようなCSSを提案してくれました:

```css
.ArchiveCardList {
display: flex;
flex-direction: column;
gap: 16px;
}
.ArchiveCard {
display: flex;
padding: 12px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

これを反映すると、あっという間に見た目が整いました。

スタッフブログ アーカイブ カードタイプcss変更後

🧭 でも、問題はそれだけじゃなかった…

後日、TOPページの最新情報の表示も崩れていることに気づきました。
調べてみると、同じ .ArchiveList というクラス名が共通で使われており、CSSが他の場所にも影響してしまったようです。

Topページ最新情報のレイアウト崩れ

🛠 解決方法もAIにおまかせ!

再度AIに相談すると、すぐに「親要素に専用クラスを追加して、スタイルを限定する方法」を提案してくれました。

レイアウトを整えた最新情報一覧


このように、たったちょっと工数でTOPページもスッキリ!


✅ 結論:CSSやレイアウトの相談はAIに聞くのが早い!

  • レイアウト崩れも、CSS調整も、AIが一瞬で提案してくれる
  • ソースを「検証」してコピペ → AIに貼り付けるだけ
  • 予想以上に速く、的確なアドバイスがもらえる

同じような悩みがある方は、ぜひAI × スクショ × 検証ツールを活用してみてください!


ニイダのプロフィール写真
       

この記事を書いた人|ニーダ

Dancing Pono(ダンシングポノ)の運営者。1998年にサルサに出会うのをきっかけにラテンのペアダンスを日本に拡めるよう活動中。ダンススタジオ運営やイベント企画・運用のかたわら、AIやweb・アプリ開発、動画編集、ラテンDJ、バーテンダーと多岐に渡る活動中。

2021年1月末にくも膜下出血で倒れるも奇跡的に後遺症もなく復帰。現在は人生のボーナスステージとして過ごしています。リハビリとしてはじめた太極拳、ロードバイクを趣味としています。太極拳では近所のおじいちゃん、おばあちゃんと健康のための太極拳、ロードバイクでは「極力体力を使わないでどこまで行けるか」の実験で、東京(荒川河口)-新潟(柏崎)を22時間などやったりしてます。

口コミをする(コメントする)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

🏷 タグ: wordpress, ChatGPT, css
zh-CNenfrjakoesth