【Cocoon】商品リンク機能に個別ボタンが追加されたので乗り換えてみた

Cocoon Ver1.3.0～ Amazon、楽天などの商品リンクを挿入するショートコードに個別ボタンが追加されました
今まではAmazon Associates Link Builderを使っていて、書き換えが面倒な事もあり放置していました

Amazon Associates Link Builder

アフィリエイトリンクの効率的な作成を支援する、Amazon アソシエイト・プログラムの公式プラグインです。

ja.wordpress.org

今回個別ボタンを追加する事が出来るようになったので乗り換えてみました
CSSファイルへの追記などをしたので、備忘録的な記事を書いておきます

商品リンクの見た目

使えるショートコードのサンプルは作者であるわいひらさんが詳しく書いてくれています

Amazon商品リンクショートコードの使い方。サンプルコード満載で解説。

Amazon商品リンク作成ショートコードの使い方を、出来る限り優しく説明しています。便利なオプションもあるので、欲しい見た目をある程度手に入れることができます。

wp-cocoon.com

変更を加えていない状態はこんな感じです

自分用に変更を加えた物はこんな感じになります

サイトカラーを使った方が分かり易いけど、あまり濃い色だと合わないなと思ったのでこのような感じになりました

Amazon商品リンクのカタログ写真表示オプションの使い方

Amazon商品の関連写真をカタログ形式でブログパーツに表示する機能です。

wp-cocoon.com

商品リンクの作り方

指定できる物が沢山ありますが、自分は以下をAddQuicktagに登録して
その時に必要な部分を入力したり削除したりして使っています

[ amazon asin="" kw="" title="" image_index=0 size="m" btn2_url="" btn2_text="" ]

記事用に括弧の前後に半角スペースを入れていますが、実際に使用する時はスペースはありません

現在は以下のブックマークレットを使用しています

CocoonのAmazon商品リンクショートコードをボタン一発で作成するブックマークレットを作った

CocoonのAmazon商品紹介用ショートコードを自動作成するブックマークレットを作りました。カエレバやヨメレバのかわりにCocoonの機能を使う人は便利かと...

bloglab.naenote.net

ブックマークレットをブックマークへ登録しておき、商品リンクを作りたいページへ行き
登録しておいたブックマークレットを開くと

このようなポップアップが開くのでコピーして記事に貼り付けるだけ！

追記したコード

実際に子テーマのstyle.cssへ追記したものは以下になります
まずはボックス自体の幅を100％にしマージンとボーダーを変更しています

.product-item-box {
    width: 100%;
    margin: 1em auto;
    border: 5px double #ddd;
}

次に内容部分を変更
左パディング値と行の高さを変更しました

.product-item-content {
    padding-left: 35px;
    line-height: 150%;
}

価格の部分を少し目立つようにフォントサイズと太さを変更

.item-price {
    font: 700 15px "M PLUS Rounded 1c";
}

ボタン部分

あとはボタン部分を変更して完成です

/* amazon */
.shoplinkamazon a {
    color: #f79901;
    background: #fcfcfc;
    border: 1px solid #f79901;
}
.shoplinkamazon a:hover {
    color: #fcfcfc;
    background: #de8b04;
}
/* rakuten */
.shoplinkrakuten a {
    color: #ec3e3e;
    background: #fcfcfc;
    border: 1px solid #ec3e3e;
}
.shoplinkrakuten a:hover {
    color: #fcfcfc;
    background: #d63535;
}
/* yahoo */
.shoplinkyahoo a {
    color: #e60033;
    background: #fcfcfc;
    border: 1px solid #e60033;
}
.shoplinkyahoo a:hover {
    color: #fcfcfc;
    background: #e60033;
}
/* その他 */
.shoplinkbtn1 a, .shoplinkbtn2 a {
    color: #999;
    background: #fcfcfc;
    border: 1px solid;
}
.shoplinkbtn1 a:hover, .shoplinkbtn2 a:hover {
    color: #fcfcfc;
    background: #a0a0a0;
}

個別ボタンの背景を白くして枠を付けたらAmazonボタンと微妙に高さが変わったので
Amazonボタンの方にも色を少し変えた枠を付けました

モバイル表示(480px以下)の部分に以下を追記

@media screen and (max-width: 480px){
  ｜
.item-price {
    font-size: 14px;
}

.product-item-content {
    text-align: left!important;
}

.product-item-snippet {
    padding-left: 25%;
    text-align: left;
}

PCと同じ文字サイズだと少し大きいかなと思ったので14pxへ
モバイル表示だと内容とメーカー名？販売者名？がセンターに来ていたので
左寄せにし左パディングで調整をしました

おわり

テーマに商品リンクのショートカットが付いた時に「プラグイン減らせるしなぁ…」
と思ってこっちを使おうかなと考えた事もありましたが、記事の冒頭にも書いた通り
書き換えが面倒だしまあ良いか…となってたんですよね
しかし今回個別ボタンが追加されたので重い腰を上げ書き換えました…面倒くさかったぁ

今までは記事の最後にリンクを貼ったり、近くにカードを入れたりしてましたからね
毎回使う訳ではないけど、公式サイトだったり別のリンクを1ヶ所にまとめられるのは有り難いです

個別にプラグインを入れる必要がなく、AMPにも対応しているので
Amazon、楽天、ヤフーの商品リンクを使っていて、この機能を使っていない人は
乗り換えを検討するのもありだと思いますよ…書き換えが面倒でなければ…ですが

[share]