Affinger

「かんたんリンク」が押ボタン風に光る！アフィンガー用カスタマイズコード

かんたんリンク　カスタマイズコード

「 もしもアフィリエイト 」の「かんたんリンク」は

 

  • 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コードを記載することで、リンクのデザインを変更することができます。

 

Affinger5追加CSS画面

 

ココに注意

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

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

 

夫
上記のカスタマイズコードをそのままコピー＆ペーストで変更が反映されますよ！

 

 

ココに注意

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

ただ、予期せぬ事態も起こりえますので、コード追記する前にバックアップをとることをオススメします。

 

「かんたんリンク」を使うための方法 

とっても便利な「かんたんリンク」。使うためには「 もしもアフィリエイト 」への登録が必要です。

詳細は下記リンクを参考にしてみてください！

カエレバ　ヨメレバ　代わり
カエレバの代わりのツール徹底比較！初心者に一番使いやすいのはどれ？

商品紹介のリンクを作るための優秀な無料ツール、「カエレバ」＆「ヨメレバ」。 ですが、2019年中頃からAmazonアソシエイトに対応しなくなってしまったんですよね・・ この記事は   カエレ ...

続きを見る

 

-Affinger
-, , ,