注意
ヨメレバ・カエレバに関しては、Amazon側の仕様変更により、アソシエイトの紹介コードが生成できなくなってしまいました・・。
代替えツールの紹介と、そのカスタマイズは下記リンクを参考にしてください！
-
-
カエレバの代わりのツール徹底比較！初心者に一番使いやすいのはどれ？
商品紹介のリンクを作るための優秀な無料ツール、「カエレバ」＆「ヨメレバ」。 ですが、2019年中頃からAmazonアソシエイトに対応しなくなってしまったんですよね・・ この記事は カエレ ...
続きを見る
-
-
「かんたんリンク」が押ボタン風に光る！アフィンガー用カスタマイズコード
「」の「かんたんリンク」は Amazon 楽天 Yahooショッピング のアフィリエイトリンクが手軽に作ることができます。 すごく優良なツールですが、そのまま使うと見栄えが ...
続きを見る
お気に入りのホテルや商品を紹介するのに、こんなリンク画像を使ってみたくありませんか？
リンク
WordPressテーマの「WING(AFFINGER5)」にて、上記のようなリンクを「トマレバ・ヨメレバ・カエレバ」ツールを使って作る方法を、この記事では紹介します。
コピペでOKですので、気になる方はのぞいていってみてください。
トマレバ・ヨメレバ・カエレバとは ？
トマレバ・ヨメレバ・カエレバは、複数のアフィリエイトリンク表示を同時に手軽に作ることができるツール。
特定ASPのIDをあらかじめ登録しておくことで、紹介したい商品やホテルへのリンクを簡単に作ることができます。
メリット
オススメしたい商品やホテルが
- Amazon
- 楽天
- Yahoo
- その他etc
上記のどれでも紹介できる場合、アフィリエイトリンクとして、どれを使うべきか？迷ったことはないでしょうか。
サイトを訪れるユーザーも
ウチはポイント貯めてるから通販は絶対楽天！
という家族もいれば
使うのはやっぱAmazonだよな～プライムに加入してるし♪
という人もいるでしょう。
で、サイトで紹介した商品が気に入って「購入したい！」と思ってもらったとしても、そこに置いてあったショップのリンクがいつもの購入先・予約先と違ったら買いませんよね・・
ですが、トマレバ・カエレバ・ヨメレバでは、複数ショップのリンクを一括で設置しておけます。ユーザーにとって最適なリンクを選べるようにしておくことで、とりこぼしを減らすことが期待できるのです。
トマレバ・カエレバ・ヨメレバの作り方
リンクソースは、「トマレバ・カエレバ・ヨメレバの専用作成サイト」から、以下のような手順で簡単に作ることができます。
- ASPのIDを予め登録
- 生成したいリンクの商品キーワードを入力
具体的なやり方は上記専用サイト内に説明がされていますので、そちらを参照してみてください。
問題点
このように、便利なツールであるトマレバ・カエレバ・ヨメレバですが、オリジナルソースのままだとデザインがとってもシンプルです。
このままでも問題はありませんが、シンプルすぎて、テキストの中に埋もれていってしまう可能性もありますよね。
さりげなくリンクを置いておく・・という手法ならオリジナルのままも勿論アリですが、「リンクはクリックされてナンボ」なので、少しでもクリック率を向上させるような取り組みは重要です。
その手段の一つとして、カエレバ・トマレバ・ヨメレバリンクをカスタマイズして見栄えを良くする方法を解説していきます。
カスタマイズするとこんな感じに！
WING(Affinger5)でトマレバツールをカスタマイズする方法
ではここからは、具体的にどうやってリンクデザインのカスタマイズをするのか？その方法を手順を追って解説していきます。
カスタマイズは、CSSコードを編集する作業になります。ちなみにCSSとは、Webで表示される文字や形のデザインを変えるためのプログラムコードのことです。
トマレバツールのリンクも、CSSをカスタマイズ設定してあげることで、自分好みのデザインに変えることができます。
一見すると難しそうですが、この記事ではそのままコピー＆ペーストして使えるソースを用意してますので、誰でも簡単にできます。ご安心ください。
トマレバ・カエレバ・ヨメレバで「CSSカスタマイズ用コード」を生成
「追加CSS」コマンドにカスタマイズ用のCSSコード記載をしたら、次に紹介したい宿・商品のリンクテキストをトマレバ・カエレバ・ヨメレバの専用サイトで生成します。
ここでの注意点として、カスタマイズして見た目を変えたい場合、専用サイトで生成するコードは「Amazlet風-2（CSSカスタマイズ用）」である必要があります。
CSSカスタマイズ用コードの場合のみ、デザインの変更が効くように設定されています。
コードを生成したら、それをコピーしてAffinger5の記事投稿画面に記載しましょう。
ちなみに生成されたリンクソースはHTMLテキスト形式なので、Affinger5の記事投稿編集画面ではテキストエディタにHTMLテキストを貼り付けて使用します。
step
1生成されたHTMLテキストをコピー
step
2Wordpress投稿画面のテキストエディタに貼り付け
Affinger5画面にて、CSSコードを「追加CSS」欄に記載する
カエレバ・ヨメレバ・トマレバのHTMLテキストが貼り付けが完了したら、次はそれをカスタマイズするためのコードの編集をします。
Affinger5では「追加CSS」というコマンドがあり、そこにカスタマイズ用のCSSコードを記載することで、リンクのデザインを変更することができます。
ココに注意
「追加CSS」へ入力するようにしましょう。「テーマや子テーマのCSS入力画面」にCSSコードを書き込んでも上手く反映されません。
ちなみに「追加CSS」コマンドへは、「外観」⇒「カスタマイズ」⇒「追加CSS」でたどり着くことができます。
カスタマイズ用のCSSコード
「追加CSS」欄にペーストするCSSコードを紹介します。コピー＆ペ－ストでそのまま貼り付ければ使えるようになっています。
押した感じのするボタンリンク
見本のリンク
/*=================================================================================
カエレバ・ヨメレバ・トマレバ (WING)Affinger5用カスタマイズ（押した感じ）
=================================================================================*/
.cstmreba {
width:98%;
height:auto;
margin:36px auto;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
display: block;
}
.cstmreba a {
transition: 0.3s ;
/* テキストリンクカラー */
color:#285EFF;
}
.cstmreba a:hover {
/* テキストリンクカラー(マウスオーバー時) */
color:#ff1744;
}
/*全体のボックス設定 */
.cstmreba .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box {
width: 100%;
/* 全体の背景カラー */
background-color: #F1F8E9;
overflow: hidden;
border-radius: 0px;
box-sizing: border-box;
padding: 12px 8px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
/* サムネイル画像 */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:150px;
float:left;
margin:0 14px 0 0;
text-align: center;
/* サムネイル背景カラー */
background: #F1F8E9;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
width:100%;
display:block;
}
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img,
.cstmreba .tomarebalink-image a img {
margin:0 ;
padding: 0;
text-align:center;
background: #F1F8E9;}
.cstmreba .booklink-image a:hover,
.cstmreba .kaerebalink-image a:hover,
.cstmreba .tomarebalink-image a:hover {
opacity: 0.7;
}
/* 著者・住所情報配置 */
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
overflow:hidden;
line-height:170%;
color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
text-decoration: none;
}
/* 本・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
border-bottom: 1px solid ;
font-size:16px;
font-weight: bold;
}
/* タイトル下の余白最小 */
.cstmreba .kaerebalink-name p,
.cstmreba .booklink-name p,
.cstmreba .tomarebalink-name p {
margin: 0;
}
/* powered by （非表示）*/
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
font-size:0px;
line-height:0%;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
font-size:12px;
}
.cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img {
display:none !important;
}
.cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
display: inline-block;
width: 100%;
margin-top: 5px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
float:left;
width:48%;
min-width:128px;
margin:0.5%;
}
/***** ボタンデザイン ******/
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
position:relative;
width: 100%;
display: inline-block;
text-align: center;
box-sizing: border-box;
margin: 1px 1px;
padding:3% 0.5%;
border-radius: 8px;
font-size: 13px;
font-weight: bold;
line-height: 180%;
color: #fff;
box-shadow: 0px 4px 0 #455A64;
transition: 0.2s all ease 0s;
}
.cstmreba .shoplinkamazon :after,
.cstmreba .shoplinkrakuten :after,
.cstmreba .shoplinkjalan :after,
.cstmreba .shoplinkjtb :after,
.cstmreba .shoplinkknt :after,
.cstmreba .shoplinkikyu :after,
.cstmreba .shoplinkrurubu :after,
.cstmreba .shoplinkyahoo :after,
.cstmreba .shoplinkbellemaison :after,
.cstmreba .shoplinkcecile :after,
.cstmreba .shoplinkkakakucom :after,
.cstmreba .shoplinkkindle :after,
.cstmreba .shoplinkrakukobo :after,
.cstmreba .shoplinkbk1 :after,
.cstmreba .shoplinkehon :after,
.cstmreba .shoplinkkino :after,
.cstmreba .shoplinktoshokan :after,
.cstmreba .shoplinkseven :after{
content:'';
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
}
/* トマレバ */
/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #ff1744; border: 2px solid #ff1744; overflow:hidden}
/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #FB8C00; border: 2px solid #FB8C00; overflow:hidden}
/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #7E57C2; border: 2px solid #7E57C2; overflow:hidden}
/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkknt a { background: #00ACC1; border: 2px solid #00ACC1; overflow:hidden }
/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #A1887F; border: 2px solid #A1887F; overflow:hidden }
/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #e53935; border: 2px solid #e53935; overflow:hidden }
/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #7CB342; border: 2px solid #7CB342; overflow:hidden }
/* カエレバ */
/* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#7E57C2; border:2px solid #7E57C2; letter-spacing:normal; overflow:hidden }
/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#00ACC1 ; border: 2px solid #00ACC1; overflow:hidden }
/* セシール */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#e53935; border: 2px solid #e53935; overflow:hidden }
/* 価格コム */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#7CB342; border: 2px solid #7CB342; overflow:hidden }
/* ヨメレバ */
/* Kindle */
.cstmreba .booklink-link2 .shoplinkkindle a { background:#7E57C2; border: 2px solid #7E57C2; overflow:hidden }
/* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000; overflow:hidden }
/* honto */
.cstmreba .booklink-link2 .shoplinkbk1 a { background:#00ACC1; border: 2px solid #00ACC1; overflow:hidden }
/* ehon */
.cstmreba .booklink-link2 .shoplinkehon a { background:#F9A825; border: 2px solid #F9A825; overflow:hidden }
/* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinkkino a { background:#e53935; border: 2px solid #e53935; overflow:hidden }
/* 図書館 */
.cstmreba .booklink-link2 .shoplinktoshokan a { background:#546E7A; border: 2px solid #546E7A; overflow:hidden }
/* カエレバ・ヨメレバ共通 */
/* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
background:#FB8C00;
border: 2px solid #FB8C00; overflow:hidden
}
/* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a,
.cstmreba .booklink-link2 .shoplinkrakuten a {
background: #ff1744;
border: 2px solid #ff1744; overflow:hidden
}
/* 7net */
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a {
background:#225496;
border: 2px solid #225496; overflow:hidden
}
/***** ボタンデザイン マウスオーバー時 *****/
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
box-shadow: none;
transform: translate3d(0, 3px, 0);
}
.cstmreba .booklink-footer {
clear:both;
}
/***** 解像度768px以下のスタイル *****/
@media screen and (max-width:768px){
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:100%;
float:none;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
width: 49%;
margin: 0.5%;
}
.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info {
text-align:center;
padding-bottom: 1px;
}
}
/***** 解像度480px以下のスタイル *****/
@media screen and (max-width:480px){
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
width: 98%;
margin: 0.5%;
}
}
押した感じのする＆光るボタンリンク
/*=================================================================================
カエレバ・ヨメレバ・トマレバ (WING)Affinger5用カスタマイズ（光る＆押した感じ）
=================================================================================*/
.cstmreba {
width:98%;
height:auto;
margin:36px auto;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
display: block;
}
.cstmreba a {
transition: 0.3s ;
/* テキストリンクカラー */
color:#285EFF;
}
.cstmreba a:hover {
/* テキストリンクカラー(マウスオーバー時) */
color:#ff1744;
}
/*全体のボックス設定 */
.cstmreba .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box {
width: 100%;
/* 全体の背景カラー */
background-color: #F1F8E9;
overflow: hidden;
border-radius: 0px;
box-sizing: border-box;
padding: 12px 8px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
/* サムネイル画像 */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:150px;
float:left;
margin:0 14px 0 0;
text-align: center;
/* サムネイル背景カラー */
background: #F1F8E9;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
width:100%;
display:block;
}
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img,
.cstmreba .tomarebalink-image a img {
margin:0 ;
padding: 0;
text-align:center;
background: #F1F8E9;}
.cstmreba .booklink-image a:hover,
.cstmreba .kaerebalink-image a:hover,
.cstmreba .tomarebalink-image a:hover {
opacity: 0.7;
}
/* 著者・住所情報配置 */
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
overflow:hidden;
line-height:170%;
color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
text-decoration: none;
}
/* 本・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
border-bottom: 1px solid ;
font-size:16px;
font-weight: bold;
}
/* タイトル下の余白最小 */
.cstmreba .kaerebalink-name p,
.cstmreba .booklink-name p,
.cstmreba .tomarebalink-name p {
margin: 0;
}
/* powered by （非表示）*/
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
font-size:0px;
line-height:0%;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
font-size:12px;
}
.cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img {
display:none !important;
}
.cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
display: inline-block;
width: 100%;
margin-top: 5px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
float:left;
width:48%;
min-width:128px;
margin:0.5%;
}
/***** ボタンデザイン ******/
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
position:relative;
width: 100%;
display: inline-block;
text-align: center;
box-sizing: border-box;
margin: 1px 1px;
padding:3% 0.5%;
border-radius: 8px;
font-size: 13px;
font-weight: bold;
line-height: 180%;
color: #fff;
box-shadow: 0px 4px 0 #455A64;
transition: 0.2s all ease 0s;
}
.cstmreba .shoplinkamazon :after,
.cstmreba .shoplinkrakuten :after,
.cstmreba .shoplinkjalan :after,
.cstmreba .shoplinkjtb :after,
.cstmreba .shoplinkknt :after,
.cstmreba .shoplinkikyu :after,
.cstmreba .shoplinkrurubu :after,
.cstmreba .shoplinkyahoo :after,
.cstmreba .shoplinkbellemaison :after,
.cstmreba .shoplinkcecile :after,
.cstmreba .shoplinkkakakucom :after,
.cstmreba .shoplinkkindle :after,
.cstmreba .shoplinkrakukobo :after,
.cstmreba .shoplinkbk1 :after,
.cstmreba .shoplinkehon :after,
.cstmreba .shoplinkkino :after,
.cstmreba .shoplinktoshokan :after,
.cstmreba .shoplinkseven :after{
content:'';
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 3s ease-in-out infinite;
}
@-webkit-keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
/* トマレバ */
/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #ff1744; border: 2px solid #ff1744; overflow:hidden}
/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #FB8C00; border: 2px solid #FB8C00; overflow:hidden}
/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #7E57C2; border: 2px solid #7E57C2; overflow:hidden}
/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkknt a { background: #00ACC1; border: 2px solid #00ACC1; overflow:hidden }
/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #A1887F; border: 2px solid #A1887F; overflow:hidden }
/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #e53935; border: 2px solid #e53935; overflow:hidden }
/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #7CB342; border: 2px solid #7CB342; overflow:hidden }
/* カエレバ */
/* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#7E57C2; border:2px solid #7E57C2; letter-spacing:normal; overflow:hidden }
/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#00ACC1 ; border: 2px solid #00ACC1; overflow:hidden }
/* セシール */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#e53935; border: 2px solid #e53935; overflow:hidden }
/* 価格コム */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#7CB342; border: 2px solid #7CB342; overflow:hidden }
/* ヨメレバ */
/* Kindle */
.cstmreba .booklink-link2 .shoplinkkindle a { background:#7E57C2; border: 2px solid #7E57C2; overflow:hidden }
/* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000; overflow:hidden }
/* honto */
.cstmreba .booklink-link2 .shoplinkbk1 a { background:#00ACC1; border: 2px solid #00ACC1; overflow:hidden }
/* ehon */
.cstmreba .booklink-link2 .shoplinkehon a { background:#F9A825; border: 2px solid #F9A825; overflow:hidden }
/* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinkkino a { background:#e53935; border: 2px solid #e53935; overflow:hidden }
/* 図書館 */
.cstmreba .booklink-link2 .shoplinktoshokan a { background:#546E7A; border: 2px solid #546E7A; overflow:hidden }
/* カエレバ・ヨメレバ共通 */
/* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
background:#FB8C00;
border: 2px solid #FB8C00; overflow:hidden
}
/* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a,
.cstmreba .booklink-link2 .shoplinkrakuten a {
background: #ff1744;
border: 2px solid #ff1744; overflow:hidden
}
/* 7net */
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a {
background:#225496;
border: 2px solid #225496; overflow:hidden
}
/***** ボタンデザイン マウスオーバー時 *****/
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
box-shadow: none;
transform: translate3d(0, 3px, 0);
}
.cstmreba .booklink-footer {
clear:both;
}
/***** 解像度768px以下のスタイル *****/
@media screen and (max-width:768px){
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:100%;
float:none;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
width: 49%;
margin: 0.5%;
}
.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info {
text-align:center;
padding-bottom: 1px;
}
}
/***** 解像度480px以下のスタイル *****/
@media screen and (max-width:480px){
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
width: 98%;
margin: 0.5%;
}
}
ココに注意
CSSコード追記で何か不具合が生じる可能性は低く、仮に生じたとしても消せば元通りになることがほとんどです。
ただ、予期せぬ事態もあり得ますので、コード追記する前にバックアップをとることを推奨します。
まとめ
「WING(Afiinger5)」にてトマレバ・ヨメレバ・カエレバのデザインカスタマイズは、「追加CSS」欄にカスタマイズしたいコードを記載することで可能です。
カスタマイズ用のコードは上記で紹介したものなどを使えば可能なので、参考にしてみてください。
注意
ヨメレバ・カエレバに関しては、Amazon側の仕様変更により、アソシエイトの紹介コードが生成できなくなってしまいました・・。
代替えツールの紹介と、そのカスタマイズは下記リンクを参考にしてください！
-
-
カエレバの代わりのツール徹底比較！初心者に一番使いやすいのはどれ？
商品紹介のリンクを作るための優秀な無料ツール、「カエレバ」＆「ヨメレバ」。 ですが、2019年中頃からAmazonアソシエイトに対応しなくなってしまったんですよね・・ この記事は カエレ ...
続きを見る
-
-
「かんたんリンク」が押ボタン風に光る！アフィンガー用カスタマイズコード
「」の「かんたんリンク」は Amazon 楽天 Yahooショッピング のアフィリエイトリンクが手軽に作ることができます。 すごく優良なツールですが、そのまま使うと見栄えが ...
続きを見る
