「AFFINGER7でボタンを作りたいけど、設定方法がよく分からない…」
「公式サイトや関連記事へのリンクを、もっと目立たせたい」
「比較表の中にもボタンを入れたい」
このように感じていませんか？
AFFINGER7には、記事内に簡単にボタンを設置できる「カスタムボタン」ブロックが用意されています。
カスタムボタンを使えば、
- 公式サイトへのリンク
- 関連記事への内部リンク
- アフィリエイトリンク
- 商品・サービスの詳細ページ
- 比較表内の「詳しく見る」ボタン
などを分かりやすく表示できます。
色やサイズ、アイコンなども細かく変更できるので、サイトのデザインに合わせたボタンを作成できるのもAFFINGER7の魅力です。
この記事では、AFFINGER7のカスタムボタンの基本的な作り方から、デザイン変更、横並び表示、比較表への設置方法まで初心者向けに分かりやすく解説します。
AFFINGER7にはカスタムボタン以外にも、テーブル・吹き出し・FAQ・ボックスなど便利な機能が多数あります。
AFFINGER7の基本操作をまとめて確認したい方は、こちらの記事も参考にしてください。
AFFINGER7のカスタムボタンとは？
AFFINGER7の「カスタムボタン」は、記事内にクリックできるボタンを設置できるAFFINGER専用ブロックです。
通常のテキストリンクでも別ページへ誘導できますが、文章の中にリンクが埋もれてしまうことがあります。
カスタムボタンなら、
- 「公式サイトを見る」
- 「詳しいレビューを見る」
- 「料金を確認する」
といった次の行動を目立たせることができます。
特にブログを収益化する場合、読者に「次に何をしてほしいのか」を分かりやすくすることは重要です。
カスタムボタンを使うメリット
① クリック率が上がる
文章中のリンクよりも目立つため、読者が行動しやすくなります。
例えば、
- 「こちらをクリック」
- 「詳しくはこちら」
というテキストリンクよりも
というボタンの方が押されやすい傾向があります。
② 読者が迷わない
記事を読んだあと、「次に何をすればいいの？」と迷わせてしまうと離脱につながります。
ボタンを設置することで、
- 購入する
- 申し込む
- 詳しく読む
など次の行動を明確にできます。
③ アフィリエイトとの相性が良い
AFFINGER利用者の多くはアフィリエイトを目的としています。
- ASP案件
- WordPressテーマ
- レンタルサーバー
- AIツール
などの紹介記事ではボタンが非常に重要です。
AFFINGER7でカスタムボタンを作成する方法
ここからは、AFFINGER7でのカスタムボタン作成方法を初めて触る人でも分かるステップ形式で説明します。
ステップ①「＋」ボタンから「ボタン」ブロックを選ぶ
WordPressの記事編集画面を開いたら、
① 左上の「＋」を押す
②「AFFINGER：カスタムボタン」をクリック
これで記事中にボタンが挿入されます。
（最初は「ボタン」という文字が入っただけの豆腐のようなボタンが出ます）
ステップ② ボタンテキストを編集する
ボタンをクリックするとテキストを編集できます。
例：
- 「公式サイトを見る」
- 「比較記事を読む」
- 「無料で始める」
初心者の方はよく「どんな文言が良いのか」と迷ってしまいがちです。
ステップ③ ボタンのアイコンを設定する
画面右のアイコン選択一覧から好きなアイコンを表示させることができます。
テキストの前後にリストの中から好きなアイコンを表示することができます。
例えば、こんな感じです。
アイコンクラスにクラス名を入力することでもアイコンを表示することができます。
例えば右のリストにはないワードプレスのロゴをクラス名を入力して表示させてみるとこんな感じです。
アイコンの種類は100以上あり、クラス名を入力することで表示させることができます。
クラス名のリストはAFFINGERの公式マニュアルで確認することができます。
ステップ④ ボタンにリンクを設定する
画面右のリンク先URLに入力することでリンクを設定することができます。
リンク設定の「nofollow」タブは
自分のサイトとリンク先のサイトを関連付けたくない時に設定します。
アフィリエイトリンクは「nofollow」を設定しておいた方がいいです。
「新しいページで開く」タブを設定することで、リンク先を新しいページで開くことができます。
外部サイトへリンクを設定する場合は、新しいページで開くを設定しておいた方が外部流出を防ぐことができます。
ステップ⑤ カスタムボタンのデザインを変更する
その他の設定でカスタムボタンの形・色や影を付けたりすることができます。
「影」を設定する
ボタンに影を付けることができます。
影部分の色を変更することもできます。
光る演出
「光る演出」を設定することでボタンに光る演出を付加することが可能です。
ボーダー設定
「ボーダー設定」でボタンの形状を変えることが可能
色設定
「色設定」でボタンのテキスト色・背景色・ボーダー色・影の色を変更することが可能です。
設定を組み合わせることで、ボタンを色々とカスタマイズすることができます。
AFFINGER7でカスタムボタンを横並びにする方法
AFFINGER7 ver20260817以上では、カスタムボタンを横並びで表示することができるようになりました。
例えば、
公式サイトを見る ｜ レビューを見る
のように、2つの選択肢を並べたい場合に便利です。
こんな感じです。
設定は「インラインにする」を有効にするだけ
横並びにしたい複数のボタンで「インラインにする」設定をするだけでOKです。
なお、エディター上では見た目が変わらないので、設定後はプレビュー画面で確認してください。
横並びボタンのおすすめ活用例
例えばWordPressテーマ比較記事なら、
公式サイトを見ると詳しいレビューを見るを並べる方法があります。
読者が自分の目的に合わせて次のページを選べるので便利です。
ただし、スマートフォンでは横幅が狭くなります。
横並びにした場合は、PC表示だけでなくスマホ表示も確認してください。
クリックされやすいボタン作成
クリックされやすいボタンを作成する為に、次のポイントを覚えておいてください。
色を変更する
おすすめカラー例：
| 色 | 用途 |
|---|---|
| 青 | 公式サイト |
| 緑 | 無料登録 |
| オレンジ | 資料請求 |
| 赤 | 期間限定・セール |
重要なのは「サイト内で色を統一すること」です。
毎回色が違うと読者が混乱してしまいます。
アイコンを追加する
ボタンにアイコンを付けると視認性が高まります。
おすすめアイコン：
- 矢印
- ショッピングカート
- 外部リンク
- ダウンロード
特に右向き矢印はクリック率向上につながりやすいと言われています。
クリックされやすいボタン文言
以下のようなボタンはクリック率が低くなりやすいです。
- 詳しくはこちら
- リンクはこちら
おすすめは次のような具体的な文言です。
- 公式サイトを見る
- 無料で試してみる
- 詳細レビューをみる
- 今すぐ申し込む
読者が「クリック後に何が起きるのか」が分かる言葉を選びましょう。
ボタン作成時の注意点
ボタンを増やしすぎない
記事内に大量のボタンがあると読みにくくなります。
1つの見出しにつき1個程度がおすすめです。
スマホで確認する
読者の多くはスマホで閲覧しています。
- 小さすぎないか
- 押しやすいか
- 改行していないか
を確認しましょう。
色を統一する
ボタンごとに色を変えると統一感がなくなります。
サイト内で2～3色程度に絞るのがおすすめです。
AFFINGER7のカスタムボタン応用編（初心者でもできる）
比較表（テーブル）の中にボタンを入れる
おすすめ行にボタンを入れるだけで、読者の視線が誘導されます。
収益化に繋げる有用なテクニックです。
| サービス | 特徴 | 詳細 |
|---|---|---|
| Aサービス | 初心者向け |
【コピペで出来る】表にボタンを設置する方法【初心者向け】
テーブル（表）にボタンを挿入するには表の任意の場所に直接カスタムボタンを選択することはできず、HTMLとして編集する必要があります。
プログラミング言語の知識がある方は簡単にできると思いますが、初心者の方にとってはハードルが高いと思ってしまいますよね。
そこで、知識ゼロでもコピペでできる方法を説明します。
下のような感じです。
表に挿入したいボタンを作成する
前半で説明した方法で表に挿入したいカスタムボタンを作成します。
リンク設定やボタンのデザインなどは完成させた状態にしてください。
作成したボタンをHTML表示にする
作成したボタンのオプションから「HTMLとして編集」をクリックします。
ボタンがHTML表示されます。
挿入したい表の場所に番号を入力しておく
作成したボタンを挿入したい表の場所に番号を入力しておきます。
※ 自分がわかれば番号でなくても何でも大丈夫です。
| ① | |
テーブル（表）をHTML表示にする
作成したテーブル（表）をHTML表示にします。
STEP.2と同様にオプションの「HTMLとして編集」を選択するとHTML表示になります。
HTML表示の表は下のようになります。
ボタンのHTMLをコピペする
表のHTML表示を確認するとSTEP.3で入力した番号の場所が確認できると思います。
その番号を削除して、その場所にSTEP.2のカスタムボタンのHTMLをコピペします。
初心者にとってテーブルのHTML表示はわかりにくいと思います。
ビジュアルのボタンを挿入したい場所がHTML表示でもわかりやすくするために、番号をふっただけなので番号である必要はありません。
ビジュアルに戻して確認する
プションの「ビジュアル編集」をクリックするとビジュアル画面に戻し、表示を確認することができます。
以上が初心者がコピペでテーブルにボタンを表示させる方法です。
よくある質問
カスタムボタンが表示されない場合は？
まずAFFINGER7が最新版になっているか確認しましょう。
また、ブロック検索で「カスタムボタン」と入力して探してみてください。
設定変更後に表示がおかしい場合は、一度プレビュー画面で確認するのもおすすめです。
カスタムボタンを横並びにできますか？
はい。
AFFINGER7ではver20260817以上で「インラインにする」設定が追加されており、複数のカスタムボタンを横並びにできます。
アフィリエイトリンクにも使えますか？
利用できます。
リンク先URLにアフィリエイトURLを設定することで、アフィリエイト商品のCTAとして利用できます。
ただし、使用しているASPによってリンクコードの扱いが異なる場合があるため、各ASPのルールも確認してください。
AFFINGER6からAFFINGER7で使い方は変わりましたか？
基本的なカスタムボタンの作成方法は大きく変わっていません。
ただしAFFINGER7では、横並び表示ができる「インラインにする」設定など新しい機能も追加されています。
そのため、AFFINGER6から利用している方も最新の設定項目を一度確認してみるのがおすすめです。
画像付きのリンクを作ることはできますか？
画像とテキストを組み合わせて目立つリンクを作りたい場合は、「バナー風ボックス」もおすすめです。
カスタムボタンはシンプルなCTAに向いていますが、バナー風ボックスは背景画像を使って関連記事やおすすめページを目立たせることができます。
詳しい使い方はこちらで解説しています。
まとめ｜AFFINGER7のカスタムボタンを活用して分かりやすい導線を作ろう
AFFINGER7のカスタムボタンの使い方について解説しました。
カスタムボタンを使えば、
- 公式サイトへのリンク
- アフィリエイトリンク
- 関連記事への内部リンク
- 比較表内の詳細リンク
などを分かりやすく表示できます。
AFFINGER7では、背景色・サイズ・アイコン・影・ボーダーなども変更できるため、サイトに合わせたボタンを作成できます。
さらに現在のAFFINGER7では「インラインにする」を利用して、複数のボタンを横並びにすることも可能です。
ただし、ボタンは多ければよいというものではありません。
「読者に次に何をしてほしいのか」を考えて、必要な場所だけに設置することが大切です。
まずは、テキスト → リンク先URL → 色 → サイズの基本的な設定から使ってみてください。
AFFINGER7にはカスタムボタン以外にも、記事を読みやすくしたり、サイト内の導線を作ったりする便利な機能が多数あります。
AFFINGER7の使い方をまとめて確認したい方はこちらをご覧ください。
比較表を使って商品やWordPressテーマを紹介したい方はこちらもおすすめです。
→ AFFINGER7のテーブル作成方法｜比較表や見やすいデザインの作り方
AFFINGER7自体の特徴やメリット・デメリットを確認したい方はこちらをご覧ください。