【もしもアフィリエイト】かんたんリンクをスマホ用にカスタマイズ

WEB制作
2022.09.07

こんにちは、やせる子です。

もしもアフィリエイトかんたんリンク、本当に簡単で便利ですよね。ただスマホで見るとなんかでかい。なんかそれが嫌だったので小さくカスタマイズしてみました。大抵自分が何のために何をしたのか、というのを覚えていられないので備忘録兼やってみたい人がいたらと思い綴ります。

広告

前提

・もしもアフィリエイトのかんたんリンクを利用している

・スマホでみるとかんたんリンクが大きく感じるので小さく表示したい

・Wordpressを利用している

上記3点が前提の記事となります。Wordpressのテーマは今回はたぶんそんなに影響ないと思うので気にせずに行きます。

カスタマイズしなかった場合

カスタマイズした場合

すっきりして見えませんか？私は完全にこちらが好みです。

カスタマイズ方法

/*480px以下*/
@media screen and (max-width: 480px) {
/*簡単リンクを横並びに設定*/
  .easyLink-box {
    display: flex !important;
    max-width: 100% !important;
  }

  .easyLink-img {
    width: 60%;
  }

  .easyLink-img-pht {
    width: 90%;
  }

  .easyLink-info {
    width: 40%;
  }
/*商品名の文字の大きさ*/
  .easyLink-info-name {
    font-size: 0.7rem !important;
  }
/*画像左右の矢印非表示*/
  .easyLink-arrow-left,
  .easyLink-arrow-right {
    display: none !important;
  }
/*縦長画像の調整*/
  .moshimo_img65 img {
    width: 65%;
  }
}

上記CSSコードをコピーします。

WordPress　＞外観　＞テーマファイルエディタ

テーマによってファイル名が変わると思いますがテーマファイルエディタ内の「style.css」にコピーしたコードを貼り付け。

※すでに以下文言がある場合は、コピーする際に削除してから貼り付けしてください。

@media screen and (max-width: 480px) {
}

🔽貼り付け後更新をかけると

フィットボクシングの画像が若干切れてしまっていますね、ここも切れないようにしていきます。

ゲームのソフトや書籍のように縦長だと発生してしまいます。

<div class="moshimo_img65">　<!-- START 簡単リンク　END -->　</div>

簡単リンクを設定するとき、「<!– START」 から始まって 「END–>」で終わるコードを記事に挿入しますが、該当する商品のコードを上記「<div class=”moshimo_img65″」と「</div」で囲ってください。

更新をかけるとちょうどいい高さになりますね。

　

まとめ

うまくできましたでしょうか。

CSSがわかる方は好きなようにサイズを変えてみたり好みのカスタマイズにしてみてください！

🔽おすすめ本🔽

これ2冊あれば簡単なHPなら誰でも作れるようになれちゃう（と思っている）

HTML/CSSを学べばWordpressのカスタマイズも楽しくできるようになりますよ

コメント

タイトルとURLをコピーしました