「
もしもアフィリエイト
」の「かんたんリンク」は
- Amazon
- 楽天
- Yahooショッピング
のアフィリエイトリンクが手軽に作ることができます。
すごく優良なツールですが、そのまま使うと見栄えがパッとしない!と少し不満を持っている方もいるかと思います。
そんな方のために、特にwordpressテーマのアフィンガー用で、貼り付けてパッと使える!カスタマイズコードをご紹介します。
「かんたんリンク」のカスタマイズコード 押ボタン風
まずは、「かんたんリンク」の各プロモーションのボタンを少し盛り上がらせ、クリックすると押した感じするためのカスタマイズコードです。


/* かんたんリンク カスタマイズ */ /* --------- 外枠 --------- */ div.easyLink-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); } /* --- 商品リンク タイトル --- */ p.easyLink-info-name a { color: #1A237E !important; /* 文字色 */ font-weight: bold; } /* --------- 各ボタン--------- */ .easyLink-info-btn-amazon { background: #f6a306 !important; /* 背景色 */ 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; overflow: hidden; } a.easyLink-info-btn-rakuten { background: #cf4944 !important; /* 背景色 */ 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; overflow: hidden; } a.easyLink-info-btn-yahoo { background: #51a7e8 !important; /* 背景色 */ 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; overflow: hidden; } /* --- マウスオーバー時のボタン色 --- */ a:hover.easyLink-info-btn-amazon { box-shadow: none; transform: translate3d(0, 3px, 0); } a:hover.easyLink-info-btn-rakuten { box-shadow: none; transform: translate3d(0, 3px, 0); } a:hover.easyLink-info-btn-yahoo { box-shadow: none; transform: translate3d(0, 3px, 0); } /* --- PC以外の時の設定 --- */ @media screen and (max-width: 703px) { div.easyLink-box div.easyLink-img, div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht { max-height: 300px !important; /* 商品画像の大きさ調整 */ } } /* かんたんリンク カスタマイズ終わり */
「かんたんリンク」のカスタマイズコード 押ボタン風+光る
次に、先ほどのカスタマイズに加えて、各ボタンをキラッと光るようにするためのカスタマイズコードを紹介します。
/* かんたんリンク カスタマイズ */ /* --------- 外枠 --------- */ div.easyLink-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); } /* --- 商品リンク タイトル --- */ p.easyLink-info-name a { color: #1A237E !important; /* 文字色 */ font-weight: bold; } /* --------- 各ボタン--------- */ .easyLink-info-btn-amazon { background: #f6a306 !important; /* 背景色 */ 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; overflow: hidden; } a.easyLink-info-btn-rakuten { background: #cf4944 !important; /* 背景色 */ 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; overflow: hidden; } a.easyLink-info-btn-yahoo { background: #51a7e8 !important; /* 背景色 */ 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; overflow: hidden; } /* --- マウスオーバー時のボタン色 --- */ a:hover.easyLink-info-btn-amazon { box-shadow: none; transform: translate3d(0, 3px, 0); } a:hover.easyLink-info-btn-rakuten { box-shadow: none; transform: translate3d(0, 3px, 0); } a:hover.easyLink-info-btn-yahoo { box-shadow: none; transform: translate3d(0, 3px, 0); } .easyLink-info-btn-amazon::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: easyLink-info-btn-amazon 3s ease-in-out infinite; } @-webkit-keyframes easyLink-info-btn-amazon { 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; } } .easyLink-info-btn-rakuten::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: easyLink-info-btn-rakuten 3s ease-in-out infinite; } @-webkit-keyframes easyLink-info-btn-rakuten { 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; } } .easyLink-info-btn-yahoo::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: easyLink-info-btn-yahoo 3s ease-in-out infinite; } @-webkit-keyframes easyLink-info-btn-yahoo { 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; } } /* --- PC以外の時の設定 --- */ @media screen and (max-width: 703px) { div.easyLink-box div.easyLink-img, div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht { max-height: 300px !important; /* 商品画像の大きさ調整 */ } } /* かんたんリンク カスタマイズ終わり */
アフィンガー6(ACTION)でのカスタマイズコードの使い方
上記のコードの使い方ですが、Affingerでは「追加CSS」というコマンドがあります。
そこにカスタマイズ用のCSSコードを記載することで、リンクのデザインを変更することができます。
ココに注意
「追加CSS」へ入力するようにしましょう。「テーマや子テーマのCSS入力画面」にCSSコードを書き込んでも上手く反映されません。
ちなみに「追加CSS」コマンドへは、「外観」⇒「カスタマイズ」⇒「追加CSS」でたどり着くことができます。

ココに注意
CSSコード追記で何か不具合が生じる可能性は低く、仮に生じたとしても消せば元通りになることがほとんどです。
ただ、予期せぬ事態も起こりえますので、コード追記する前にバックアップをとることをオススメします。
「かんたんリンク」を使うための方法
とっても便利な「かんたんリンク」。使うためには「
もしもアフィリエイト
」への登録が必要です。
詳細は下記リンクを参考にしてみてください!
-
-
カエレバの代わりのツール徹底比較!初心者に一番使いやすいのはどれ?
商品紹介のリンクを作るための優秀な無料ツール、「カエレバ」&「ヨメレバ」。 ですが、2019年中頃からAmazonアソシエイトに対応しなくなってしまったんですよね・・ この記事は カエレ ...
続きを見る