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

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

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

「かんたんリンク」自分の購入で成果が発生してしまったら？

sho-log.com

デザイン

デフォルトデザイン

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

表示サイズ‐小（画像160px）

表示サイズ‐大（画像240px）

カスタマイズデザイン

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

表示サイズ‐小（画像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を貼り付けます。

まとめ

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