もしもアフィリエイトの『かんたんリンク』をCSSカスタマイズ!【2選】

もしもアフィリエイトの『かんたんリンク』をCSSカスタマイズ!【2選】

こんにちは! カスタマイズができて満足なネイネイ(@NEYNEYx2)です。

2019年3月26日にリニューアルされた、もしもアフィリエイトの「かんたんリンク」のデザインを変更してみましたので、その内容をご紹介いたします。

CSSコードをコピペしていただければ、完了できるようになっております。

 

もしもアフィリエイトの「かんたんリンク」は、Amazon、楽天市場、Yahooの商品リンクをカード型のアフィリエイトリンク(レスポンシブ対応)を簡単に作成できるツールになります。

もしもアフィリエイトの「かんたんリンク」をまだ使用されていない方は、下記で紹介している記事をご覧ください。

もしもアフィリエイトの『かんたんリンク』が簡単・便利!使い方を解説

 

一部変更

「PC以外の時の設定」部分を修正しました。

(2019年7月4日)

 

カスタマイズの確認事項

もしもアフィリエイトのサポートデスクに「かんたんリンク」のCSSカスタマイズをしても構わないか確認をおこないましたところ、下記の内容の返答がありました。

  • 原則、CSSによるカスタマイズは推奨してはいないが、自身の責任の下でカスタマイズしても特に違反とはならない。
  • CSSによるカスタマイズは、サポートの対象外となる。
  • 今後の機能変更・修正によっては、独自のCSSは適用されなくなる可能性もある。

CSSのカスタマイズをする際は、上記の内容を確認・理解した上で、ご利用ほどお願いします。

また、WordPressのテーマや環境によっては、カスタマイズがうまく反映されないこともあると思いますが、そのあたりはご了承ください。

下記は当サイトの環境になります。

このサイトの環境

 

カスタマイズの内容

下記が、もしもアフィリエイトの「かんたんリンク」の変更前のデザイン画像になります。

変更前のデザイン
変更前のデザイン

ボタンがすべて同じ色であったり、商品の名前が黒色であったりして少し見栄えがよくない印象がありますので、そのあたりをカスタマイズしていきます。

カスタマイズのデザインは2種類ありますので、どちらかお好みのデザインを1つ選んでください。

 

変更後のデザイン

デザインは、「おすすめデザイン」と「超シンプル デザイン」の2種類になります。

下記の画像が、「かんたんリンク」のデザインを変更後の内容になります。

「おすすめデザイン」
おすすめデザイン

 

「超シンプル デザイン」
超シンプル デザイン

 

もしもアフィリエイトの「かんたんリンク」をカスタマイズ

先ほど説明したデザインをCSSファイルにコピペしていきます。 CSSファイルへのコピペは下記のどちらか、お好みな方で編集ください。

  1. 子テーマの「style.css」を編集する。(外観/テーマ編集から変更できます)
  2. 追加CSSを編集する。(外観/カスタマイズ/追加CSSから変更できます)

※THE THORの場合「style-user.css」が子テーマになります。

それでは、準備が整いましたら下記の「おすすめ デザイン」もしくは、「超シンプル デザイン」のどちらか1つのCSSコードを選び、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; /* 商品画像の大きさを調整 */
}
}

 

超シンプル デザイン

超シンプル デザイン カスタマイズ後

コードを表示
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: #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#〇〇〇〇〇〇をお好きな色コードに変更してください。

色コードの参考には、コチラ(↓)のサイトがおすすめです。

色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色…

 

まとめ

どうですか? うまく設定することができましたか。

CSSファイルをカスタマイズする前には必ずバックアップを取ってからおこなってください。 また、WordPressのテーマによってうまく反映されない部分もあると思いますが、そのへんはご了承ください。

それでは、まったです。 (‘◇’)ゞ

 

コチラで紹介している「もしもアフィリエイトの『かんたんリンク』が簡単・便利!使い方を解説」の記事もよかったらどうぞ。

関連記事

こんにちは! 便利なツールが増えて微笑むネイネイ(@NEYNEYx2)です。 現在、商品リンクを作成するのに「カエレバ」や「Rinker(リンカー)」を使用しているかたも多いと思います。ただアマゾンのPA-APIの利用条件が2019年1月[…]

もしもアフィリエイトの『かんたんリンク』が簡単・便利!使い方を解説

 

おすすめASP

 

ポチして頂くことで、ランキングの順位が上がります

人気ブログランキングへ
にほんブログ村 本ブログ 書評・レビューへ
Amazonでお得にお買い物
amazonギフト券

Amazonでお買い物するなら、Amazonギフト券の利用がおすすめ!

チャージするたびに、プライム会員なら最大2.5%分通常会員なら最大2.0%分のAmazonポイントが貯まる。

\ TRY NOW!! /

\ こちらも読まれています! /