Ver1.6 Released !

【SANGO】アフィリエイトリンクを改変せずにボタンを使う方法

SANGOでアフィリエイトボタンを使う

SANGOにはたくさんの種類のボタンが用意されています。これらのボタンは、リンクタグに対して、クラス名を追加することで装飾が施されています。

ボタンの挿入方法とデザイン一覧 ボタンの挿入方法と種類一覧

しかし、一部のアフィリエイトサービスではリンクタグの改変が禁止されている場合があります。もし、アフィリエイトリンクを触れることなく、SANGOデフォルトのボタンを使いたい場合には、どうすれば良いのでしょうか。

SANGOでアフィリエイトリンクを改変することなくボタンを利用する方法

MEMO

この方法を使うには、少しだけ準備(カスタマイズ)が必要になります。このカスタマイズを行っても、デフォルトのボタンには影響はなく、これまで通りボタンは挿入できます。

はじめる前に:子テーマを導入しておくのがおすすめ

子テーマを導入しておくと、今後テーマのアップデートがあった際にカスタマイズ内容が上書きされてしまう心配がなくなります。

WordPressで子テーマを活用して安全にカスタマイズを行う方法

また、カスタマイズの前に、ファイルのバックアップを取っておきましょう。

WordPressでバックアップを取る4つの方法(初心者向け)
WordPressでバックアップを取る4つの方法(初心者向け)

準備1:functions.phpにコードを貼り付け

アフィリエイトボタン用の新しいショートコードを使用できるようにするために、子テーマのfunctions.phpに以下のコードを貼り付けます。

functions.php
/*アフィリエイト用ボタン*/
add_shortcode('afbtn','sng_insert_btn_af');
function sng_insert_btn_af($atts , $content = null) {
	if(isset($atts) && $content) {
		$href = (isset($atts['href'])) ? 'href="'.esc_url($atts['href']).'"' : null;
		$class = (isset($atts['class'])) ? esc_attr($atts['class']) : null;

		$target = '';
		if(isset($atts['target'])) {
			$target = ($atts['target'] == "_blank") ? ' target="_blank"' : "";
		}

		$rel = '';
		if(isset($atts['rel'])) {
			$rel = ($atts['rel'] == "nofollow") ? ' rel="nofollow"' : "";
		}

		$yoko = '';
		if(isset($atts['0'])) {
			$yoko = ($atts['0'] == "yoko") ? "yoko" : null;
		}

		if($class) {
			$output = (!$yoko) ? '<p>' : '';
			$output .= <<<EOF
			<div class="btn2 {$class}">{$content}</div>
EOF;
			if(!$yoko) {$output .= '</p>';}
				return $output;
		}//end if class
	}//end if atts && content
}
/*END アフィリエイト用ボタン*/

準備2:style.cssに専用のCSSを貼り付け

続いて、子テーマのstyle.cssに以下のCSSをまるっと貼り付けます。なるべく軽くするために、余白や改行は消しています。

style.css
/*アフィリエイトボタン用CSS*/
#inner-content .btn2{padding:0;margin:.5em .5em .5em 0}#inner-content .btn2 a{display:block;padding:.4em .8em}#inner-content .btn2 a:hover{display:block;text-decoration:none}.btn2.btntext a {color: inherit;}#inner-content .btn2.raised a{color:#fff}.btn2.flat1 a{color:#00bcd4}.btn2.flat1 a:hover{color:#fff}.btn2.flat2 a{color:#67c5ff}.btn2.flat2 a:hover{color:#fff}.btn2.flat3 a,.btn2.flat4 a,.btn2.flat5 a{color:#67c5ff}.btn2.flat4 a:hover{color:#679efd}.btn2.flat5 a:hover{color:#fff}.btn2.flat6 a{color:#668ad8}.btn2.flat6 a:hover{color:#fff}.btn2.flat7 a{color:#67c5ff}.btn2.flat8 a{color:#00bcd4}.btn2.flat9 a{color:#fff}.btn2.flat10 a{color:#ffa000}.btn2.flat10 a:hover{color:#fff}.btn2.flat11 a{color:#668ad8}.btn2.cubic1 a,.btn2.grad1 a,.btn2.grad2 a,.btn2.grad3 a,.btn2.grad4 a{color:#fff}#inner-content .btn2.emboss a{color:rgba(0,0,0,.4)}.btn2.text3d.blue-bc a{color:#4f9df4}.btn2.text3d.red-bc a{color:#f88080}.btn2.text3d.green-bc a{color:#90d581}.btn2.cubic2 a,.btn2.cubic3 a{color:#fff}.btn2 img{visibility:hidden;display:block;width:0;height:0;}/*END アフィリエイトボタン用CSS*/

以上で準備は完了です。それではアフィリエイトリンクをボタン化してみましょう。


挿入手順1:投稿編集画面でアフィリエイトリンクを貼り付け

アフィリエイトリンクを挿入

テキストエディタを開き、いつも通りアフィリエイトリンクを挿入します。

挿入手順2:アフィリエイトリンクをショートコード「afbtn」ではさむ

次にそのアフィリエイトリンクを、新しいボタンのショートコードではさみます。新しいショートコード名はafbtn。通常のボタンショートコード(btn)とボタン種類の指定の仕方は全く同じです。

テキストエディタ
[afbtn class="ボタン種類"]
ここにアフィリエイトリンク
[/afbtn]

例えば、メインカラーを背景色とした浮き出しボタンを使いたいときは、以下のようにします。

テキストエディタ
[afbtn class="raised main-bc strong"]
ここにアフィリエイトリンク
[/afbtn]

