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

こんにちは！カスタマイズができて満足なネイネイ(@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（ザ・トール）

カスタマイズ後の「かんたんリンク」

リンク

カスタマイズの内容

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

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

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

変更後のデザイン

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

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

「おすすめデザイン」

「超シンプルデザイン」

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

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

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

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

それでは、準備が整いましたら下記の「おすすめデザイン」もしくは、「超シンプルデザイン」のどちらか１つのCSSコードを選び、CSSファイルにコピペしてください。

超シンプルデザイン

　　　　コードを表示

CSS

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

/* --------- 外枠 --------- */
div.easyLink-box {
    border:double #CCC !important; /* ２重線 */
    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; /* 商品画像の大きさを調整 */
}
}