「ボタンリンクや囲みボタンはどうやって作るの？」
「Cocoonでアフィリエイトリンクをボタン表示する方法を知りたい」
このような疑問をお持ちではないでしょうか。
ボタンリンクを活用すると、公式サイトや関連記事などへ読者を分かりやすく案内できます。また、囲みボタンを使えば、アフィリエイトリンクを見やすく設置することも可能です。
この記事では、ボタンリンクと囲みボタンの違いをはじめ、Cocoonでのボタンリンク・囲みボタンの作り方、クリックを促すマイクロテキストの設定方法、さらに囲みボタンでアフィリエイトを利用する際の注意点を詳しく解説します。
また、アフィリエイトリンクの利用ルールについて、A8.net・もしもアフィリエイト・afb・バリューコマースの4社へ実際に問い合わせた結果もまとめています。
すべて画像付きで分かりやすく解説していますので、ぜひ最後までご覧ください。
ボタンリンク・囲みボタンとは？
ボタンリンクとは？
ボタンリンクとは、URLを設定して指定したページへ読者を案内できるボタン型のリンクです。
公式サイトや関連記事など、読者に見てほしいページへ分かりやすく誘導できます。
私は、公式サイトのURLを設定して活用したりしています。
アフィリエイト案件がない場合でも、読者に役立つ情報へスムーズに案内できるため、利便性が向上します。
また、現在のタブでリンクを開く設定にしておくと、読者は戻るボタンで元の記事へ戻りやすくなります。そのため、必要な情報を確認したあとも、続けて記事を読んでもらいやすいというメリットがあります。
このような理由から、私は読者の利便性を高めるためにも、ボタンリンクを積極的に活用しています。
ボタンリンクだけでなく、文章中にリンクを設置するテキストリンクや、関連記事を見やすく紹介できるブログカードもおすすめです。詳しい設定方法はこちらの記事で解説しています。
囲みボタンとは？
囲みボタンとは、アフィリエイト広告の広告コードを設定して、広告主のページへ読者を案内できるボタン型のリンクです。
読者がボタンから商品やサービスのページへアクセスし、申し込みや購入などの成果が発生すると、アフィリエイト報酬を受け取ることができます。
そのため、紹介したい商品やサービスにアフィリエイト案件がある場合は、読者にも分かりやすく案内できる囲みボタンを活用するのがおすすめです。
私も、アフィリエイト案件がある記事では積極的に囲みボタンを利用しています。
ただし、ASPによっては広告コードの利用ルールが異なるため、利用する際には注意が必要です。
この記事の後半では、各ASPへ実際に問い合わせて確認した内容をもとに、囲みボタンを利用する際の注意点についても詳しく解説します。
ボタンリンクと囲みボタンの違い
ボタンリンクと囲みボタンの大きな違いは、設定するリンクの種類です。
- ボタンリンク：URLを設定して、公式サイトや関連記事などへ読者を案内します。
- 囲みボタン：アフィリエイト広告コードを設定して、広告主のページへ読者を案内します。
公式サイトや関連記事へリンクする場合はボタンリンク、アフィリエイト案件を紹介する場合は囲みボタンを使うのがおすすめです。
この記事では、それぞれの作り方と、アフィリエイトリンクを設定する際の注意点について詳しく解説します。
Cocoonでボタンリンクを作る方法（URLリンク）
URLを設定してボタンリンクを作成する
今回はafbの公式サイトへのボタンリンクを作ってみます。
まずは、afbの公式サイトへアクセスし、リンク先に設定したいページのURLをコピーします。
次に、WordPressの記事編集画面を開き、ボタンリンクを挿入したい場所で「＋」ボタンをクリックします。
検索窓に「ボタン」と入力し、「ボタン」ブロックを選択しましょう。
続いて、公開ボタンの左側にある「設定」をクリックし、URLの入力欄に先ほどコピーしたURLを貼り付けます。
リンクの開き方を設定する
リンク先は、現在のタブまたは新しいタブから選択できます。
- 現在のタブ：同じタブでページが開き、戻るボタンで前のページへ戻れます。
- 新しいタブ：別タブでページが開くため、元のページを開いたまま閲覧できます。
私は、スマホでも戻るボタンで戻りやすい現在のタブに設定しています。
配置を設定する
次に、ボタンの配置を設定します。
配置は次の3つから選択できます。
- 左寄せ
- 中央揃え
- 右寄せ
中央揃えが最も見やすく、おすすめです。
サイズ・デザインを設定する
続いて、ボタンサイズを設定します。
サイズは次の3種類から選択できます。
- 小
- 中
- 大
今回は中を選びました。
さらに、ボタンを円形にしたり、光るエフェクトを付けたりすることもできます。
幅とフォントサイズを設定する
ボタンの幅は、次の4種類から選択できます。
- 25％
- 50％
- 75％
- 100％
スマホではボタンが小さく表示されやすいため、私は100％に設定しています。
フォントサイズは次の4種類から選択できます。
- S
- M
- L
- XL
色を設定する
最後に、ボタンの色を設定しましょう。
設定できる色は次の3つです。
- 背景色
- 文字色
- ボーダー色
まずは背景色をクリックし、表示されたカラーパレットから好きな色を選択します。
続いて、文字色も同じように設定しましょう。
ボーダー色はボタンの枠線の色です。
設定しても問題ありませんが、私は背景色と同じ色にするか、設定しない方がすっきりしたデザインになると感じました。
初心者の方には、
- 背景色：濃い色
- 文字色：白
- ボーダー色：なし（または背景色と同じ色）
の組み合わせがおすすめです。
ボタンの文字を入力する
最後に、ボタンに表示する文字を入力します。
初期状態では「ボタン」と表示されているので、一度削除して好きな文字を入力しましょう。
今回は、「afbの公式サイト」と入力しました。
これでボタンリンクの完成です。
仕上がったボタンリンクはこちらです。
Cocoonで囲みボタンを作る方法（アフィリエイトリンク）
今回はafbの広告素材を使って、囲みボタンの作り方を解説します。
afbで広告コードを取得する
まずは、afbの公式サイトにアクセスし、広告コードを取得します。
afbの公式サイトはこちらまだ、afbに登録していない方は「afbの登録方法」をこちらの記事で解説しています。
広告の種類は「テキスト」を選択し、今回は「自由テキスト」を使用します。
広告コードを選択して、右クリックしてコピーしましょう。
広告コードを貼り付ける
次に、WordPressの記事編集画面を開き、囲みボタンを挿入したい場所で「＋」ボタンをクリックします。
検索窓に「ボタン」と入力し、「囲みボタン」ブロックを選択します。
続いて、「公開」ボタンの左側にある設定をクリックし、「リンクタグ・ショートコード」の欄にコピーした広告コードを貼り付けます。
自由テキストを変更する
広告コード内の「自由テキスト」と書かれている部分を、表示したい文字に変更します。今回は「afbの公式サイト」に変更しました。
囲みボタンのデザインを設定する
広告コードを設定したら、見やすいデザインに整えていきましょう。
まずは、ボタンの配置を設定します。
左寄せ・中央揃え・右寄せから選べますが、中央揃えが最も見やすくおすすめです。
続いて、ボタンサイズを小・中・大から選択します。今回は中を選びました。
さらに、ボタンを円形にしたり、光るエフェクトを付けたりすることもできます。
ボタンの幅は25％・50％・75％・100％から選択できます。
スマホではボタンが小さく見えやすいため、私は100％にしています。設定後は、必ずスマホ表示でも確認し、タップしやすい大きさになっているかチェックしましょう。
フォントサイズはS・M・L・XLから選択できます。
色を設定する
最後に、ボタンの色を設定します。
設定できるのは次の3つです。
- 背景色
- 文字色
- ボーダー色（枠線の色）
背景色をクリックするとカラーパレットが表示されるので、好きな色を選択できます。
マイクロテキストを設定する方法
マイクロテキストを設定すると、ボタンの上に補足メッセージを表示できます。
「公式サイトで無料登録する」や「30日間無料体験はこちら」などの一言を添えることで、ボタンの内容が伝わりやすくなります。
まずは、囲みボタンのすぐ上にある「＋」ボタンをクリックします。
検索窓に「マイクロテキスト」と入力し、「マイクロテキスト」ブロックを選択しましょう。
マイクロテキストの文字を入力する
ブロックを挿入すると、「マイクロコピーテキスト」と表示されます。
ボタンと見た目を揃えるため、中央揃えに設定しましょう。
次に、「マイクロコピーテキスト」の文字を削除し、表示したい文章を入力します。
今回は、＼ 公式サイトで無料登録する ／ と入力しました。
なお、「＼」や「／」を入力したい場合は、「スラッシュ」と入力すると変換できます。
マイクロテキストの位置を設定する
マイクロテキストブロックを選択した状態で、公開ボタンの左側にある「設定」をクリックします。
スタイル設定では、マイクロテキストの位置を「上寄り」または「下寄り」から選択できます。
今回は、ボタンとの間隔が近くなり見やすいため、「下寄り」のままに設定しました。
これで、マイクロテキストの設定は完了です。
完成した囲みボタン
仕上がった囲みボタンはこちらです。
以上で、Cocoonの囲みボタンの作り方は完了です。
アフィリエイトリンクを囲みボタンに設定するときの注意点
ASPごとに利用ルールが異なる
アフィリエイトリンクを囲みボタンとして利用する場合は、ASPごとに利用ルールが異なります。
ネット上ではさまざまな情報がありますが、正確な内容を確認するため、私は以下の4つのASPへ直接問い合わせました。
- A8.net
- もしもアフィリエイト
- afb
- バリューコマース
問い合わせた内容は、次の2点です。
各ASPから回答をいただいた結果を、次の表にまとめました。
| ASP | 囲みボタン （広告コードを設定） | 自由テキストの変更 | サポート回答（要約） |
|---|---|---|---|
| A8.net | × | △ | 独自ボタンへの変更は不可。自由テキスト広告・商品リンクの表示テキストは任意の文言へ変更可能。（テキストリンクのみ） |
| もしもアフィリエイト | △ | △ | ソースコードを改変しなければ問題なし。タグの書き換えは推奨されていないが、自己責任で利用可能。 |
| afb | 〇 | 〇 | 囲みボタン・自由テキストの変更ともに問題なし。 |
| バリューコマース | 〇 | 〇 | 広告コードを改変しなければ囲みボタンで利用可能。自由テキスト広告の表示テキスト変更も可能。 |
利用前に最新の利用規約を確認しよう
なお、本記事の内容は2026年7月末時点で各ASPへ問い合わせた回答をもとに作成しています。
利用規約や運用方針は変更される場合があるため、実際に利用する際は、最新の利用規約や各ASPの案内をご確認ください。
ASP4社のそれぞれの特徴や向いているジャンルはこちらの記事で紹介しています。
まとめ｜Cocoonでボタンリンク・囲みボタンを活用しよう
今回は、Cocoonでボタンリンク・囲みボタンを作る方法を解説しました。
この記事のポイントをまとめると、次のとおりです。
- ボタンリンクは、公式サイトや関連記事などへ読者を案内する際に便利
- 囲みボタンは、アフィリエイト広告を見やすく設置できる
- マイクロテキストを活用すると、ボタンの内容が伝わりやすくなる
- アフィリエイトリンクを囲みボタンで利用する場合は、ASPごとに利用ルールが異なるため事前に確認することが大切
ボタンリンクや囲みボタンを活用すると、読者が必要な情報へアクセスしやすくなり、記事の見やすさや利便性も向上します。
ぜひこの記事を参考に、用途に合わせてボタンリンクと囲みボタンを使い分けてみてください。
文字装飾やボックス装飾などの記事を見やすくする装飾をまとめて知りたい方はこちらの記事もご覧ください。
