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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
/* かんたんリンク カスタマイズ */ /* --------- 外枠 --------- */ 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: 180px !important; /* 商品画像の大きさ調整 */ } } /* かんたんリンク カスタマイズ終わり */ |
「かんたんリンク」のカスタマイズコード 押ボタン風+光る
次に、先ほどのカスタマイズに加えて、各ボタンをキラッと光るようにするためのカスタマイズコードを紹介します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
/* かんたんリンク カスタマイズ */ /* --------- 外枠 --------- */ 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: 180px !important; /* 商品画像の大きさ調整 */ } } /* かんたんリンク カスタマイズ終わり */ |
アフィンガー5(WING)でのカスタマイズコードの使い方
上記のコードの使い方ですが、Affinger5では「追加CSS」というコマンドがあります。
そこにカスタマイズ用のCSSコードを記載することで、リンクのデザインを変更することができます。
ココに注意
「追加CSS」へ入力するようにしましょう。「テーマや子テーマのCSS入力画面」にCSSコードを書き込んでも上手く反映されません。
ちなみに「追加CSS」コマンドへは、「外観」⇒「カスタマイズ」⇒「追加CSS」でたどり着くことができます。

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