と、探してみたら、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で表示されてます。
↓これは画像