はてなブログでアフィリンクボタンを実装・・・CSSとか参考サイトとか
先日お話した通り、見事にAmazonアソシエイトさんからブッチされたすっとん。
Amazonアソシエイト本体のアフィリンクは、先日この「はてなブログ」自体のリンク生成機能でもおしゃれなリンクを作れるようになったのでこれからどんどん活用していこうと思っていたんですが。。。
残念無念。
ということで、今まで面倒で避けてきた「アフィエイトリンクボタンの作成」というのに手を出してみました。
やったこと
①イメージする
②リンクボタン作成に関する参考サイトを検索
③（サイトを参考に）リンクボタンを実装
④ブログページにボタンをつけてみる
⑤参考画像の中央寄せ手段を模索
⑥テスト
①イメージする
まずはどんなのがいいかなーとイメージします。
色々なのがあると思いますが、すっとんは紹介製品の画像にそれぞれ「Amazonで探す」「楽天市場で探す」みたいなボタンを設け、クリックしたらそれぞれのECサイトに飛んで購入できる、みたいなのをイメージ。
ボタンの色を分けるのは必須ですよね！！
こんなの↓
②リンクボタン作成に関する参考サイトを検索
ではさっそく。
まずはボタンからですね。
CSSとHTMLで生成可能なリンクボタンならなんでもいいんですが、これはもう先駆者がたくさんいますから。
イチからちまちま自分で作成するのは、根っからのプログラム好きくらいでしょう。
「アフィリンク ボタン」でネット検索してみれば、いくらでも出てきます。
すっとんは、下記サイトの「ボタン単品」を参考にさせていただきました。
③（サイトを参考に）リンクボタンを実装
実際にボタンを作っていきます。
すっとんは、「Amazonで探す」ボタンと「楽天市場で探す」ボタンを２つ作りたいと思っていて、各ボタンの色もそれぞれのサイトに合った色にしたいと考えました。
ボタンを２つ用意
先程の参考サイトからコードをコピーし、いったんパソコン上のメモ帳にペーストします。
Amazon用のボタン、楽天市場用のボタンを用意したいので、同じものを２つコピーします。
次に行いたいのが、ボタン名を「azn-btn」（Amazon用のボタン）、「rkn-btn」（楽天市場のボタン）として名称変更すること。
（これを分けておくと、後でAmazon用と楽天市場用でボタンの色を分けられます。）
CSSのコードがさっぱりわからない方、遠目で雰囲気を見てみると、１つあたり３つに別れてるのがなんとなく分かると思います。
これの先頭に、「red-btn」っていう文字があると思うので、この「red」を「azn」（Amazonの略）なり「rkn」（rakutenの略）に代えればOK。
ボタンの色を抽出
次に、ボタンの色合いもそれぞれそれっぽく合わせないとね。
Amazonのメーカーカラーと言えば、オレンジですよね。
適当なオレンジでもいいんですが、ここはちょっとこだわってAmazonのECサイトで使用されている色をそのまま真似します。
Amazonのサイトに行き、オレンジの色を抽出します。
これにはいくつか方法があって、GoogleChromeであればサイト上で使用されている色を抽出してくれるアドオンもあったりします。
すっとんはアドオンを追加するのが面倒だったので、まずはAmazonのサイトを画面キャプチャ。
キャプチャした画像をWindowsのペイントソフトに貼って、「スポイト」で色を抽出した後「色の編集」画面に行くと、RGB値をゲットできます。
RGB＝255：167：36
ですね。
で、RGB値がゲット出来たら次に下記サイトでRGB値をHTMLのカラーコードに変換してくれるサイトで変換！
結果、Amazonオレンジはカラーコード「#ffa724」と判明しました。
同じことを楽天市場（赤いイメージ）に行って色を抽出し、楽天レッドのカラーコードは「#ed254e」となりました。
ボタンの色をコードに実装
実際に、抽出したボタンのカラーコードをCSSに実装します。
これは、コピーしたコード内の「background-color:#******」と書かれているところの「#******」を抽出したものにそれぞれ変更すればOK。
Amazonボタンなら
background-color:#ffa724;
楽天市場ボタンなら
background-color:#ed254e;
となります。
コードの改造はこれでおしまい！！
簡単ですね！
CSSコードをサイトに反映
これがはてなブログのちょっとわかりづらいところ。
CSSコードを充てても反映しなかったりするので、挫折する方も多いですよね。
ひとまず管理画面の「デザイン」→「カスタマイズ」（レンチマーク）→「｛｝デザインCSS」をクリックし、そこに先程作成したコードをコピーします。
※そもそも「｛｝デザインCSS」が使えない！という方は、Pro化しましょう。
既にコードを追加している場合は、最下段に追加するのが無難です。
これだけだと、スマホ画面で反映されない場合があります。
最後スマホでチェックした時に反映されていないようだったら、スマホマークをクリックして「フッタ」→「フッタ」を選択し、さらにここにもCSSコードを追加していきます。
この際の注意点として、この「フッタ」コードにはHTMLコードで記載されていることを前提としているため、CSSコードはそのままでは貼ることができません。
ボタンのCSSコードの前に「<style>」、最後に「</style>」を入れます。
すなわち、
<style>ここに、ボタンのコードをコピー</style>
という状態ですね。
これで、ベースとなるCSSの実装は完了です。
④ブログページにボタンをつけてみる
では実際に、ブログページにボタンをつけていきます。
まずは、先日メインブログで公開したばかりの下記ページをAmazonアソシエイトからバリューコマースリンクに変更し、ボタン実装します。
リンクURLを作成
それぞれのアフィリエイトサイトで、目的製品のリンクを作成します。
この時のポイントは、「テキストリンクの作成」をするということです。
しかも、自由形式のテキストリンクが望ましいです。
なぜなら、今回すっとんが採用したボタンでは、リンク内の文言がそのままボタン名になるからです。
Amazonや楽天市場など、ECサイト系のアフィリンク素材の中には探せば自由テキスト形式でリンク生成できるものがあると思うので、それで作成します。
作成する文言は自由ですが、すっとんはボタン名をAmazonなら「Amazonで探す」、楽天市場なら「楽天市場で探す」というボタン名にしたいので、自由テキスト部分の名称もこれに倣います。
※ちなみに、リンクURL生成後にURL内の文言を手修正するのは規約違反になるばかりか、そのリンクで収益が上がってもトレースが取れずに成果として認められない恐れがありますので、必ずアフィリエイトサイト内で作成した文言のままボタン作成しましょう。
ボタンを作成
ではいよいよボタンの作成です。
管理画面の「記事の管理」から該当記事を開き、編集画面にします。
画面上部の「html編集」に入り、ボタンを追加したい場所にまずは下記コードをコピー＆ペースト。
<div class="azn-btn">//ここにアフィリンク（テキストリンク）を貼る</div>
そして、「//ここにアフィリンク（テキストリンク）を貼る」という場所を消したうえで、先程作成したアフィリエイトリンクURLをコピー＆ペーストします。
（諸般の都合上、コードが掲載された画像は載せられないため文字のみでの解説です。）
画面上部の「プレビュー」を押して、目的の場所にボタンが作られていたら完成です！
同じように楽天市場のボタンも作って、こんな感じになりました。
⑤参考画像の中央寄せ手段を模索
さて、では最後に。。。
参考画像を掲載したいんですが、はてなブログって基本的に画像を掲載すると左寄せなんですよね。
画像タイトルを設定すれば中央寄せになりますが、画像タイトルは設定したくない！ということで、画像を中央寄せする手段を考えます。
通常のHTMLであれば、Imageタグに対して「Center」要素を追加すればそれでよさそうですが、先ほど見た「HTML編集」画面内のコードをざっと見たりしても、中央寄せされている画像でもそのような文言は無し。
ということで色々精査してみると、すっとんのメインブログではどうやら下記コードが中央寄せのコードらしいことがわかりました。
<figure class="figure-image figure-image-fotolife mceNonEditable">
これを画像イメージにぺたっと貼りたいので、具体的には下記コードになります。
<div><figure class="figure-image figure-image-fotolife mceNonEditable">//ここに画像URLのHTMLを貼る</div>
<div></div>で囲っているのがポイントです。
これで囲っておかないと、上記コードを貼った以降の全て（文字から画像からほんとに全て）が中央寄せになってしまいます。
⑥テスト
さて、ここまで長かった道のりもこれで終了です。
実際に保存したページをパソコンとスマホの両方から見てみると、、、
ちゃんとなってますね！
冗長なので貼りませんが、スマホでもOK！
いや～長かった。（記事を書くのが。）
まとめ
「はてなブログでアフィリンクボタン作成」という記事があまりなかったので、メモ書き程度でも残しておけば誰かの役に立つかなぁと思って書き始めたんです。
最初は参考リンクとか、困った部分をちょこっと説明する程度を予定していたんですけど。
書き始めたら、どうしてもこう、無駄に説明口調になって無駄に長大な記事になってしまいました。
せっかくですので、誰かのお役に立てたらうれしいです。
ではでは。
