カエレバにiHerbを追加する方法、iHerbでアフィリエイト!2017-10-29カエレバにiHerbを追加する方法、iHerbでアフィリエイト!カスタマイズ僕は商品紹介をするときは、カエレバを利用させてもらっています。標準で用意されているデザインは少しさみしいのでカスタマイズをしています。僕はiHerbをよく利用していて、iHerbの商品リンクもカエレバに貼れたらいいのにと思い実施してみました。今回はその方法のご紹介です。基本的にはリンクを貼るだけですので応用がきくと思います。僕はCSSでカスタマイズをしていますので、それ前提での方法です。「デザイン」-「カスタマイズ」-「デザインCSS」と進みます。この記述がボタンの設定ですね。下記はアマゾン用です。これをコピーしてiHerb用を作成します。!important;}「.shoplinkiherb」の部分はなんでも構いません。色指定は緑を採用しました。CSS設定はこれだけ。変更を保存するのを忘れないように。スマホ版の設定が必要な場合も忘れないように。iHerb側での作業iHerbでの商品を紹介したいわけですから、紹介したい商品のリンクを取得しないといけません。iHerbのアカウントは取得していることを前提とします。紹介したい商品を検索すると、右上に「共有」ボタンが表示されていると思います(トップページにある共有はiHerb自体の共有なのでお間違えないように)共有ボタンを押すと、商品リンクが表示されますので、「コピー」ボタンを押します。コピーした情報はとりあえずメモ帳などにコピーしておきましょう。次にカエレバのサイトで商品リンクを取得します。取得方法はご存知でしょうから省略します。商品リンクを普通に貼れば、(僕の場合は)こうなります。リンク先はAmazonと楽天だけです。ここにiHerbを追加したいということです。カエレバ楽天市場AmazonカエレバにHTML追記iHerb用のHTMLを追記します。</div></div></div>青字の部分がそれぞれ楽天用、Amazon用の設定です。その並びにiHerb用の設定を追記します。赤字で囲んだ文字をコピペすれば使えると思います。緑字の部分は上記で取得したiHerbの情報リンクです。適切なリンク先に置き換えてください。CSS設定でclass名を変更した場合は名前をあわせてください。カエレバ楽天市場AmazoniHerbご参考になれば幸いです。ドメインのはてなブログをHTTPS化するはてなブログのレイアウトが崩れてしまった!CSS(スタイルシート)の修正方法はてブボタンのぐるぐるを解消!https化(SSL化)後の不具合解決方法!スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。