もしもアフィリエイト「かんたんリンク」カスタマイズ

本ページにはプロモーションが含まれます。

もしもアフィリエイトの「かんたんリンク」をカスタマイズしました。

ご自由にコピペしていただき構いません。

当ブログの「かんたんリンク」

当ブログの「かんたんリンク」

メーカーと型番は消してゴチャゴチャをすっきりさせました。

枠線もありません。枠線を無くした分、本文との間に適度に余白を作り商品名には色を付けて本文との違いを分かりやすくしています。

ボタンに丸みを持たせてさらにスッキリした印象に。
※掲載コードは適宜微修正しているため、画像と完全に同じでは無い場合がございます。

もしもアフィリエイトはカスタマイズを禁止していませんが、今後もしもアフィリエイト側で仕様変更があればスタイル崩れを起こす可能性があります。
カスタマイズは自己責任で行なってください。

引用元

↓こちらのサイトで紹介されているコードを元に作成しました。

ネイネイの喜怒哀楽

もしもアフィリエイトの『かんたんリンク』をCSSカスタマイズ！【2選】 | ネイネイの喜怒哀楽

yunico's fluffy life

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

デザインテーマ・設定

使用しているブログサービス：無料版はてなブログ

デザインテーマ：Smooth（デフォルト）

設定：レスポンシブデザイン

「かんたんリンク」のコード

デザインCSSに貼るコード

div.easyLink-box {
border:none !important;
padding:0px !important;
margin-top:24px !important;
margin-bottom:24px !important;
margin-right:0px auto !important;

margin-left:0px auto !important;
}

.easyLink-info-maker, .easyLink-info-model {

display:none;

}

p.easyLink-info-name a {
letter-spacing:0.3pt;
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
font-size:90%;
color: #008000 !important;
}

a.easyLink-info-btn-amazon {
background:#20b2aa !important;

border-radius:24px !important;
margin:6px !important;
}
a.easyLink-info-btn-rakuten {
background:#3cb371 !important;
border-radius:24px !important;
margin:6px !important;
}
a.easyLink-info-btn-yahoo {
background:#66cdaa !important;
border-radius:24px !important;
margin:6px !important;
}

a.easyLink-info-btn-nininomoji {
background:#5f9ea0 !important;
border-radius:24px !important;
margin:6px !important;
}

CSS解説

div.easyLink-box {
border:noneで枠線を消す !important;
padding:枠内の余白の数値px !important;
margin-top:枠上の余白の数値px !important;
margin-bottom:枠下の余白の数値px !important;
margin-right:枠右側の余白の数値px autoで自動で中央揃えに !important;

margin-left:枠左側の余白の数値px autoで自動で中央揃えに !important;
}

.easyLink-info-maker, .easyLink-info-model {

display:noneでメーカーと型番を消す;

}

p.easyLink-info-name a {
letter-spacing:商品名の文字間隔の数値pt;
font-family:商品名の字体;
font-size:商品名の文字サイズの割合%;
color: #商品名の文字色（カラーコード） !important;
}

a.easyLink-info-btn-amazon {
background:#Amazonボタンの色（カラーコード） !important;

border-radius:Amazonボタンの角の丸みの数値px !important;
margin:ボタンとボタンの間隔の数値px !important;
}
a.easyLink-info-btn-rakuten {
background:#楽天ボタンの色（カラーコード） !important;
border-radius:楽天ボタンの角の丸みの数値px !important;
margin:ボタンとボタンの間隔の数値px !important;
}
a.easyLink-info-btn-yahoo {
background:#Yahooボタンの色（カラーコード） !important;
border-radius:Yahooボタンの角の丸みの数値px !important;
margin:ボタンとボタンの間隔の数値px !important;
}

a.easyLink-info-btn-任意の文字 {
background:#カスタムボタンの色（カラーコード） !important;
border-radius:カスタムボタンの角の丸みの数値px !important;
margin:ボタンとボタンの間隔の数値px !important;
}

・カスタムボタンを増やしたい場合は太字部分をコピーしてコードの下に追加します。
・カスタムボタンが無くても太字部分のコードは消す必要ありません。（もちろん消してもいいです。）
・通常、CSSは下に追加したコードの指示が優先して反映されますが「!important」を付けると順番に関係無く最優先で反映されるためスタイル崩れを防ぐことができます。
・元から記述されているコードは消さないで最後の「　}　」のすぐ下にペーストします。
・他に自分でコードを書いている場合も同様に最後の「　}　」の下に追加でペーストします。
・↓字体の設定の仕方はこちらで知ることができます。
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
・↓カラーコードはこのサイトで調べられます。
WEB色見本原色大辞典 - HTMLカラーコード