こうへいのアフィリエイトエッセンス｜ネットで稼ぐための本質を身につけるブログ

アフィリエイトサイトでよく見かける「公式サイトはこちら」などと書かれたボタンリンク。

ボタン形式のリンクだとついクリックしたくなるので、自分のサイトのアフィリエイトリンクもボタンにしてみたくなる方も多いのではないでしょうか？

そこで今回は、wordpressでボタンリンクを作成する方法について紹介していきます。

CSSを追加するなど難しいことをせずに簡単にできる方法をお伝えしているのでぜひ参考にしてみてくださいね。

「Shortcodes Ultimate」を使えばボタンリンク作成は簡単

wordpressを使っているのであれば、プラグインを使ってボタンリンクを作成するのが簡単でおすすめです。

使用するプラグインは「Shortcodes Ultimate」になります。

Shortcodes Ultimateを使えば、ボタンを作成するショートコードにより、以下のようなボタンを簡単に作成することができます。

当ブログのトップページはこちら

 

筆者もアフィリエイトリンクボタンを作成するときはShortcodes Ultimateを使用しています。

次からは、Shortcodes Ultimateでボタンリンクを作成する具体的な方法を見ていきましょう。

ボタンリンクの作成手順

①「Shortcodes Ultimate」をインストールする

プラグイン新規追加の検索項目に「Shortcodes Ultimate」と入力します。

すると、以下のアイコンのプラグイン「Shortcodes Ultimate」が表示されるので、今すぐインストールをします。

インストールが完了したら、そのまま有効化にしましょう。

特に設定などをしなくても、有効化するだけで「Shortcodes Ultimate」は使用することができます。

②記事投稿画面でボタンのショートコードを呼び出す

Shortcodes Ultimateをインストールすると、記事投稿画面に「ショートコードを挿入」というアイコンが表示されるようになります。

記事投稿内のアフィリエイトボタンリンクを作成したい場所で「ショートコードを挿入」をクリックしましょう。

すると、以下のように大量のショートコードが表示されるので、その中から「ボタン」を選んでクリックします。

③ボタンの詳細設定をおこなう

ボタンを選択したら、作成するボタンの詳細の設定をしていきます。

設定できる項目について順番に解説していきます。

リンク

ボタンをクリックしたときに表示されるリンク先のURLを入力します。

ここにASPから取得した紹介したい商品やサービスのアフィリエイトリンクを入れます。

アフィリエイトリンクは、ASPで元から用意されているテキスト原稿などから必要なURLのみを抜き出します。

この必要なURLは、「a href=」の後に記述されている「https://○○○○○」の部分になります。

afbの場合であれば、以下の赤線の部分がアフィリエイトリンクになるので、この部分をコピーしてリンク欄に貼り付けます。

原稿の種類の中で自由テキストが用意されているのであれば、念のため自由テキストを選びましょう。

ターゲット

URLの開き方を「同じタブで開く」か「新しいタブで開く」のどちらにするかを選択します。

• Open in same tab…同じタブで開く
• Open in new tab…新しいタブで開く

基本的に、アフィリエイトリンクであれば新しいタブで開くに設定するのがおすすめです。

スタイル

ボタンのデザインスタイルを選択します。

シンプルな「デフォルトスタイル」から、ボタンらしい「3Dスタイル」が用意されています。

背景

ボタンのベース色を設定する項目です。

ボタンの色にしたいカラーコードを入力欄に入れて設定します。

カラーコードはこちらを参考にしてみてください。
⇒カラーコード表はこちら

ボタンの色は、クリックしてもらうためにある程度目立ったカラーにするのがおすすめです。

 

ボタンの色についてはこちらの記事もぜひチェックしてみてください。
⇒アフィリエイトリンクボタンでクリックされやすい色は何色？

テキストの色

ボタン上に表示させるテキストの色を設定します。

こちらもカラーコードを入力して設定します。

ボタン背景色のことも考え、読みやすいテキストカラーにすることを心がけましょう。

サイズ

ボタンのサイズを設定します。

「1」～「20」の幅から選択して設定します。

