「カエレバ」に「サウンドハウス」ボタンを簡単にカスタマイズ

音楽系記事を書いていると、良い機材などを紹介したい時があります。

 

そんな時、カエレバを利用して、“コスパ最強”のサウンドハウスでアイテム紹介しようとしても、カエレバはサウンドハウスに対応してない…

 

ということで、カスタマイズして下記の様に、サウンドハウスのボタンを追加したデザインにしてみました。

 

本記事では、下記内容を解説します。あなたのアフィリエイト活動の参考になれれば。

 

記事の内容

▼本記事で紹介するCSSコードに関しては、下記サイトを大変参考にさせて頂き、そのまま使用させて頂きました。音楽系記事を書くものとして、大変ありがたい限りです。

 

サウンドハウスのアフィリエイトリンクをカエレバのデザインに組み込んでみた【簡単】

こんにちは、DTひらです。商品紹介用のアフィリエイトリンクを作成する際に、カエレバを使う方は多いと思います。僕はカエレバのデザインのカスタマイズを以下のサイトを参考に導入していました。上記のサイトでこちらのようなデザインが簡単にできます！s

www.dtm-hirasan.com

 

元となるコード以外の部分で、自分の中で少しわかりずらくて苦戦した部分を、備忘録的に書いておこうと思います。

 

「カエレバ」に「サウンドハウス」ボタンを簡単にカスタマイズ

具体的なカスタマイズ方法について解説していきます。

 

 

【コピペで簡単】CSSコード

コードに関しては、上記サイトでコピペさせて頂いたものを使用させて頂いてます。以下をそのままコピペでご使用下さい。貼り付け箇所はWordpressの場合、子テーマの「style.css」に。

 

 

これでカエレバの基本カスタマイズデザインについては完成です。

 

「カエレバ」でリンクボタンを作成

カエレバで、まずは通常のリンクを作成します。

 

 

リンクを作成したら、上記赤枠部分のコードをコピーして、WordPressの記事投稿「テキスト画面」のお好きな場所にペーストします。

 

上記のままだと下記の通り、サウンドハウスのボタンは、まだ表示されてません。

 

 

 

コードを書き加え、「サウンドハウス」ボタン作成

上記コードを加える場所ですが、カエレバのコードの最後の方は下記の様になってるかと思います。

 

 

2行目に先ほどのコードを下記の通り書き加えます。

 

 

(注意) 必ず前のコードの</div>の後にペーストすること！そうしないとデザインが崩れる。CSSの知識が無い僕はここで相当苦苦戦しました(笑)。

 

これで下記の通り、イメージどおりのデザインは出来たと思います。

 

 

追加した「サウンドハウス」ボタンをアフィリエイトリンクさせる

続いてリンクコードの設定について解説します。

 

ここまでの状態では、ボタンはまだサウンドハウスのサイトにリンクしてないので、アフィリエイトリンクを貼るには、先ほど書き加えたコードの“アフィリエイトURL”と書いてあるところに、リンクコードを貼る必要があります。

 

 

アクセストレードに登録

サウンドハウスのアフィリエイトには、アクセストレードへの登録が必要となります。

 

アクセストレードに登録が出来ましたら、アクセストレードにログインし、プログラム検索バーで「サウンドハウス」を検索して提携申請を送ってください。(申請許可まで少し時間が掛かる場合があります)

 

リンクコード取得←画像つき解説

提携申請が許可されましたら、サウンドハウスのプログラムを開き、バナーリンクを取得します。

 

下記画像の赤丸エリアにあるドロップダウンメニューから「商品リンク」を選んで表示ボタンを押します。

 

すると下記ページが開くと思いますので、赤枠内の必要事項を埋めていきます。

 

 

 

上記３点を埋め終わったら、「リンクコードを生成」ボタンを押します。

 

すると、商品画像の下にリンクコードが表示されるかと思います。そのコードの書き出し部分は、下記の形になってるかと思うので、”この部分のアドレスをコピーする”の部分をコピーします。

 

 

リンクコードの挿入⇒アフィリエイトボタン作成完了

上記でコピーしたアドレスを、先ほどのサウンドハウスのボタンを追加の際に書き加えたコードの、“アフィリエイトURL”という部分に貼り付ければ、リンクを貼ることが出来ます。

 

WordPressのビジュアル投稿画面だったら下記の場所にアドレスをペーストする事でリンクを貼ることが出来ます。

 

 

まとめ

『「カエレバ」に「サウンドハウス」ボタンを簡単にカスタマイズ』というタイトルで、カスタマイズ方法を解説させて頂きました。

 

ちなみに、サウンドハウス以外のボタンについても、上記の方法でリンクをカスタマイズすることも出来ると思うので、あなたの状況にあわせて、この記事を参考にしてもらえたら何よりです。

 

ではでは～。