こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、カスタムボタンの追加方法から各設定項目、CTAへの活用方法まで解説します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
AFFINGER7のカスタムボタンとは？
AFFINGER7のカスタムボタンは、記事や固定ページに設置できるオリジナルデザインのボタンです。
ボタンの文字や色、サイズ、アイコンなどを自由に設定できるので、サイトのデザインに合わせたボタンを作成できます。
アフィリエイトリンクや商品ページ、関連記事への誘導など、読者にクリックしてほしい場所に活用できます。
AFFINGER: カスタムボタンのデザインサンプル
関連記事 AFFINGER7の基本設定から確認したい方は、こちらも参考にしてください。
-
-
AFFINGER7の初期設定完全ガイド｜導入後に最初にやるべき設定を初心者向けに解説
AFFINGER7の初期設定を初心者向けにわかりやすく解説。設定画面の場所から導入後に最初にやるべき設定、おすすめ設定、SEOやアフィリエイトに役立つ設定まで順番に紹介します。
AFFINGER7のカスタムボタンの使い方
AFFINGER7のカスタムボタンは、WordPress標準のボタンより細かなデザイン設定ができ、CTAやアフィリエイトリンクにも活用できます。
ここでは、カスタムボタンの挿入手順と設定方法を解説します。
❶ カスタムボタンの挿入手順
- 投稿（エディター）画面での作業になります。
基本的な「AFFINGER：カスタムボタン」ブロックの挿入手順をご紹介します。
投稿（エディター）画面を準備
Menu『WordPress管理画面 → 投稿 → 投稿を追加』をクリックします。
投稿（エディター）画面が表示されます。（編集する場合は、投稿一覧から対象記事を選択してください。）
「AFFINGER：カスタムボタン」ブロックを挿入する箇所をクリックします。
ブロック挿入ツール（ブロックインサーター）を切り替え
『＋（ブロックインサーター）』をクリックします。
ブロックタブメニューから「カスタムボタン」を選択
ブロックインサーターアイコンが『ｘ』に変わり、ブロックタブのメニューが表示されます。
AFFINGERから『AFFIMGER: カスタムボタン』を選択して投稿（エディター）画面に挿入します。
『AFFIMGER: カスタムボタン』をクリックします。
「カスタムボタン」挿入完了
投稿（エディター）画面に「カスタムボタン」ブロックが表示されます。
挿入直後では、以下のように表示されます。
❷ カスタムボタンの設定方法
設定メニューは、投稿エディター画面の右側にある「設定 ＞ ブロック」タブから確認できます。
表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。
「AFFINGER：カスタムボタン」の設定方法「ブロック」
「ブロック」の詳細設定項目
AFFINGER: カスタムボタン
全般
アイコン（前）
- ドロップダウンより選択
アイコンクラス
- アイコンのクラス名を入力
- SVGタグで入力（前）→ ON / OFF（ラジオボタン切り替え）
アイコン（後）
- ドロップダウンより選択
アイコンクラス
- アイコンのクラス名を入力
- SVGタグで入力（後）→ ON / OFF（ラジオボタン切り替え）
フォントサイズ
- 数値（％）を入力して調整
- 太字 → ON / OFF（ラジオボタンを切り替え）
- 光る演出 → ON / OFF（ラジオボタンを切り替え）
- 影 → ON / OFF（ラジオボタンを切り替え）
- 透過シャドウ → ON / OFF（ラジオボタンを切り替え）
- 上記4つの装飾機能を組み合わせることで、さまざまなデザインのボタンを作成できます。
- 透過シャドウは、影をONの時のみ有効です。
位置
- 「左・中央・右」を切り替え
リンク
リンク先 URL
- URLを入力
- nofollow → ON / OFF（ラジオボタンを切り替え）
- 新しいページで開く → ON / OFF（ラジオボタンを切り替え）
- ダウンロードリンクにする → ON / OFF（ラジオボタンを切り替え）
GOOGLE ANALYTICS のイントラベル
- イントラベル（ページ内移動ボタン）に表示する名称を入力
追加 HTML
- 計測用のimgタグ等を入力
サイズ
最小の幅（％）
- スライダーまたは数値入力で調整
枠線
- 枠線 → カラーパレットから選択
太さ（PX）
- スライダーまたは数値入力で調整
丸み（PX）
- スライダーまたは数値入力で調整
色
- テキスト → カラーパレットから選択
- 背景 → カラーパレットから選択
- 影 → カラーパレットから選択
高度な設定
- 追加 CSS クラス
- 今回は省略します。
- 追加 CSS
- 今回は省略します。
関連記事 サイト全体のデザインやカラー設定については、こちらで詳しく解説しています。
-
-
AFFINGER7のサイトデザイン設定｜カスタマイズ方法とおすすめ設定
AFFINGER7でサイトデザインを整える方法を解説。サイト全体のカラーやトップページ、ヘッダー・メニュー、フォント、余白、サイドバーなど、見やすいサイトに仕上げるための設定をまとめています。
AFFINGER7のカスタムボタンをCTAに使う方法
AFFINGER7のカスタムボタンは、商品やサービスへの誘導など、CTAボタンとしても活用できます。
ボタンの文字やデザインを工夫して、読者が次に取る行動をわかりやすくしましょう。
CTAの具体例
- 商品紹介：「商品を詳しく見る」
- アフィリエイト：「公式サイトをチェック」
- サービス紹介：「無料で試してみる」
- 資料請求：「資料を無料でダウンロード」
- 関連記事：「詳しい使い方を見る」
関連記事 よく使うCTAやボタンを登録しておきたい場合は、マイブロックも便利です。
-
-
AFFINGER7のマイブロックの使い方｜再利用できる便利機能を解説
AFFINGER7のマイブロックの使い方を解説。マイブロックの作成・カテゴリー設定・記事への挿入方法から、パターンやショートコードとの違い、便利な活用方法まで紹介します。
AFFINGER7のカスタムボタンを使うポイント
カスタムボタンは、リンク先やボタンの目的がひと目でわかるようにすることがポイントです。
「詳しく見る」「公式サイトをチェック」など、クリック後の内容が伝わる文字を設定しましょう。
また、ボタンを記事内に多く配置しすぎず、必要な場所に絞って使うと自然です。
カスタムボタンの配置例
- 商品紹介の直後：「商品を詳しく見る」
- メリットを紹介した後：「公式サイトをチェック」
- 記事のまとめ部分：「詳しい情報はこちら」
- 比較記事のおすすめ商品の下：「おすすめ商品をチェック」
読者が「もっと知りたい」「実際に見てみたい」と思うタイミングにボタンを配置すると、自然に次の行動へ誘導できます。
ボタン文言の選び方
ボタンの文言は、クリックした後に何ができるのかが伝わる表現を選びましょう。
たとえば、商品ページへ誘導するなら「商品を詳しく見る」、公式サイトへ誘導するなら「公式サイトをチェック」のように、目的に合わせて具体的にします。
「こちら」「クリック」などの曖昧な表現よりも、「無料で試す」「料金を確認する」「詳細を見る」など、ユーザーが取る行動を明確にした文言がおすすめです。
関連記事 ボタンだけでなく、目立つCTAを作りたい場合はバナー風ボックスも活用できます。
-
-
AFFINGER7のバナー風ボックスの使い方｜設定方法とCTA活用術
AFFINGER7のバナー風ボックスの使い方を解説。挿入方法やタイトル・画像・リンク・サイズ・色などの設定項目、関連記事やCTAへの活用方法を紹介します。
AFFINGER7のカスタムボタンに関するFAQ
AFFINGER7のカスタムボタンについて、設定や使い方に関するよくある疑問をまとめました。
AFFINGER7のカスタムボタンは何に使えますか？
記事内のリンクやアフィリエイトリンク、関連記事への誘導などに使えます。
カスタムボタンのデザインは変更できますか？
はい。文字やアイコン、サイズ、色、枠線などを設定できます。
カスタムボタンはCTAに使えますか？
はい。商品やサービスへの誘導など、CTAボタンとして活用できます。
関連記事 FAQを記事に追加する方法は、こちらで詳しく解説しています。
-
-
AFFINGER7のFAQブロックの使い方｜設定方法と表示カスタマイズを解説
AFFINGER7のFAQブロックの使い方を初心者向けに解説。FAQの追加方法や9種類のスタイル、色・フォントサイズ・HTMLタグ、折りたたみ、構造化データの設定方法を紹介します。
まとめ！AFFINGER7のカスタムボタンの使い方｜設定方法とCTAボタンの作り方
AFFINGER7のカスタムボタンは、デザインやリンク先を自由に設定できる便利な機能です。
CTAやアフィリエイトリンク、内部リンクなど、目的に合わせて活用できます。
ボタンの文言と配置を工夫して、読者が次の行動を取りやすいサイトに仕上げましょう。