サイトの記事全体を見て、小さすぎず大きすぎないボタンのサイズに設定しましょう。

可変

可変設定をクリックして「はい」にすると、以下のように端から端まで伸びるボタンを作成することができます。

当ブログのトップページはこちら

中央

中央設定をクリックして「はい」にすると、以下のようにボタンを自動的に中央に配置させることができます。

半径

ボタンの周囲のデザインに関わる設定項目です。

四角いボタンにする「正方形スタイル」や丸みのあるボタンにする「ラウンドスタイル」が用意されています。

お好みの半径スタイルを選択するといいでしょう。

アイコン

アイコンを設定すると、ボタン内テキストの左側にアイコンを挿入することができます。

元から用意されているアイコンを選ぶのであれば、「アイコンピッカー」を選択します。

オリジナルのアイコンを使いたいのであれば、「メディアマネージャ」を選択します。

アイコンの色

アイコンの色を設定することができます。

希望のアイコン色があれば対象の色のカラーコードを入力します。

初期設定では白色になっています。

テキストの影

ボタン内のテキストに影を付けたいなら設定しましょう。

カラーコードの入力によって影の色を設定することもできます。

説明

ボタン内テキストの下部に本来のテキストとは別の文章を入れることができます。

補足の説明を入れたいときなどに設定するといいでしょう。

onClick

JavaScriptコードを入力することで、ボタンに動きを出したりすることができます。

高度な設定なので、特にこだわりがなければ空欄で問題ないでしょう。

rel 属性

リンクにrel属性を付けたいときに入力します。

アフィリエイトリンクにはnofollowを付けるのが理想とされているので、「nofollow」はクリックしてnofollow属性のリンクにしておくといいでしょう。

title 属性

高度な設定なので、特にこだわりがなければ空欄で問題ありません。

Button ID

高度な設定なので、特にこだわりがなければ空欄で問題ありません。

別のCSSクラス

高度な設定なので、特にこだわりがなければ空欄で問題ありません。

コンテンツ

ボタン内のテキストに当てはまる項目です。

クリック率を上げるために必ず入力しましょう。

「公式サイトはこちら」や「（商品名）を公式サイトで詳しくチェックしてみる」といったテキストが一般的です。

ライブプレビュー

記事内にボタンショートコードを挿入する前に「ライブプレビュー」をクリックすると、設定したボタンがどんな感じかチェックすることができます。

コードを挿入する前にできればプレビューでチェックしておきましょう。

また、ボタンのプレビューを表示させた状態で各設定項目を変更すると、変更した内容がすぐにプレビューに反映されるので便利ですよ。

 

ボタンの設定項目については以上です。

設定が完了したら下部の「ショートコードを挿入する」をクリックしてボタンを挿入しましょう。

そして、投稿記事のプレビューを表示させ、ボタンをクリックしたらちゃんと設定したリンク先に飛ぶか確認しましょう。

アフィリエイトリンクをボタンに使用する際の注意点

ボタンリンクを作成する方法について紹介してきましたが、ボタンにアフィリエイトリンクを貼る際の注意点についてもお伝えしておきます。

それは、基本的にASPで用意されているアフィリエイトリンクを改変することがNGとなっていることです。

用意されたバナー原稿やテキスト原稿からアフィリエイトリンクのみを抜き出してボタンとして使用するのは改変となる場合もあります。

なので、規約に対して厳しいASPや案件であれば、念のためにアフィリエイトリンクをボタンに貼ることは問題ないか確認しておくといいでしょう。

 

ただ、実際のところ、ボタンのテキストをユーザーをだます文章にしたりでもしない限り、アフィリエイトリンクをボタンで使用しただけで規約違反のペナルティを受けたという事例はほぼないそうです。

これまで筆者も何度かASPの担当の方にボタン形式のアフィリエイトリンクにすることは問題ないか確認していますが、ボタン程度であれば大きな問題はないとの回答をいただいてます。

まとめ

「Shortcodes Ultimate」プラグインを使えば、簡単にアフィリエイトボタンリンクを作成することができます。

リンクをボタンにしてみたい方はぜひ今回の記事を参考にしてみてくださいね。