コピペOK!もしもの「かんたんリンク」CSSカスタマイズ

もしもアフィリエイトの「かんたんリンク」のデザインをCSSカスタマイズしたので公開します。

WordPressなどCSSを追加できるサイト作成ツールであればコピペで簡単に導入できます。

スポンサーリンク

デザイン

デフォルトデザイン

デフォルトのデザインはやや野暮ったく、また商品タイトルがリンクかわからない、ボタンがオレンジ一色で味気ないなどの問題があります。

表示サイズ‐小(画像160px)

表示サイズ‐大(画像240px)

カスタマイズデザイン

カスタムデザインはRinkerやカエレバを参考に、より直感的でミニマルなデザインに変更しました。

2021年6月、スマホ表示で画像が横長に伸びてしまう問題を修正。

2020年8月、商品名の文字サイズを少し大きくし太字に変更。またボタンとテキストをやや大きく変更。

表示サイズ‐小(画像160px)

表示サイズ‐大(画像240px)

デザインの特徴

  • 完全レスポンシブ(PC・スマホ・ダブレット対応)
  • 画像の高さ表示を上下中央に変更
  • ボタンの色分け
  • 余白の調整

完全レスポンシブ(PC・スマホ・ダブレット対応)

「かんたんリンク」はレスポンシブに対応していますが、以下のような画面サイズだと商品名が読みづらくなってしまうなどの問題があるため、そういった部分を再調整しました。

デフォルト

カスタマイズ

画像の高さ表示を上下中央に変更

また商品画像が「上寄せ表示」の場合、縦長に表示される場合にはバランスが悪くなってしまいます。そこでカスタマイズデザインでは上下中央に表示されるよう変更しました。

デフォルト

カスタマイズ

ボタンの色分け

デフォルトのボタンは全てオレンジで味気なかったので、それぞれリンク先のイメージに沿ったカラーに変更しました。

本当はボタンの幅も均等にしたかったのですが、「~で見る」の部分と「Yahoo!ショッピング」が合わさると長すぎて収まらなかったので断念しました。

余白の調整

デフォルトのスマホ表示では1商品がスマホの画面に収まらないほど縦長になるので余白を調整しました。

デフォルト

カスタマイズ

カスタマイズデザインの導入方法

以下のCSSをお使いのサイト作成ツールの「CSSカスタマイズ欄」にコピペしてください。

/*かんたんリンク*/
.easyLink-box {
    border: 2px solid #eaeaea !important;
    min-height: 200px;
}
@media screen and (max-width: 480px) {
.easyLink-box {
    margin: 20px auto 0 !important;
    max-width: 280px;
}
}
/*かんたんリンク画像*/
@media screen and (min-width: 481px) {
.easyLink-img {
    width: 180px !important;
    height: auto !important;
    min-height: 160px !important;
    margin: 0 !important;
}
}
@media screen and (max-width: 480px) {
.easyLink-img {
    overflow: hidden !important;
    height: 180px !important;
}
}
.easyLink-img-box {
    position: absolute !important;
    width: 160px !important;
    height: 160px !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin: 0 auto !important;
}
.easyLink-img-box span > img {
    max-width: 160px !important;
    max-height: 160px !important;
    width: auto !important;
}
.easyLink-img-box > a > img {
    width: 30px !important;
    height: 30px !important;
}
@media screen and (max-width: 480px) {
.easyLink-img-box {
    width: 226px !important;
}
}
/*かんたんリンク右側*/
@media screen and (min-width: 481px) {
.easyLink-info {
    width: calc(100% - 180px) !important;
}
}
.easyLink-info-name {
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
}
.easyLink-info-name a {
    color: #197dd2 !important;
}
.easyLink-info-maker, .easyLink-info-model {
    font-size: 13px !important;
    color: #999;
}
.easyLink-info-btn a {
    font-size: 13px !important;
    line-height: 1.5 !important;
    width: auto !important;
    margin: 5px !important;
    padding: .5em 1em !important;
}
.easyLink-info-btn-amazon {
    background: #ffa724 !important;
}
.easyLink-info-btn-rakuten {
    background: #ff5f5f !important;
}
.easyLink-info-btn-yahoo {
    background: #39c0e0 !important;
}
@media screen and (min-width: 704px) {
.easyLink-info-name {
    font-size: 16px !important;
}
.easyLink-info-btn {
    margin: 20px -5px 0 !important;
}
.easyLink-info-btn a {
    font-size: 13.5px !important;
}
}
/*かんたんリンク大型*/
@media screen and (min-width: 704px) {
.easyLink-box:not(.easyLink-size-s) .easyLink-img {
    width: 260px !important;
    min-height: 240px !important;
}
.easyLink-box:not(.easyLink-size-s) .easyLink-img-box {
    width: 240px !important;
    height: 240px !important;
}
.easyLink-box:not(.easyLink-size-s) .easyLink-img-box span > img {
    max-width: 240px !important;
    max-height: 240px !important;
}
.easyLink-box:not(.easyLink-size-s) .easyLink-info {
    width: calc(100% - 280px) !important;
}
.easyLink-box:not(.easyLink-size-s) .easyLink-info-name {
    font-size: 18px !important;
}
.easyLink-box:not(.easyLink-size-s) .easyLink-info-btn a {
    width: calc(50% - 10px) !important;
    padding: 10px !important;
}
}

WordPressの場合

WordPressの場合は管理画面のサイドメニューから「外観→カスタマイズ」と移動してください。

「追加CSS」を開いてCSSを貼り付けます。

まとめ

なにか問題点があれば修正するのでコメントください。

コメント

  1. めちゃくちゃいい感じになりました!ありがとうございます。

  2. まんまる より:

    ど素人でもわかりやすく、追加CSSのやり方まで記載してくださってありがとうございます!
    すごく良くなりました!
    感謝です。

  3. はじめまして(*^^*)

    こちらのCSS使用させてもらっています。ありがとうございます!

    最近、モバイルで見た際に、画像が横長にのびてしまうようになりました。
    改善方法を教えていただきたいです!よろしくお願い致します。

    • ShoSho より:

      ご報告ありがとうございます。自分ではなかなか気づけ無いので助かります。
      修正したのでもう一度コードをコピペしてみてください。

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