ご登録はこちらをクリック

wordpressでアフィリエイトボタンリンクを簡単に作成する方法

ボタンリンクのイメージ画像

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

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

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

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

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

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

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

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

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

 

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

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

ボタンリンクの作成手順

①「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の場合であれば、以下の赤線の部分がアフィリエイトリンクになるので、この部分をコピーしてリンク欄に貼り付けます。

アフィリエイトリンクの場所

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

ターゲット

Shortcodes Ultimateのボタンのターゲット設定

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

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

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

スタイル

Shortcodes Ultimateのボタンのスタイル設定

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

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

背景

Shortcodes Ultimateのボタンの背景設定

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

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

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

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

 

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

テキストの色

Shortcodes Ultimateのボタンのテキストの色設定

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

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

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

サイズ

Shortcodes Ultimateのボタンのサイズ設定

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

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

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

可変

Shortcodes Ultimateのボタンの可変設定

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

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

中央

Shortcodes Ultimateのボタンの中央設定

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

半径

Shortcodes Ultimateのボタンの半径設定

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

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

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

アイコン

Shortcodes Ultimateのボタンのアイコン設定

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

Shortcodes Ultimateで作成したボタン

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

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

アイコンの色

Shortcodes Ultimateのボタンのアイコンの色設定

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

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

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

テキストの影

Shortcodes Ultimateのボタンのテキストの影設定

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

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

説明

Shortcodes Ultimateのボタンの説明設定

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

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

onClick

Shortcodes UltimateのボタンのonClick設定

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

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

rel 属性

Shortcodes Ultimateのボタンのrel 属性設定

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

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

title 属性

Shortcodes Ultimateのボタンのtitle 属性設定

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

Button ID

Shortcodes UltimateのボタンのButton ID設定

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

別のCSSクラス

Shortcodes Ultimateのボタンの別のCSSクラス設定

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

コンテンツ

Shortcodes Ultimateのボタンのコンテンツ設定

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

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

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

ライブプレビュー

Shortcodes Ultimateのボタンのライブプレビュー設定

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

プレビュー機能で表示させたボタン

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

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

 

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

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

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

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

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

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

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

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

 

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

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

まとめ

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

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


ブログランキングに参加しています!
クリックして応援してもらえると記事更新の励みになるのでよろしくお願いします。

↓ ↓ ↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください