もしもアフィリエイトの『かんたんリンク』をスマホでも横長にしてスッキリ見せる方法（コピペでOK！）

みなさん、ブログの中にアフィリエイト広告は貼っていますか？アフィリエイト広告の中でも【もしもアフィリエイト】のかんたんリンクを利用している方も多いと思います。（私も使ってます୨୧）

この「かんたんリンク」、スマホに表示されるデザインが縦に長いため商品リンクだけで画面がいっぱいになってしまうの少し気になりませんか？

こんなことが書いてあります
もしもアフィリエイトの『かんたんリンク』をカスタマイズして、スマホからも横長のデザインにしてスッキリ見せる方法をご紹介します！（コピペで使えます୨୧）

➜➜➜ ＼このように表示／ クリック・タップで 画像拡大できます！

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

下記のCSSコードを使用します。
（コピペでそのまま使えますよ୨୧）

ご利用の注意点
公開するCSSコードは個人利用のコピペはOKですが、ブログなどでカスタマイズ方法を紹介する場合は、本記事をリンクして引用である旨の表記をお願いします。

/*** ▼かんたんリンクここから***/
.easyLink-info-maker { /* メーカー非表示 */
   display: none;
   }
   
.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) {
div.easyLink-box.easyLink-size-s { /* 広告の幅 */
   max-width: 100% !important;
   }

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

.easyLink-info-btn a { /* ボタンの中身調整 */
   display: inline-block !important;
   margin: 5px 0 3px 0 !important;
   padding: 0 !important;
   line-height: 40px !important;
   width: 100% !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;
   }

/* 商品説明文 */
div.easyLink-box.easyLink-size-s div.easyLink-info p.easyLink-info-name {
   font-size: 13px !important;
   line-height: 18px !important;
   }
   
/* 商品画像サイズ */
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht { 
   max-height: 170px !important;
   min-height: 100px !important;
   max-width: 130px !important;
   }
}
/*** かんたんリンクここまで ***/

過去に貼ったものを含め、全ての『かんたんリンク』に適応されますので、上記のコードを一度貼り付けるだけでOKです。

はてなブログでの設定方法

ダッシュボードからデザインページにアクセスし、デザインCSSにコードを貼り付けます。

デザインCSSは、はてなブログのスマホデザインをレスポンシブデザインにする必要があります。これをしないと今回ご紹介しているデザインも反映されないのでご注意くださいね！

レスポンシブデザインの設定方法yunico-fluffylife.com

　
CSSコードでもしもアフィリエイトの『かんたんリンク』をスマートフォンでも見やすい横長デザインにする方法をご紹介しました。

表示デザインを縦長から横長にすることより、アフィリエイトリンクがスマホ画面全体を覆ってしまうこともなく、より見やすくなりますよ。参考になれば嬉しいです୨୧

参考にしたサイト様

pote-chil.comこちらのサイト様でワードプレス向けに紹介されているコードを参考に、はてなブログ向けに変更させていただきました。

今日はそんな感じ！
それではまたね🧸◌𓈒𓐍