Cocoonには商品紹介のショートコードがあります。
これまでは手動でAmazonアソシエイトツールバーでリンクを取得していたんですが、これがまぁ大変。
ショートコードを利用するとISDNなどの商品コードだけで画像や商品名を表示することできることに気づきました。
この記事で説明すること
これまでのやり方は大変だった
見出しやボタンを組み合わせて、作っていました。


画像リンクやテキストリンクなどをコピーしてくるのに、かなり時間がかかります。
それを、こんなふうにしました。


見た目にもコンパクトだし、何よりも気軽に使えます
APIの設定をする
事前の設定は、cocoonの設定のAPIからです。
AmazonのAPIキーを取得して入力します。
あとは、投稿の中にショートコードから [amazon asin=***]
のように挿入できます。
この***は、書籍の場合は、10桁のISBNを入力します。
例えば、「ISBN10:4046046783」というのをAmazonの商品紹介ページで確認してきます(書籍はISBNだけど、商品はASINというコードがある)。


で、↓こうなります。
スタイルシートをブログカード風にした
ついでに商品紹介のスタイルをブログカードのデザインに寄せてみました。
もとはこんな感じでした。


ブログカードのように、画像を右にしてみました。


商品画像を右にするのに苦労しました。


/*amazon*/
.product-item-box {
padding: 1.6% 2.2% 2%;
width: 100%;
margin-top: 10px;
border: 1px solid #f9c00d;
border-radius: 4px;
}
.product-item-error {
display: none;
}
.product-item-thumb {
position: relative;
float: right !IMPORTANT;
margin-left: auto;
margin-right: 0 !important;
}
.product-item-thumb a {
margin: 0 !important;
}
.product-item-thumb img {
margin-left: auto !important;
margin-right: auto !important;
}
@media screen and (min-width: 769px) {
.product-item-box {
display: block !IMPORTANT;
}
.product-item-content {
padding-left: 0;
}
}
.product-item-content {
display: block;
position: relative;
margin: 0;
}
.product-item-title a {
margin-top: 8px;
font-size: 18px;
font-weight: 600;
color: black;
text-decoration-line: none;
}
@media screen and (max-width: 1023px) {
.product-item-title a {
font-size: 16px;
}
}
.product-item-snippet {
font-size: 14px;
}
Amazonショートコードのよく使うカスタマイズ
例
そのまま


タイトルを短く、商品説明を削除


タイトルのみのテキストリンク


こちらもどうぞ。


ブログをnote風のデザインにしてみた
今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。◆ note風デザインの記事一覧 ◆「note(ノート)」というブログサービスをご存知ですか?...


見出しに吹き出しをつけるスタイルをやめた
見出しに吹き出しつけるCSSを入れていたんですが、やめることにしました。こんな見た目でした/** 見出しに吹き出しをつける */@media screen { #container h2 { pos...
QRコードを読み込むと、関連記事を確認できます。