はじめに
もしもアフィリエイト
コピペのみで簡単に使っていただけるコードを置いています。
デフォルト表示
文字リンクホバー時（アンダーラインが出ます）
商品リンクをCSSのみで利用する方法は以下をご覧ください。
コピペで！アフィリエイト商品リンクをツールを使わずCSSのみでデザイン
はじめに アフィリエイトで商品を紹介する際のリンクカードデザインとして ツールでは カエレバ、プラグインでは Rinker など便利なものががあります。 カエレバサンプル Rinkerサンプル ツールやプラグインのデメリット カエレバは、１...
注意点
ほとんどの設定に「」を使っていますが、こちらを指定しなければ反映されません。
AMPではご利用頂けません。
カスタマイズサンプル
パターン１
文字リンクホバー時
CSS
コードを表示
/*********************
*もしもかんたんリンク
* ******************//*リンク文字ホバー時*/p.easyLink-info-name a:hover {
text-decoration:none ; /*アンダーライン消す*/color: #3296d2 ; /* 文字色 */}
/*Amazonボタン*/a.easyLink-info-btn-amazon {
background: #ff9900 ; /*ボタンの色*/}
/*楽天ボタン*/a.easyLink-info-btn-rakuten {
background: #bf0000 ; /*ボタンの色*/}
/*Yahooボタン*/a.easyLink-info-btn-yahoo {
background: #410093 ; /*ボタンの色*/}
文字リンクホバー時の設定はすべてのパターンで共通です。
- アンダーラインを消す
- 文字色を変える
パターン２
文字リンクホバー時
CSS
コードを表示
/*********************
*もしもかんたんリンク
* ******************//*枠線*/ div.easyLink-box {
border-radius: 15px;
box-shadow: 0px 3px 5px 0px #333; /*枠線の影*/}
/*リンク文字ホバー時*/p.easyLink-info-name a:hover {
text-decoration:none ; /*アンダーライン消す*/color: #3296d2 ; /* 文字色 */}
/*Amazonボタン*/a.easyLink-info-btn-amazon {
background: #ff9900 ; /*ボタンの色*/box-shadow: 0px 3px 5px 0px #333; /*影*/}
/*楽天ボタン*/a.easyLink-info-btn-rakuten {
background: #bf0000 ; /*ボタンの色*/box-shadow: 0px 3px 5px 0px #333; /*影*/}
/*Yahooボタン*/a.easyLink-info-btn-yahoo {
background: #410093 ; /*ボタンの色*/box-shadow: 0px 3px 5px 0px #333; /*影*/}
パターン３
ボタンホバー時
CSS
コードを表示
/*********************
*もしもかんたんリンク
* ******************//*枠線*/ div.easyLink-box {
border-right: 2px solid #999 ; /*右枠線*/border-bottom: 2px solid #999 ; /*下枠線*/}
/*リンク文字ホバー時*/p.easyLink-info-name a:hover {
text-decoration:none ; /*アンダーライン消す*/color: #3296d2 ; /* 文字色 */}
/*Amazonボタン*/a.easyLink-info-btn-amazon {
border: 1px solid #ff9900 ; /*枠線*/background: #fff ; /*ボタンの色*/color: #ff9900 ; /* 文字色 */}
/*楽天ボタン*/a.easyLink-info-btn-rakuten {
border: 1px solid #bf0000 ; /*枠線*/background: #fff ; /*ボタンの色*/color: #bf0000 ; /* 文字色 */}
/*Yahooボタン*/a.easyLink-info-btn-yahoo {
border: 1px solid #410093 ; /*枠線*/background: #fff ; /*ボタンの色*/color: #410093 ; /* 文字色 */}
/*Amazonボタン ホバー時*/a.easyLink-info-btn-amazon:hover {
background: #ff9900 ; /*ボタンの色*/box-shadow: 0px 3px 5px 0px #333; /*影*/color: #fff ; /* 文字色 */}
/*楽天ボタン ホバー時*/a.easyLink-info-btn-rakuten:hover {
background: #bf0000 ; /*ボタンの色*/box-shadow: 0px 3px 5px 0px #333; /*影*/color: #fff ; /* 文字色 */}
/*Yahooボタン ホバー時*/a.easyLink-info-btn-yahoo:hover {
background: #410093 ; /*ボタンの色*/box-shadow: 0px 3px 5px 0px #333; /*影*/color: #fff ; /* 文字色 */}
パターン４
ボタンホバー時
CSS
コードを表示
/*********************
*もしもかんたんリンク
* ******************//*枠線*/ div.easyLink-box {
padding: 0.2em 0.5em;
margin: 2em 0;
color: #565656 ;
background: #ffeaea ;
box-shadow: 0px 0px 0px 10px #ffeaea ;
border: dashed 2px #ffc3c3 ;
border-radius: 8px;
}
/*リンク文字ホバー時*/p.easyLink-info-name a:hover {
text-decoration:none ; /*アンダーライン消す*/color: #3296d2 ; /* 文字色 */}
/*Amazonボタン*/a.easyLink-info-btn-amazon {
border: 1px solid #ff9900 ; /*枠線*/background: #fff ; /*ボタンの色*/color: #ff9900 ; /* 文字色 */}
/*楽天ボタン*/a.easyLink-info-btn-rakuten {
border: 1px solid #bf0000 ; /*枠線*/background: #fff ; /*ボタンの色*/color: #bf0000 ; /* 文字色 */}
/*Yahooボタン*/a.easyLink-info-btn-yahoo {
border: 1px solid #410093 ; /*枠線*/background: #fff ; /*ボタンの色*/color: #410093 ; /* 文字色 */}
/*Amazonボタン ホバー時*/a.easyLink-info-btn-amazon:hover {
background: #ff9900 ; /*ボタンの色*/box-shadow: 0px 3px 5px 0px #333; /*影*/color: #fff ; /* 文字色 */}
/*楽天ボタン ホバー時*/a.easyLink-info-btn-rakuten:hover {
background: #bf0000 ; /*ボタンの色*/box-shadow: 0px 3px 5px 0px #333; /*影*/color: #fff ; /* 文字色 */}
/*Yahooボタン ホバー時*/a.easyLink-info-btn-yahoo:hover {
background: #410093 ; /*ボタンの色*/box-shadow: 0px 3px 5px 0px #333; /*影*/color: #fff ; /* 文字色 */}
パターン５
ボタンホバー時
CSS
コードを表示
/*********************
*もしもかんたんリンク
* ******************//*枠線*/ div.easyLink-box {
background: #95ccff ;
box-shadow: 0px 0px 0px 5px #95ccff;
border: dashed 2px white ;
padding: 0.2em 0.5em;
color: #454545 ;
}
/*リンク文字ホバー時*/p.easyLink-info-name a:hover {
text-decoration:none ; /*アンダーライン消す*/color: #3296d2 ; /* 文字色 */}
/*Amazonボタン*/a.easyLink-info-btn-amazon {
border: 1px solid #ff9900 ; /*枠線*/background: #fff ; /*ボタンの色*/color: #ff9900 ; /* 文字色 */}
/*楽天ボタン*/a.easyLink-info-btn-rakuten {
border: 1px solid #bf0000 ; /*枠線*/background: #fff ; /*ボタンの色*/color: #bf0000 ; /* 文字色 */}
/*Yahooボタン*/a.easyLink-info-btn-yahoo {
border: 1px solid #410093 ; /*枠線*/background: #fff ; /*ボタンの色*/color: #410093 ; /* 文字色 */}
/*Amazonボタン ホバー時*/a.easyLink-info-btn-amazon:hover {
background: #ff9900 ; /*ボタンの色*/box-shadow: 0px 3px 5px 0px #333; /*影*/color: #fff ; /* 文字色 */}
/*楽天ボタン ホバー時*/a.easyLink-info-btn-rakuten:hover {
background: #bf0000 ; /*ボタンの色*/box-shadow: 0px 3px 5px 0px #333; /*影*/color: #fff ; /* 文字色 */}
/*Yahooボタン ホバー時*/a.easyLink-info-btn-yahoo:hover {
background: #410093 ; /*ボタンの色*/box-shadow: 0px 3px 5px 0px #333; /*影*/color: #fff ; /* 文字色 */}
カラーの変更
ボタンの色や、文字の色、枠線の色などを変更する場合は、以下も参考にして下さい。
マカロンビビッドパステル伝統色和色セーフ色名 赤桃青紫黄橙緑茶黒 配色パターンサンプル