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

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

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

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

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

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

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

CSSコードの使い方

1. はてなブログのトップページから
   【デザイン】へアクセスする。
2. 上記画像③にコードを貼り付ける。
3. 【変更を保存する】を押して完了。

/*** ▼かんたんリンクここから***/
.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;
   }
}
/*** かんたんリンクここまで ***/

過去に貼ったものを含め、全ての『かんたんリンク』に適応されます。
　

はてなブログでの注意点

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

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

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

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

今日はそんな感じ！
それではまたね。