本ページにはプロモーションが含まれます。
自分用のバックアップも兼ねて、当ブログのHTML/CSSコードをご紹介します。
今回はもしもアフィリエイトの「かんたんリンク」をカスタマイズしました。
ご自由にコピペしていただき構いません。
当ブログの「かんたんリンク」
まずメーカーと型番は消してゴチャゴチャをすっきりさせました。
枠線もありません。枠線を無くした分、本文との間に適度に余白を作り商品名には色を付けて本文との違いを分かりやすくしています。
ボタンに丸みを持たせてさらにスッキリした印象に。
※掲載コードは適宜微修正しているため、画像と完全に同じでは無い場合がございます。
⚠︎注意点
もしもアフィリエイトはカスタマイズを禁止していませんが、今後もしもアフィリエイト側で仕様変更があればスタイル崩れを起こす可能性があります。
カスタマイズは自己責任で行なってください。
引用元
↓こちらのサイトで紹介されているコードを元に作成しました。
ネイネイの喜怒哀楽
もしもアフィリエイトの『かんたんリンク』を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;
}
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;
}
・通常、CSSは下に追加したコードの指示が優先して反映されますが「!important」を付けると順番に関係無く最優先で反映されるためスタイル崩れを防ぐことができます。
・元から記述されているコードは消さないで最後の「 } 」のすぐ下にペーストします。
・他に自分でコードを書いている場合も同様に最後の「 } 」の下に追加でペーストします。
・↓字体の設定の仕方はこちらで知ることができます。
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
・↓カラーコードはこのサイトで調べられます。
ご参考になれば幸いです。
＼ CSS勉強するなら ／
【関連記事】
dangomushijouhou.hatenablog.com
dangomushijouhou.hatenablog.com
dangomushijouhou.hatenablog.com
