ブログのトップページってカスタマイズ機能が豊富だし、人によって答えが違うし、一生悩みますよね。
このブログのトップページも初心者なりに少しずつ改装し続けています。
ブログに来てくれた方が、もっと見やすく、もっと素早く記事を探せるように……と試行錯誤していると数時間経ってます（笑）
ただ問題がひとつ。
カスタマイズって拘り過ぎると、テーマが用意してくれている選択肢じゃ満足できなくなりますよね。
私の場合は、最初にカテゴリ別のページに飛ぶメニューをこれにしていたんですけど、気に入らなくなりました。
なんか字が小さくない？幅も狭くない？ってかここだけ文字が黒いの気持ち悪くない？といった具合です。
改善すべくググること３分。
HTML、CSS……ウッ頭が……。
イヤッイヤッ勉強したくない！もっと楽に思い通りのカスタマイズしたい！
そしてふと気付きます。
私、ChatGPTヘビーユーザーじゃん……？
Notionで記録オタクもやってるので、ちょっとだけ楽できるような仕組みを普段から作ってるんです……ChatGPTが。
(それについても近いうち記事にします)
そのノリでHTMLもCSSもぜったい書けるじゃんと爆速でChatGPTを立ち上げました。
ねぇねぇねぇねぇブログのトップページのバナーの下にさ、各カテゴリに飛べるようにボタン設置したいの。どうしたらいい？？？？
プロンプトの理想の書き方とか意識せずに雑談感覚で聞いてみて、紆余曲折を経てできあがったのがこちら。
可愛い～～～！めっちゃ理想通り！！
大まかにボタン作ってもらってから、細かいところを微修正していく流れで簡単にできました。
もしかしたらその細かいやり方とか需要あるかな？と思ったので解説してみます。
私の行った雑談の入りよりもちゃんと効率よく理想のボタンに辿り着ける！はず！
目次
ChatGPTにボタンを最短で作ってもらう方法
理想のボタンを考える
他の人のボタンを見てみる
理想のボタンといっても、まずどんなボタンが存在するのかを知らないと何も考えられませんよね。
理想のボタン探しは主に2つの方法があります。
ひとつめは、コードも公開されているボタンデザインを紹介されているサイトで研究する方法。
例えばこことか。
ふたつめは、お気に入りの他の方のブログを見に行って、どんなボタンの使われ方をしているか研究する方法。
おすすめはひとつめの方法でボタンの種類をざっくりと把握し、ふたつめの方法で各ボタンの効果的な使い方を考えながら研究することです。
ほどほどにやったら理想のボタンを考え始めましょう！
とりあえず図で書いてみる
ボタンをどこに置いて、どんな色や形にして、どうやって配置して、どんな動作をつけたいか、自由に発想しましょう。
その辺の裏紙でいいので、カスタマイズしたい範囲を書き出してみてください。
めっちゃざっくりで大丈夫です。
……こんなレベルでOK。
理想を言葉にしてみる
図をチラ見しながらこんな感じでメモに起こします。
「1. 色とスタイル
- 背景色（例:
#e0d59b） - 文字色（例: 白
#ffffff） - ボタンに影をつけるかどうか（例: ボタンに少し立体感を出す）
- ホバー(カーソルを合わせる)時の色の変化（例: 少し濃い色に変わる）
- ボーダー（例: 太さ・色・有無）
2. 形状
- 角の丸み（例: 丸みを強調する
border-radius: 10px;） - サイズ感（例: 幅200px、高さ50pxなど）
- アイコンの有無（ボタン内にアイコンを入れるか）
3. 配置と間隔
- ボタン同士の間隔（例: 10pxの隙間を空ける）
- 親カテゴリとサブカテゴリの位置関係（例: 親カテゴリの下にサブカテゴリが出現）
4. 動作
- ホバー時の挙動（例: サブカテゴリがアニメーションで出てくる）
- クリック時のエフェクト（例: 少し凹むようなエフェクト）
- サブカテゴリが閉じる条件（例: カーソルを外したら自動で閉じる）
5. テキスト
- フォントサイズと種類（例: 見やすいシンプルなフォント
font-family: Arial;） - 文字の中央揃え（例: 縦横中央揃え）
- 太字や斜体（例: 親カテゴリは太字、サブカテゴリは普通の文字）
6. アニメーション（オプション）
アニメーションの速度（例: 0.3秒で滑らかに表示）
アニメーションの種類（例: フェードイン、スライドダウン）
理想のボタンを伝える
メモを要件のところにコピペして、ChatGPTに投げます。
「ワードプレスのブログのトップページに、カテゴリごとのリンクボタンを並べたいので、HTMLとCSSを使って以下の要件を満たすコードを生成して。
要件：ここにメモをいれる
具体的なHTMLとCSSのコードをセットで出力してほしい。」
仮で実装してみる
がっつり拘りたい方は既知かもしれませんが、一応コードを反映させる手順も書いておきます。
不要な方はこちらから次に進んでください。
※Diverの手順なので他のテーマの場合は違うかも。ググってください。
1. カスタマイズ画面を開く
WordPress管理画面から「外観」→「カスタマイズ」をクリック。
ウィジェットをクリック。
2. HTMLを反映させる
メインエリア上部→ウィジェットを追加→検索バーに「HTML」→カスタムHTMLをクリック。
ChatGPTが生成したHTMLコードをコピペします。
3. CSSを反映させる
「カスタマイズ」画面に戻って「追加CSS」をクリック。
中のテキストボックスにChatGPTが生成したCSSをコピペします。
これでボタンのプレビューが表示されるはずです。
細かい修正をひとつずつやる
一発で完璧なコードを出力してくれることは稀なので、あとは微調整していきましょう。
修正したいときのプロンプトはこんな感じで大丈夫です。
「さっきのHTMLとCSSコードに追加の要望があります。
要望：
- サブカテゴリがホバー時に出てくるメニューのデザインを、カード形式に変更してほしい。
- カードには影をつけて少し浮かび上がるようなデザインにして。
- サブカテゴリの横幅を、親カテゴリのボタンと同じ幅に揃えてほしい。
- サブカテゴリが等間隔で綺麗に並ぶようにしてほしい。
できれば、親カテゴリにカーソルを合わせた時にサブカテゴリが滑らかに出てくるアニメーションも加えてほしい。
この要望を反映した新しいHTMLとCSSをセットで出力して。」
出力された修正コードを、同じ手順でHTML、CSSごとに貼り付けて、デザインや動作をチェックして……という流れを納得がいくまで繰り返します。
まとめ
満足できる理想のカスタマイズはできましたか？
HTMLやCSSミリしらの状態でもここまで簡単にカスタマイズし放題なのはChatGPTの魅力ですよね。
これからもどんどん使い倒して理想のブログを作っていこうと思います。
お互い理想のページを(ChatGPTで)作れるようにがんばりましょう！
カスタマイズのヒントになれば幸いです！ではまた！
こちらの記事では”ガチ”でChatgptを使いこなす方法も紹介しています！
カスタマイズだけではなく、記事執筆なんかも手伝ってもらうためのヒントも詰まっているので、よろしければ併せてお読みください。
