音楽系記事を書いていると、良い機材などを紹介したい時があります。
そんな時、カエレバを利用して、“コスパ最強”のサウンドハウスでアイテム紹介しようとしても、カエレバはサウンドハウスに対応してない…
ということで、カスタマイズして下記の様に、サウンドハウスのボタンを追加したデザインにしてみました。
本記事では、下記内容を解説します。あなたのアフィリエイト活動の参考になれれば。
記事の内容
| ・「カエレバ」に「サウンドハウス」ボタンを簡単にカスタマイズ
・追加した「サウンドハウス」ボタンをアフィリエイトリンクさせる |
▼本記事で紹介するCSSコードに関しては、下記サイトを大変参考にさせて頂き、そのまま使用させて頂きました。音楽系記事を書くものとして、大変ありがたい限りです。
元となるコード以外の部分で、自分の中で少しわかりずらくて苦戦した部分を、備忘録的に書いておこうと思います。
「カエレバ」に「サウンドハウス」ボタンを簡単にカスタマイズ
具体的なカスタマイズ方法について解説していきます。
| ・【コピペで簡単】CSSコード
・「カエレバ」でリンクボタンを作成 ・コードを書き加え、「サウンドハウス」ボタン作成 |
【コピペで簡単】CSSコード
コードに関しては、上記サイトでコピペさせて頂いたものを使用させて頂いてます。以下をそのままコピペでご使用下さい。貼り付け箇所はWordpressの場合、子テーマの「style.css」に。
これでカエレバの基本カスタマイズデザインについては完成です。
「カエレバ」でリンクボタンを作成
カエレバで、まずは通常のリンクを作成します。
リンクを作成したら、上記赤枠部分のコードをコピーして、WordPressの記事投稿「テキスト画面」のお好きな場所にペーストします。
上記のままだと下記の通り、サウンドハウスのボタンは、まだ表示されてません。
コードを書き加え、「サウンドハウス」ボタン作成
上記コードを加える場所ですが、カエレバのコードの最後の方は下記の様になってるかと思います。
2行目に先ほどのコードを下記の通り書き加えます。
| (注意)
必ず前のコードの</div>の後にペーストすること！そうしないとデザインが崩れる。CSSの知識が無い僕はここで相当苦苦戦しました(笑)。 |
これで下記の通り、イメージどおりのデザインは出来たと思います。
追加した「サウンドハウス」ボタンをアフィリエイトリンクさせる
続いてリンクコードの設定について解説します。
ここまでの状態では、ボタンはまだサウンドハウスのサイトにリンクしてないので、アフィリエイトリンクを貼るには、先ほど書き加えたコードの“アフィリエイトURL”と書いてあるところに、リンクコードを貼る必要があります。
| ・アクセストレードに登録
・リンクコード取得←画像つき解説 ・リンクコードの挿入⇒アフィリエイトボタン作成完了 |
アクセストレードに登録
サウンドハウスのアフィリエイトには、アクセストレードへの登録が必要となります。
アクセストレードに登録が出来ましたら、アクセストレードにログインし、プログラム検索バーで「サウンドハウス」を検索して提携申請を送ってください。(申請許可まで少し時間が掛かる場合があります)
リンクコード取得←画像つき解説
提携申請が許可されましたら、サウンドハウスのプログラムを開き、バナーリンクを取得します。
下記画像の赤丸エリアにあるドロップダウンメニューから「商品リンク」を選んで表示ボタンを押します。
すると下記ページが開くと思いますので、赤枠内の必要事項を埋めていきます。
| ・商品詳細URL ⇒ サウンドハウスページの紹介商品ページのURLをコピーして貼り付け。
・商品画像URL ⇒ サウンドハウスページの紹介商品ページの画像を右クリックして、「画像アドレスをコピー」して貼り付け。 ・商品説明文 ⇒ これは書かなくても別にOK。 |
上記３点を埋め終わったら、「リンクコードを生成」ボタンを押します。
すると、商品画像の下にリンクコードが表示されるかと思います。そのコードの書き出し部分は、下記の形になってるかと思うので、”この部分のアドレスをコピーする”の部分をコピーします。
| <a href=”https://から始まるこの部分のアドレスをコピーする” rel=”nofollow”> |
リンクコードの挿入⇒アフィリエイトボタン作成完了
上記でコピーしたアドレスを、先ほどのサウンドハウスのボタンを追加の際に書き加えたコードの、“アフィリエイトURL”という部分に貼り付ければ、リンクを貼ることが出来ます。
WordPressのビジュアル投稿画面だったら下記の場所にアドレスをペーストする事でリンクを貼ることが出来ます。
まとめ
『「カエレバ」に「サウンドハウス」ボタンを簡単にカスタマイズ』というタイトルで、カスタマイズ方法を解説させて頂きました。
ちなみに、サウンドハウス以外のボタンについても、上記の方法でリンクをカスタマイズすることも出来ると思うので、あなたの状況にあわせて、この記事を参考にしてもらえたら何よりです。
ではでは～。