まとめ

まとめると以下のようになります。

  • ショートコード名はbtnではなくafbtn
  • ボタン種類の指定の仕方は、どちらも同じ
  • afbtnショートコードの中にアフィリエイトリンクを入れる

ボタン挿入例

下のようにテキストエディタで指定すると…

プレビューで見ると、下のように表示されます。

正直言って、少し面倒ですね・・・。通常のボタンはこれまで通り使えるので、改変禁止のアフィリエイトリンクをどうしてもボタンにしたいときに上の方法を活用すれば良いかと思います。

19 Comments

佐藤

お世話になっております。

ボタン内の文字が白くならず、なぜかリンクの青色のままになってしまいます。
白文字に変更することは可能でしょうか。

お忙しいところ恐縮ですがよろしくお願いいたします。

返信する
サルワカくん

お世話になります。白くならないというのは、どちらのボタンでしょうか。
影+塗りの浮き出しボタンでしょうか。
このページに掲載しているCSSを少しいじってみたのですが、そちらに入れ替えてみて頂けますか?

返信する
佐藤

お世話になっております。

試したのは『メインカラーを背景色とした浮き出しボタン』でしたが、新しくCSSを入れ替え試したところ、文字が白くなりました!

いつもありがとうございます。

返信する
sango愛好家

お世話になっております。

上の方で質問されている方と恐らく同じ疑問なのですが、上記の通りに実行した結果、ボタン化されたアフィリエイトリンクのテキストが白くならずに、青の通常サイズの文字のリンクとなってしまいます。

上で質問された方は、解決したようですが、私はイマイチ解決策が分からず、手詰まりとなってしまいましたので、お忙しいとは思いますが、解決策をご教授ください。

返信する
サルワカくん

以下の情報をいただけると。
・CSSはどこに貼りましたか?
・どのボタンの文字が青になりますか?
また、該当のページのURLを教えていただけると原因が分かります。

返信する
sango愛好家

・CSSの貼り付け場所
→「外観」→「テーマ編集」→「スタイルシート(style.css)」→「/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/」の下の部分
関係ないかもしれませんが、普段、私は、「Simple Custom CSS」というプラグインを使っているので、CSSはそっちの方に張り付けています。

・どのボタンが青色になるか
再度試してみたところ、ボタン内の文字がテキストリンクのままの青色になるということは無くなりました。
しかし、今度は、ボタン内の文字がボタンの大きさに合わない通常サイズの?文字サイズとなってしまいます。
また、ボタン化をする際に使っているhtmlは以下の通りです。

[afbtn class=”raised main-bc strong”]
(アフィリンク)
[/afbtn]

・該当ページのURL
作成途中ではありますが、載せておきます。
http://learning-english-from0.com/how-to-study-part7/

返信する
サルワカくん

拝見しましたが、白い文字で表示されておりましたので、おそらくブラウザのキャッシュの削除し忘れではないでしょうか。

返信する
sango愛好家

白い文字で表示が云々という話は、解決しました。
ありがとうございました。

もう一つ質問なのですが、アフィリエイトリンクのボタン化をした際に、ボタン内のテキストの下の部分に不自然な余白が出来てしまうのですが、これは避けられないものなのでしょうか?

参考:http://learning-english-from0.com/%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

加藤 拡

いつもお世話になっております。

アフィリエイトリンクですが、文字や画像に設定する場合は通常の[link]ボタンから挿入で機能しますよね?

ASP画像バナーの場合も、テキストにコードコピペで大丈夫ですよね?

ちょっと気になりましたので、確認させていただきました。

どうぞよろしくお願いいたします。

返信する
サルワカくん

ASPによって貼り方は変わると思いますが、リンクをクリックしたときに広告ページに飛ぶのであれば問題ないと思います。

返信する
sango愛好家

アフィリエイトリンクをボタン化した際の挙動がおかしいという件についてですが、この記事にかかれている方法ではない方法で、リンクを改変せずにボタン化することで、解決することができました。
お騒がせしました。

返信する
アキラ

いつもお世話になっております。

こちらのページを参考にアフィリエイトリンク・ボタンを作成したのですが、パソコンではリンク先に飛び、スマホだとリンク先に飛びませんでした。
テキストリンクの場合だと、スマホからでもリンク先に飛ぶことができます。

CSSとかの影響でしょうか?

お忙しいところ恐縮ですがよろしくお願いいたします。

返信する
サルワカくん

なるほど。
外観⇒カスタマイズ⇒詳細設定から
「リップルエフェクトをオフにする」にチェックを入れてみて頂けますか?

返信する
アキラ

ご返信ありがとうございます。

「リップルエフェクトをオフにする」にチェックを入れましたが、変わりませんでした。
他に何か対処方法はありますでしょうか。

お手数をおかけしますが、よろしくお願いいたします。

返信する
サルワカくん

サイト確認しましたが、スマホでも飛ぶようになっているようです。
キャッシュプラグインを使っているのであれば、キャッシュが残っているのかもしれません。

返信する
アキラ

ご返信ありがとうございます。

こちらでもスマホから飛ぶことが確認できました。

ご丁寧に対応いただきありがとうございます。

はんも

いつもお世話になっております

アフィリエイトリンクを改変せず、ボタンを横並び2列にしたい場合はどうしたらいいでしょうか?

返信する
サルワカくん

この記事に書かれている方法でショートコード内にyokoと入れると横並びにできるかと思います。
[afbtn... yoko]という感じですね。

返信する

コメントを残す

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