AFFINGER7のカスタムボタン作成方法｜クリックされるボタンの作り方を初心者向けに解説

「AFFINGER7でボタンを作りたいけど、設定方法がよく分からない…」

「おしゃれなボタンを作って、記事のクリック率を上げたい！」

このようなお悩みはありませんか？

AFFINGER7には、簡単に目立つボタンを作成できる「カスタムボタン機能」が用意されています。

文字リンクよりも視認性が高く、アフィリエイトリンクやお問い合わせページへの誘導にも非常に効果的です。

この記事では、

• AFFINGER7のカスタムボタンとは？
• カスタムボタンの作成方法
• ボタンデザインの変更方法
• クリックされやすいボタンの作り方
• ボタン設置のコツ

について初心者向けにわかりやすく解説します。

※　この記事はAFFINGER6時代に作成した内容をAFFINGER7対応版として更新しています。

AFFINGER7のカスタムボタンとは？

カスタムボタンとは、記事内に設置できるクリック用のボタンです。

例えば以下のようなボタンを作成できます。

• 公式サイトを見る
• 詳細レビューを見る
• 無料で試してみる
• 資料請求はこちら

文字リンクだけよりも目立つため、クリック率アップが期待できます。

特にAFFINGER7はデザインの自由度が高く、色やサイズ、アイコンなども簡単に変更できます。

カスタムボタンを使うメリット

① クリック率が上がる

文章中のリンクよりも目立つため、読者が行動しやすくなります。

例えば、

• 「こちらをクリック」
• 「詳しくはこちら」

というテキストリンクよりも

公式サイトを見る

というボタンの方が押されやすい傾向があります。

② 読者が迷わない

記事を読んだあと、「次に何をすればいいの？」と迷わせてしまうと離脱につながります。

ボタンを設置することで、

• 購入する
• 申し込む
• 詳しく読む

など次の行動を明確にできます。

③ アフィリエイトとの相性が良い

AFFINGER利用者の多くはアフィリエイトを目的としています。

• ASP案件
• WordPressテーマ
• レンタルサーバー
• AIツール

などの紹介記事ではボタンが非常に重要です。

AFFINGER7でカスタムボタンを挿入する基本操作

ここからは、AFFINGER7でのカスタムボタン作成方法を初めて触る人でも分かるステップ形式で説明します。

ステップ①「＋」ボタンから「ボタン」ブロックを選ぶ

WordPressの記事編集画面を開いたら、

① 左上の「＋」を押す
②「AFFINGER：カスタムボタン」をクリック

これで記事中にボタンが挿入されます。

（最初は「ボタン」という文字が入っただけの豆腐のようなボタンが出ます）

ステップ② ボタンテキストを編集する

ボタンをクリックするとテキストを編集できます。

例：

• 「公式サイトを見る」
• 「比較記事を読む」
• 「無料で始める」

初心者の方はよく「どんな文言が良いのか」と迷ってしまいがちです。

ステップ③ ボタンのアイコンを設定する

画面右のアイコン選択一覧から好きなアイコンを表示させることができます。

テキストの前後にリストの中から好きなアイコンを表示することができます。

例えば、こんな感じです。

アイコンクラスにクラス名を入力することでもアイコンを表示することができます。

例えば右のリストにはないワードプレスのロゴをクラス名を入力して表示させてみるとこんな感じです。

アイコンの種類は100以上あり、クラス名を入力することで表示させることができます。

クラス名のリストはAFFINGERの公式マニュアルで確認することができます。

ステップ④ ボタンにリンクを設定する

画面右のリンク先URLに入力することでリンクを設定することができます。

リンク設定の「nofollow」タブは

自分のサイトとリンク先のサイトを関連付けたくない時に設定します。

アフィリエイトリンクは「nofollow」を設定しておいた方がいいです。

「新しいページで開く」タブを設定することで、リンク先を新しいページで開くことができます。

外部サイトへリンクを設定する場合は、新しいページで開くを設定しておいた方が外部流出を防ぐことができます。

