お得なAmazonタイムセールはこちらをクリック!!
本ページはプロモーションが含まれています

Cocoonの商品リンクにサウンドハウス等のボタンを追加する方法

この記事は約8分で読めます。

こんにちは!ふるのーと(fullnote)です!(*^^*)

本日はワードプレスでブログを運営していて、Cocoonをテーマとして使っている音楽ブロガーさん向けのカスタマイズをご紹介します。

Cocoonについてはこちらもどうぞ
【爆速】WordPressテーマをSimplicity⇒Cocoonに移行したのでレビュー!

スポンサーリンク

Cocoonの商品リンクボタン

Cocoonには、Amazonや楽天、YahooショッピングといったECサイトで販売されている商品を対象としてアフィリエイトリンクを自動生成する機能が標準でついています。

当初Cocoonにはこの機能はなかったのですが、のちにプラグイン不要で利用できる機能が実装されました。

似たような機能にRinkerというプラグインがありますね。

【報告】Cocoonにカエレバ代替Rinkerプラグインを導入してみたよ!

Cocoonの商品リンクボタンの設定と使い方法

Cocoonの商品リンクボタンを利用するには初期設定が必要になります。

詳しくは公式サイトを参考にしてください。
Amazon商品リンクの初期設定方法と使い方

もしもアフィリエイトに登録したり、Cocoon設定画面でそのidを入力したりします。

Cocoonの商品リンクボタンの使い方も、ここでは詳しくは説明しませんが、ブックマークレットというおすすめの方法があるので是非一度利用してみてください。
Amazon商品リンクブックマークレットの使い方

このブックマークレットという方法を使うとワンクリックで以下のようなショートコードが作成できます。

[amazon asin="B000CZ0R42" kw="SHURE ダイナミックマイク SM58 スイッチ無し SM58-LCE 【国内正規品】"]

あとはコレを投稿画面にコピペすれば以下のような商品リンクが作成できます。

サウンドハウスなどのAmazon・楽天以外の商品リンクボタンの追加したい

さて、今回の本題ですが、音楽ブログを行っていると、楽器の紹介が多くなってくると思います。

そうなるとサウンドハウスのリンクも追加しておきたくなりますよね。

ただし、普通にショートコードを貼るだけでは、サウンドハウスのリンクは生成できません。

ボタンを追加したかったので、Cocoonのフォーラムで要望を出したところ、「すでにカスタマイズ機能はあるぞ!」と怒られました(;^ω^)

さすがわいひらさんですね。

こちらのページの一番下に詳しく載っていました。
Amazon商品リンクショートコードの使い方。サンプルコード満載で解説。

要はショートコードの最後に「 btn2_url=”リンクURL” btn2_text=”サウンドハウス” 」と追加すればOKです。

なお、btn1は先頭にボタンが設置され、btn2とすると最後尾にボタンが設置されるようになります。

でも私はCocoonサイトのマニュアルを見て思ったんですよね。

ぱんだ先輩
ぱんだ先輩

サウンドハウスのボタンはにしたい。。

btn1は紺色だし、btn2は緑色なんですよね。

裏メニュー?紫色のbtn3が存在した。。。

どうせサウンドハウスのリンクボタン作るなら紫のボタン作りたいじゃないですか。

そう思ったら、公式サイトのマニュアルには載っていないbtn3というオプションが存在しました。

先程と同様にショートコードの最後に「 btn3_url=”リンクURL” btn3_text=”サウンドハウス” 」または「btn3_tag=’アフィリンクタグ’」と追記するだけで紫色のボタンが生成されます。

ぱんだ先輩
ぱんだ先輩

まじかー!わいひらさんすごすぎやろー!

ちなみに生成したリンク表示はこちら↓

ショートコードはこちら↓

[amazon asin="B000UPEJCU" kw="SONY 密閉型スタジオモニターヘッドホン MDR-CD900ST" btn3_tag='<a href="http://h.accesstrade.net/sp/cc?rk=01001xqc00hsxk&url=https%3A%2F%2Fwww.soundhouse.co.jp%2Fproducts%2Fdetail%2Fitem%2F71265%2F" rel="nofollow" target="_blank">サウンドハウス<img src="http://h.accesstrade.net/sp/rr?rk=01001xqc00hsxk" width="1" height="1" border="0" alt="" /></a>']

cssでリンクボタンの色は変えられる

今回、btn3が存在したので紫はそちらを使うことができます。

ただ、他の色を使いたいときはどうしたらよいか?

そんなときはcssをいじると色を変えることができます。

ただし、全部変わってしまうので変更には十分注意しましょう。

専用にbtn4も作ろうと思えば作れるのだと思いますが、まだ良くわかっていません。
どなたか教えてくださいませ。
このページを参考にfunction.phpとstyle.cssをさわればできるのかな?
コピペで実装!WordPressでAmazon PA-APIを利用して商品リンクを表示するカスタマイズ方法
時間があるときに見ておきます。

実は商品リンクボタンの色の変更方法は前に記事にしていますのでこちらを参考にしてみてください。

【カスタマイズ】Cocoonの商品リンクボタンを管理プラグインRinkerの色にしてみた

ちなみにサウンドハウスのボタンの色も少しだけ変えていて以下をcssを小テーマに追加しています。

.shoplinkbtn3 a {
background: #955F91;
}

デフォルトから少しだけ薄い紫にしています。

良かったら参考にしてみてください。

【登録必須】サウンドハウスを取り扱っているASPはアクセストレード

ちなみにサウンドハウスのアフィリエイトを扱っているのは現状アクセストレードのみとなっています。

音楽ブロガーの皆さんはこの機会に必ず登録しておきましょう。

もちろん登録無料です。

アクセストレードのお申込みはこちら

【追記】サウンドハウスの一発リンクつくるブックマークレット作ったよ。

サウンドハウスの一発リンクつくるブックマークレット作ったのでよかったらワンコインお願いします!!

内容は同じです⇒【Cocoon】サウンドハウス&アクセストレードの商品リンク用ブックマークレットを作ったよ!

内容は同じです⇒https://note.com/fullnote/n/ncb6544245702

まとめ:音楽ブロガーはCocoonの商品リンクをカスタマイズしてサウンドハウスのリンクを追加しよう

音楽系ブロガーのみなさんはサウンドハウスのリンクを追加すると収益が増えるという説があるので是非アクセストレードに登録してリンクを追加しておきましょう。

無料でこんな機能まで提供してくれるCocoonの製作者わいひらさんには頭があがりませんね。

それでは今日はこの辺で! ふるのーと(fullnote)でした!(*^^*)

ブログ初心者のかたは色々なツールがあるので一度以下に記載のあるようなツール類は目を通しておくと良いかもしれません。

【完全版】ブロガー必見!おすすめサイト/サービスツール比較まとめ【メモ】

あくまで自分の備忘録用にメモしているだけのページですが参考になるものが見つかるかもしれません。

美味しい食事と音楽に囲まれて毎日笑顔を大切に過ごしています。
ブログもYoutubeものんびりとやっています。(*^^*)

fullnoteをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
Wordpress
スポンサーリンク
ふるのーとさんのブログ
タイトルとURLをコピーしました