こんにちは! カスタマイズができて満足なネイネイ(@NEYNEYx2)です。
2019年3月26日にリニューアルされた、もしもアフィリエイトの「かんたんリンク」のデザインを変更してみましたので、その内容をご紹介いたします。
CSSコードをコピペしていただければ、完了できるようになっております。
もしもアフィリエイトの「かんたんリンク」は、Amazon、楽天市場、Yahooの商品リンクをカード型のアフィリエイトリンク(レスポンシブ対応)を簡単に作成できるツールになります。
もしもアフィリエイトの「かんたんリンク」をまだ使用されていない方は、下記で紹介している記事をご覧ください。
一部変更
「PC以外の時の設定」部分を修正しました。
(2019年7月4日)
カスタマイズの確認事項
もしもアフィリエイトのサポートデスクに「かんたんリンク」のCSSカスタマイズをしても構わないか確認をおこないましたところ、下記の内容の返答がありました。
- 原則、CSSによるカスタマイズは推奨してはいないが、自身の責任の下でカスタマイズしても特に違反とはならない。
- CSSによるカスタマイズは、サポートの対象外となる。
- 今後の機能変更・修正によっては、独自のCSSは適用されなくなる可能性もある。
CSSのカスタマイズをする際は、上記の内容を確認・理解した上で、ご利用ほどお願いします。
また、WordPressのテーマや環境によっては、カスタマイズがうまく反映されないこともあると思いますが、そのあたりはご了承ください。
下記は当サイトの環境になります。
このサイトの環境
- WordPress:4.9.10
- PHP:7.3
- 使用テーマ:THE THOR(ザ・トール)
カスタマイズ後の「かんたんリンク」
カスタマイズの内容
下記が、もしもアフィリエイトの「かんたんリンク」の変更前のデザイン画像になります。
ボタンがすべて同じ色であったり、商品の名前が黒色であったりして少し見栄えがよくない印象がありますので、そのあたりをカスタマイズしていきます。
カスタマイズのデザインは2種類ありますので、どちらかお好みのデザインを1つ選んでください。
変更後のデザイン
デザインは、「おすすめデザイン」と「超シンプル デザイン」の2種類になります。
下記の画像が、「かんたんリンク」のデザインを変更後の内容になります。
「おすすめデザイン」
「超シンプル デザイン」
もしもアフィリエイトの「かんたんリンク」をカスタマイズ
先ほど説明したデザインをCSSファイルにコピペしていきます。 CSSファイルへのコピペは下記のどちらか、お好みな方で編集ください。
- 子テーマの「style.css」を編集する。(外観/テーマ編集から変更できます)
- 追加CSSを編集する。(外観/カスタマイズ/追加CSSから変更できます)
※THE THORの場合「style-user.css」が子テーマになります。
それでは、準備が整いましたら下記の「おすすめ デザイン」もしくは、「超シンプル デザイン」のどちらか1つのCSSコードを選び、CSSファイルにコピペしてください。
おすすめ デザイン
/* ------------------------------------- */
/* かんたんリンク カスタマイズ */
/* ------------------------------------- */
/* --------- 外枠 --------- */
div.easyLink-box {
border:double #CCC !important; /* 2重線 */
box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
}
/* --- 商品リンク タイトル --- */
p.easyLink-info-name a {
color: #3296d2 !important; /* 文字色 */
}
/* --------- ボタン色 --------- */
a.easyLink-info-btn-amazon {
background: #f6a306 !important; /* 背景色 */
border: 2px solid #f6a306 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-rakuten {
background: #cf4944 !important; /* 背景色 */
border: 2px solid #cf4944 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-yahoo {
background: #51a7e8 !important; /* 背景色 */
border: 2px solid #51a7e8 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #fff !important; /* 背景色 */
color: #f6a306 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-rakuten {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #fff !important; /* 背景色 */
color: #cf4944 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-yahoo {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #fff !important; /* 背景色 */
color: #51a7e8 !important; /* 文字色 */
}
/* --- 最後のボタン下の空白を削除 --- */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
margin-bottom: 0 !important;
}
/* --- 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 {
border:double #CCC !important; /* 2重線 */
box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
}
/* --- 商品リンク タイトル --- */
p.easyLink-info-name a {
color: #3296d2 !important; /* 文字色 */
}
/* --------- ボタン色 --------- */
a.easyLink-info-btn-amazon {
background: #fff !important; /* 背景色 */
border: 2px solid #f6a306 !important; /* 外枠 */
color: #f6a306 !important; /* 文字色 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-rakuten {
background: #fff !important; /* 背景色 */
border: 2px solid #cf4944 !important; /* 外枠 */
color: #cf4944 !important; /* 文字色 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-yahoo {
background: #fff !important; /* 背景色 */
border: 2px solid #51a7e8 !important; /* 外枠 */
color: #51a7e8 !important; /* 文字色 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #f6a306 !important; /* 背景色 */
color: #fff !important; /* 文字色 */
}
a:hover.easyLink-info-btn-rakuten {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #cf4944 !important; /* 背景色 */
color: #fff !important; /* 文字色 */
}
a:hover.easyLink-info-btn-yahoo {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #51a7e8 !important; /* 背景色 */
color: #fff !important; /* 文字色 */
}
/* --- 最後のボタン下の空白を削除 --- */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
margin-bottom: 0 !important;
}
/* --- 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; /* 商品画像の大きさを調整 */
}
}
補足
色の変更
色の変更は、「 /* 背景色 */ 」「 /* 文字色 */ 」などの〇〇〇色とコメントがある行の#f6a306
の #〇〇〇〇〇〇をお好きな色コードに変更してください。
色コードの参考には、下記のサイトがおすすめです。
【不具合?】スマホ表示でYahoo!ショッピング以外が押せない問題
スマホ表示のときに「Yahoo!ショッピング」以外のボタンが正常に押すことができない問題が発生していました。
下記のかんたんリンクは、2019年3月ごろに作成したものですが、スマホ表示のときだけうまくボタンが押せない状態になっていました。
NGのかんたんリンク(2019年3月ごろ作成)
そこでもう一度、かんたんリンクを作成し直したのが下記のリンクになります。
これであればスマホ表示のときでも問題なく、「Yahoo!ショッピング」以外のボタンでも押せるようになりました。
OKのかんたんリンク(2022年3月ごろ作成)
どうやら、どこかのタイミングで「かんたんリンク」のHTMLソース自体に変更があったようなので、新しく「かんたんリンク」を作成することでこの現象を回避することができます。
まとめ
どうですか? うまく設定することができましたか。
CSSファイルをカスタマイズする前には必ずバックアップを取ってからおこなってください。 また、WordPressのテーマによってうまく反映されない部分もあると思いますが、そのへんはご了承ください。
それでは、まったです。 (‘◇’)ゞ
コチラで紹介している「もしもアフィリエイトの『かんたんリンク』の使い方を解説」の記事もよかったらどうぞ。
- A8.net
:定番の最大手
- もしもアフィリエイト
:独自の報酬制度が魅力的
バリューコマース:定番・独自案件が豊富
- afb(アフィビー)
:美容系の案件に強い
- アクセストレード
:通信系・転職系に強い
こちらの記事もどうぞ
- ブログの始め方
- ブログ記事の書き方
- フリー画像・素材サイト
- ブログ運営
- 収益化
コメント