アフィンガーでカエレバ・ヨメレバのカスタマイズ方法【CSSコピペ】

アフィンガーでカエレバ・ヨメレバをオシャレに表示させたいけど、どうやってカスタマイズするの？

CSSのコピペで簡単にできる方法が知りたい。

こんなお悩みを解決してきます。

「カエレバ」「ヨメレバ」はAmazonや楽天、Yahoo!の商品や書籍を紹介、「トマレバ」は楽天トラベルやYahoo!トラベルなど宿泊予約サイトのプランを紹介することができます。

当ブログはワードプレステーマは「AFFINGER5（アフィンガー5）WING」を使用しており、カエレバ・ヨメレバ・トマレバでアフィリエイトリンクをボタンで設置しています。

今回は当ブログでも行っている、アフィンガーでカエレバ・ヨメレバ・トマレバのカスタマイズする方法をご紹介していきます。

CSSのコピペでできるので、初心者の方でも５分くらいでサクッと簡単できるカスタマイズとなっています。

カエレバ・ヨメレバのカスタマイズ前後のデザイン

最初にアフィンガーでのカエレバ・ヨメレバ・トマレバのカスタマイズ前後のデザインを見おきましょう。

カエレバ・ヨメレバのカスタマイズ前

下の画像がカエレバ・ヨメレバのカスタマイズ前のデザインです。

シンプルではありますが、リンクがわかりづらくクリックしづらいです。

カエレバ・ヨメレバのカスタマイズ後

アフィンガーでCSSコード用いてカエレバ・ヨメレバをカスタマイズすると、下記のようになります。

見た目が全然違いますよね。ブログの記事もオシャレに見えます。

クリック率アップ間違いなしです。

さっそく、カスタマイズ方法を見て行きましょう。

アフィンガーでのカエレバのカスタマイズ方法

アフィンガーでのカエレバ・ヨメレバ・トマレバのカスタマイズ方法を解説していきます。

CSSコードをコピペする

CSSコードは「RoughLog」さんが作成したコードを使用させて頂いております。

CSSコードのコピーはこちらのページから行って下さい。

アフィンガーで追加CSSに入力する

WordPressの管理画面から、「外観」→「カスタマイズ」→「追加CSS」をクリックします。

※CSSコードを追加するので、念のためバックアップを取っておくことを推奨します。

先ほどコピーしたCSSコードを、追加CSSに貼り付けるだけです。

アフィンガーでの設定はこれで終わりです！

カエレバ・ヨメレバのサイトでの設定

次にカエレバ・ヨメレバ。トマレバのサイトでの設定を行っていきます。

カエレバ・ヨメレバでリンクを作成

カエレバ、ヨメレバの公式ページにアクセスします。

お好きな商品を選んで、「ブログパーツを作る」をクリックします。

アフィンガーの場合は、必ず「amazlet風-2（cssカスタマイズ用）」を選択して下さい。

テキストリンクをコピーして、WordPressの投稿画面の「テキスト画面」に貼り付けします。

 アフィンガーでカスタマイズの確認する

テキストリンクをWordPressの投稿画面の「テキスト画面」貼り付けをしても、投稿画面の「ビジュアル画面」にカスタマイズは表示されません。

「プレビュー」で見ないと、カスタマイズが反映されているかどうか確認できません。

プレビューで確認して、カスタマイズが表示できてればこれで完成です。

アフィリエイトで夢を叶えた元OLブロガーが教える本気で稼げるアフィリエイトブログ

posted with ヨメレバ

亀山ルカ/染谷昌利 ソーテック社 2018年03月

楽天ブックス

楽天kobo

Amazon

Kindle

実際にボタンをクリックすると、商品リンクへ移動することができます。

アフィンガーでカエレバ・ヨメレバをカスタマイズしよう

アフィンガーでカエレバ・ヨメレバ・トマレバをCSSのコピペでカスタマイズする方法をご紹介しました。

物販系のアフィリエイトを行うには、Amazonや楽天、Yahoo!の商品リンクを載せるのが必須です。

カエレバ・ヨメレバを使用するのであれば、カスタマイズしてあった方が読み手にもわかりやすいので是非導入してみて下さい。

その他初心者におすすめのASPに関しては、下記の記事を参考にして下さい。

>>【初心者向け】登録すべきアフェリエイトASPおすすめ７選