今回はブログ記事の中にボタンを作る方法についてChatGPTに聞いてみました。
前提条件：
- WordPressを使用しているブログ
- ブログに使用しているテーマはcocoonを使用
ブログ記事の中にボタンを入れたいとChatGPTに訊いた
以下のようなプロンプトを入れました。
cocoonでボタンを作成する方法は？
チャットGPTの回答
以下の様な丁寧な回答を何パターンか出してくれました。
Cocoon（WordPressテーマ）でボタンを作成する方法は、とてもシンプルです！
以下の3つの方法のどれかを選べばOKです👇
方法1：ビジュアルエディターの「スタイル」から作成（初心者向け）
| 手順 | 内容 |
|---|---|
| 1 | 投稿編集画面を「ビジュアル」モードにする |
| 2 | リンクさせたい文字を選択する（例：「詳細はこちら」など） |
| 3 | 上部メニューの「スタイル」→「ボタン」から好きなボタンタイプを選ぶ |
| 4 | 完了！プレビューでボタン表示を確認してね |
ポイント：色付きボタンや枠だけのボタンなど、Cocoonが用意してるデザインを簡単に適用できます。
方法2：ショートコードを使う（カスタマイズしたい人向け）
[btn class="btn-red"]ボタンテキスト[/btn]
| パラメーター | 意味 |
|---|---|
class | ボタンの色や形を指定（例：btn-red, btn-blue, btn-border など） |
| ボタンテキスト | 表示される文字（自由に変更OK） |
使用例：
[btn class="btn-blue"]詳しくはこちら[/btn]
※URLをリンクさせたいときは、下記のように書くよ👇
[btn class="btn-blue" url="https://example.com"]詳しくはこちら[/btn]
方法3：HTMLを直接書く（自由度MAX）
<a class="btn btn-blue" href="https://example.com">詳しくはこちら</a>
| メリット | デメリット |
|---|---|
| 自由にカスタマイズできる | コードの知識が少し必要 |
Cocoonのボタン色クラス一覧（一部）
| クラス名 | 色のイメージ |
|---|---|
btn-red | 赤 |
btn-blue | 青 |
btn-green | 緑 |
btn-yellow | 黄色 |
btn-border | 枠だけのボタン（透明背景） |
まとめ
| 使い方 | おすすめする人 |
|---|---|
| 方法1（ビジュアル） | 初心者・楽したい人 |
| 方法2（ショートコード） | 少しだけカスタマイズしたい人 |
| 方法3（HTML） | 完全に自分好みにしたい人 |
どの方法でもCocoonのボタンは見栄えよくて、クリック率アップにも役立ちますよ！
「こういうデザインにしたい！」って希望があれば、それに合ったコードも一緒に出せるので気軽に聞いてね。
