もしもアフィリエイトの「かんたんリンク」をスマホでも横長デザインにする方法┃コピペでOK！

記事内に商品プロモーションを含む場合があります

ブログ収益化している皆さん、ブログの中にアフィリエイト広告は貼っていますか？アフィリエイト広告の中でも「もしもアフィリエイト」の“かんたんリンク”を利用している方も多いかと思います。

この「かんたんリンク」をスマホで見たときデザインが縦に長く、商品リンクだけで画面がいっぱいになるのが気になったためスマホで見た時も横長のデザインになるようにしてみました。

今回はそのカスタマイズ方法のご紹介です。
コピペで設定できます。

デフォルトとの比較

デフォルト	カスタマイズ後

お約束と設定方法

コードの使用について

公開しているコードは個人利用でのコピペ、ご自身でのカスタマイズはご自由にどうぞ。
カスタマイズ方法をブログなどで紹介する場合は本記事をリンクして、引用である旨の表記をしていただきますようお願い致します。

コードの使い方

はてなブログのトップページ（PC版）から【デザイン】へアクセスする。
上記画像①→②→の順番に選択して、③にCSSコードを貼り付ける。
【変更を保存する】を押して完了。

CSSコード

/*** かんたんリンクここから ***/
/* メーカーと型番を非表示にする */
.easyLink-info-maker, .easyLink-info-model {
   display: none;
}

/* 購入先ボタンの位置やサイズ */
.easyLink-info-btn a {
   display: inline-block !important;
   margin: 5px 10px 5px 0 !important;
   padding: 0 12px !important;
   line-height: 35px !important;
   width: 100% !important;
}

.easyLink-info-btn { /* ボタンの並び方 */
  display: inline !important;
}

.easyLink-box { /* 全体下の余白 */
   margin-bottom: 10px !important;
}

/* スマホ表示 */
@media screen and (max-width: 768px) {
.easyLink-box.easyLink-size-s { /* 広告の幅 */
   max-width: 100% !important;
}

.easyLink-info-btn { /* ボタンの位置調整 */
   margin-top: -5px !important;
}

.easyLink-info-btn a { /* ボタンの中身調整 */
   margin: 5px 0 3px 0 !important;
   padding: 0 !important;
   line-height: 40px !important;
}

.easyLink-img { /* 画像を左に */
   float: left !important;
   width: 130px !important;
   padding-right: 20px !important;
}

.easyLink-info { /* 購入ボタンを右に */
   display: flex;
   flex-wrap: wrap;
}

/* ヤフーの文字を小さくする */
.easyLink-info-btn-yahoo {
   font-size: 11px !important;
}

/* 商品の説明文 */
.easyLink-box.easyLink-size-s .easyLink-info .easyLink-info-name {
   font-size: 13px !important;
   line-height: 18px !important;
}

/* 商品画像のサイズ */
.easyLink-box .easyLink-img,
.easyLink-box .easyLink-img .easyLink-img-box,
.easyLink-box .easyLink-img .easyLink-img-box .easyLink-img-pht { 
   max-height: 170px !important;
   min-height: 100px !important;
   max-width: 130px !important;
   }
}
/*** かんたんリンクここまで ***/