ステップ⑤ カスタムボタンのデザインを変更する

その他の設定でカスタムボタンの形・色や影を付けたりすることができます。

「影」を設定する

ボタンに影を付けることができます。

影部分の色を変更することもできます。

光る演出

「光る演出」を設定することでボタンに光る演出を付加することが可能です。

ボーダー設定

「ボーダー設定」でボタンの形状を変えることが可能

色設定

「色設定」でボタンのテキスト色・背景色・ボーダー色・影の色を変更することが可能です。

設定を組み合わせることで、ボタンを色々とカスタマイズすることができます。

クリックされやすいボタン作成

クリックされやすいボタンを作成する為に、次のポイントを覚えておいてください。

色を変更する

おすすめカラー例：

色	用途
青	公式サイト
緑	無料登録
オレンジ	資料請求
赤	期間限定・セール

重要なのは「サイト内で色を統一すること」です。

毎回色が違うと読者が混乱してしまいます。

アイコンを追加する

ボタンにアイコンを付けると視認性が高まります。

おすすめアイコン：

• 矢印
• ショッピングカート
• 外部リンク
• ダウンロード

特に右向き矢印はクリック率向上につながりやすいと言われています。

クリックされやすいボタン文言

以下のようなボタンはクリック率が低くなりやすいです。

• 詳しくはこちら
• リンクはこちら

おすすめは次のような具体的な文言です。

• 公式サイトを見る
• 無料で試してみる
• 詳細レビューをみる
• 今すぐ申し込む

読者が「クリック後に何が起きるのか」が分かる言葉を選びましょう。

ボタン作成時の注意点

ボタンを増やしすぎない

記事内に大量のボタンがあると読みにくくなります。

1つの見出しにつき1個程度がおすすめです。

スマホで確認する

読者の多くはスマホで閲覧しています。

• 小さすぎないか
• 押しやすいか
• 改行していないか

を確認しましょう。

色を統一する

ボタンごとに色を変えると統一感がなくなります。

サイト内で2～3色程度に絞るのがおすすめです。

AFFINGER7のカスタムボタン応用編（初心者でもできる）

比較表（テーブル）の中にボタンを入れる

おすすめ行にボタンを入れるだけで、読者の視線が誘導されます。

収益化に繋げる有用なテクニックです。

サービス	特徴	詳細
Aサービス	初心者向け	公式サイト

【コピペで出来る】表にボタンを設置する方法【初心者向け】

テーブル（表）にボタンを挿入するには表の任意の場所に直接カスタムボタンを選択することはできず、HTMLとして編集する必要があります。

プログラミング言語の知識がある方は簡単にできると思いますが、初心者の方にとってはハードルが高いと思ってしまいますよね。

そこで、知識ゼロでもコピペでできる方法を説明します。

下のような感じです。

ボタン①	ボタン②
ボタン③	ボタン④

よくある質問

ボタンは新しいタブで開いた方がいいですか？

外部サイトやアフィリエイトリンクは新しいタブがおすすめです。

内部リンクは同じタブでも問題ありません。

文字リンクとボタンはどちらがいいですか？

行動してほしいリンクはボタンがおすすめです。

補足情報へのリンクはテキストリンクでも問題ありません。

AFFINGER6のボタン機能からの変更はありますか？

AFFINGER7への移行でボタン機能に変更はありません。

まとめ

AFFINGER7のカスタムボタンを活用すると、読者を迷わせず次の行動へ誘導できます。

今回のポイントをまとめると、

• カスタムボタンはクリック率向上に効果的
• 色やサイズを自由に変更できる
• 文言は具体的にする
• 記事内の配置場所が重要
• アフィリエイト記事との相性が抜群

ボタンは単なる装飾ではありません。

読者の行動を後押しする大切なパーツです。

ぜひ今回紹介した方法を活用して、クリックされやすいボタンを作ってみてください。

※　AFFINGER6は現在、AFFINGER7へと移行となりました。