WING(Affinger5)

WING(アフィンガー5)トマレバ、カエレバのカスタマイズ方法まとめ

更新日:

トマレバ・ヨメレバ・カエレバ カスタマイズまとめ

 

お気に入りのホテルや商品を紹介するのに、こんなリンク画像を使ってみたくありませんか?

WordPressテーマの「WING(AFFINGER5)」にて、上記のようなリンクを「トマレバ・ヨメレバ・カエレバ」ツールを使って作る方法を、この記事では紹介します。

コピペでOKですので、気になる方はのぞいていってみてください。

 

 

トマレバ・ヨメレバ・カエレバとは ?

トマレバ・ヨメレバ・カエレバは、複数のアフィリエイトリンク表示を同時に手軽に作ることができるツール。

特定ASPのIDをあらかじめ登録しておくことで、紹介したい商品やホテルへのリンクを簡単に作ることができます。

 

 メリット

オススメしたい商品やホテルが

  • Amazon
  • 楽天
  • Yahoo
  • その他etc

上記のどれでも紹介できる場合、アフィリエイトリンクとして、どれを使うべきか?迷ったことはないでしょうか。

サイトを訪れるユーザーも

ウチはポイント貯めてるから通販は絶対楽天!

という家族もいれば

使うのはやっぱAmazonだよな~プライムに加入してるし♪

という人もいるでしょう。

で、サイトで紹介した商品が気に入って「購入したい!」と思ってもらったとしても、そこに置いてあったショップのリンクがいつもの購入先・予約先と違ったら買いませんよね・・

ですが、トマレバ・カエレバ・ヨメレバでは、複数ショップのリンクを一括で設置しておけます。ユーザーにとって最適なリンクを選べるようにしておくことで、とりこぼしを減らすことが期待できるのです。




 

トマレバ・カエレバ・ヨメレバの作り方

リンクソースは、「トマレバ・カエレバ・ヨメレバの専用作成サイト」から、以下のような手順で簡単に作ることができます。

  1. ASPのIDを予め登録
  2. 生成したいリンクの商品キーワードを入力

具体的なやり方は上記専用サイト内に説明がされていますので、そちらを参照してみてください。

 

 問題点

このように、便利なツールであるトマレバ・カエレバ・ヨメレバですが、オリジナルソースのままだとデザインがとってもシンプルです。

このままでも問題はありませんが、シンプルすぎて、テキストの中に埋もれていってしまう可能性もありますよね。

さりげなくリンクを置いておく・・という手法ならオリジナルのままも勿論アリですが、「リンクはクリックされてナンボ」なので、少しでもクリック率を向上させるような取り組みは重要です。

その手段の一つとして、カエレバ・トマレバ・ヨメレバリンクをカスタマイズして見栄えを良くする方法を解説していきます。

カスタマイズするとこんな感じに!

 

 

 WING(Affinger5)でトマレバツールをカスタマイズする方法

ではここからは、具体的にどうやってリンクデザインのカスタマイズをするのか?その方法を手順を追って解説していきます。

カスタマイズは、CSSコードを編集する作業になります。ちなみにCSSとは、Webで表示される文字や形のデザインを変えるためのプログラムコードのことです。

トマレバツールのリンクも、CSSをカスタマイズ設定してあげることで、自分好みのデザインに変えることができます。

一見すると難しそうですが、この記事ではそのままコピー&ペーストして使えるソースを用意してますので、誰でも簡単にできます。ご安心ください。

 

トマレバ・カエレバ・ヨメレバで「CSSカスタマイズ用コード」を生成

「追加CSS」コマンドにカスタマイズ用のCSSコード記載をしたら、次に紹介したい宿・商品のリンクテキストをトマレバ・カエレバ・ヨメレバの専用サイトで生成します。

ここでの注意点として、カスタマイズして見た目を変えたい場合、専用サイトで生成するコードは「Amazlet風-2(CSSカスタマイズ用)」である必要があります。

CSSカスタマイズ用コードの場合のみ、デザインの変更が効くように設定されています。

 

ヨメレバ設定

 

 

コードを生成したら、それをコピーしてAffinger5の記事投稿画面に記載しましょう。

ちなみに生成されたリンクソースはHTMLテキスト形式なので、Affinger5の記事投稿編集画面ではテキストエディタにHTMLテキストを貼り付けて使用します。

step
1
生成されたHTMLテキストをコピー

ヨメレバリンクコピー

 

step
2
Wordpress投稿画面のテキストエディタに貼り付け

ヨメレバテキスト貼り付け

 

Affinger5画面にて、CSSコードを「追加CSS」欄に記載する

カエレバ・ヨメレバ・トマレバのHTMLテキストが貼り付けが完了したら、次はそれをカスタマイズするためのコードの編集をします。

Affinger5では「追加CSS」というコマンドがあり、そこにカスタマイズ用のCSSコードを記載することで、リンクのデザインを変更することができます。

 

Affinger5追加CSS画面

 

ココに注意

「追加CSS」へ入力するようにしましょう。「テーマや子テーマのCSS入力画面」にCSSコードを書き込んでも上手く反映されません。

ちなみに「追加CSS」コマンドへは、「外観」⇒「カスタマイズ」⇒「追加CSS」でたどり着くことができます。




 

 カスタマイズ用のCSSコード

「追加CSS」欄にペーストするCSSコードを紹介します。コピー&ペ-ストでそのまま貼り付ければ使えるようになっています。

 

 光る&押した感じのするボタンリンク

見本のリンク

 

ココに注意

CSSコード追記で何か不具合が生じる可能性は低く、仮に生じたとしても消せば元通りになることがほとんどです。

ただ、予期せぬ事態もあり得ますので、コード追記する前にバックアップをとることを推奨します。

 

 まとめ

WING(Afiinger5)」にてトマレバ・ヨメレバ・カエレバのデザインカスタマイズは、「追加CSS」欄にカスタマイズしたいコードを記載することで可能です。

カスタマイズ用のコードは上記で紹介したものなどを使えば可能なので、参考にしてみてください。

 

-WING(Affinger5)
-, ,

Copyright© LeGoon Blog-我が家の忘備録- , 2019 All Rights Reserved Powered by AFFINGER5.