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

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

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

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: 180px !important; /* 商品画像の大きさ調整 */
}
}


/*       かんたんリンク カスタマイズ終わり     */

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; /* 商品画像の大きさ調整 */

}

/* かんたんリンクカスタマイズ終わり */

「かんたんリンク」のカスタマイズコード　押ボタン風＋光る

次に、先ほどのカスタマイズに加えて、各ボタンをキラッと光るようにするためのカスタマイズコードを紹介します。

/*       かんたんリンク カスタマイズ     */


/* --------- 外枠 --------- */
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; /* 商品画像の大きさ調整 */
}
}


/*       かんたんリンク カスタマイズ終わり     */

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

Affinger5追加CSS画面

ココに注意

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

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

夫

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

ココに注意

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

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

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

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

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

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

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

続きを見る

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

「かんたんリンク」のカスタマイズコード 押ボタン風

「かんたんリンク」のカスタマイズコード 押ボタン風＋光る

アフィンガー5（WING）でのカスタマイズコードの使い方

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

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

「かんたんリンク」のカスタマイズコード　押ボタン風

「かんたんリンク」のカスタマイズコード　押ボタン風＋光る