アウトプットスタイル ブログ運用

【Affinger】Amazonと楽天のアフィリエイトリンクをおしゃれにカスタマイズする方法

2019年8月25日

Amazonの仕様変更によってカエレバやRINKERでリンクの生成ができなくなってしまったという人は多いんじゃないでしょうか

RINKERであれば楽天の商品から検索すればおしゃれなリンクをすばやく作成することができますが、Amazonにしかない商品を紹介したいときには不便ですよね

Amazonの商品を一定数の売り上げがあれば、RINKERから商品検索が行えますが、全く売り上げがない人は検索するとエラーが出てしまいます

そこで、今回はAFFINGER5で独自にアフィリエイトリンクをおしゃれにカスタマイズする方法をご紹介します

ちなみに以下が完成形です

おすすめ
[metaslider id="8288"]
VersionTek
USB3.0 ポータブルDVDドライブ
2,750円(税込)
※2019/8/12時点 Amazon調べ
Amazonで詳細を見る 楽天市場で詳細を見る

それぞれデザインの好みがあると思いますが、このデザインが気に入った方はぜひ使ってみてください

ポイント

CSSの追加は外観>テーマエディターではなくカスタマイズ>追加CSSから行うようにしてください

アフィリエイトリンク用ボックスカスタマイズ

まずはアフィリエイトリンクを囲うボックスのデザインです

以下を追加CSSにコピペしてください

アフィリエイトリンク用ボタンカスタマイズ

次にリンクボタンのデザインです

以下を追加CSSにコピペしてください

アフィリエイトリンク用HTML

あとはアフィンガーのショートコードと組み合わせて以下のように記載します

AddQuicktagに登録しておくとすぐに使えて便利ですよ

ちなみに上のHTML内の[スライドショートコード]と記載した箇所には、「MetaSlider」というプラグインで生成したショートコードを挿入しています

MetaSliderについては以下記事で紹介しているので参考にしてください

関連記事
WordPressで複数画像のスライドを記事内に簡単に表示する方法

何かをブログ内で紹介したいとき、複数の画像を一気に見せたいときってありませんか? でも見せたい画像を全部貼り付けてしまうと、縦長になってかっこわるい…… ひとつの画像スペースで複数の画像を見せることが ...

続きを見る

-アウトプットスタイル, ブログ運用

Copyright© イキカタシフト , 2020 All Rights Reserved Powered by AFFINGER5.