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

wordpress
この記事は約6分で読めます。
Sponsor Link
Sponsor Link

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

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

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

商品リンクの見た目

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

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

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

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

title指定を使っているので実際にAmazonで見るタイトルとは変わっています
アップデートがありver1.3.1~ カタログ写真表示オプションが付きました!
この機能はデフォルトでオンになっているとの事です

商品リンクの作り方

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

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

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

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

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

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

Sponsor Link

追記したコード

実際に子テーマの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ボタンの方にも色を少し変えた枠を付けました

やっぱり当サイトでは他を白抜きにしてる為気になったので変更しました
SSからの変更→白抜きにしてホバー時にサイトカラーへ

モバイル表示(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]

タイトルとURLをコピーしました