アマゾンリンクを簡単に整えるCSSないかなぁ(アフィリエイトリンクっていうんだね)

アマゾンリンクを簡単に整えるCSSないかなぁ(アフィリエイトリンクっていうんだね)

プログラム

と、探してみたら、CSSよりもやっぱりプラグインいれたらいいやん、ということでした。

こちらではプラグインに頼らずに開発する方法も丁寧に書いてありました。

【簡単】アマゾンアフィリエイトリンクのつくり方【ヨメレバ・カエレバではないよ】

が、プラグインがあったそうで、そちらを導入、しかし、しばらく開発されていないプラグインなので、使用は環境によりますかね。
使い方は、開発者さんのページに詳しく書いてあります。
カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ

WPのプラグイン検索で「kattene」で検索して、インストールして有効化。

あとは、投稿画面で、下記コードを入力。
【画像URL】などの【から】までを書いてあるとおりに持ってくればよいのです。


[kattene]
{
"image": "【画像URL】",
"title": "【タイトル】",
"description": "【説明】",
"sites": [
{
"color": "orange",
"url": "【メインのURL】",
"label": "Amazon",
"main": "true"
},
{
"color": "blue",
"url": "【商品のURL】",
"label": "Kindle"
},
{
"color": "red",
"url": "【商品のURL】",
"label": "楽天"
},
{
"color": "green",
"url": "【商品のURL】",
"label": "楽天Kobo"
},
{
"color": "pink",
"url": "【商品のURL】",
"label": "audiobook"
}
]
}
[/kattene]

これが基本形。
アマゾンだけでいい、という人は


[kattene]
{
"image": "【画像URL】",
"title": "【タイトル】",
"description": "【説明】",
"sites": [
{
"color": "orange",
"url": "【メインのURL】",
"label": "Amazon",
"main": "true"
}
]
}
[/kattene]

これでアマゾンボタンだけが表示されます。
↓これはHTMLで表示されてます。

【対応機種】Rode wireless go ii / i ワイヤレスマイクシステム WIGO 、RODE Microphones ロードマイクロフォンズ Wireless GO 1/ 2対応

↓これは画像
katteneでアマゾンだけ使うとこんなふうに表示されます