Bloggerのテーマを「QooQ」から「JetTheme」に変更したついでに、ブログの稼ぎ頭「もしもアフィリエイト」提供の”かんたんリンク”のデザインもカスタマイズしてみた。
この手の記事を読むのは稼ぐ系ブロガーなので、、つべこべ言わず、、
カスタマイズ結果
PCとタブレットの表示はこんな感じ。
ショップリンクは横並びにしてスペースを節約。
問題はスマホ表示。
※デフォルトで表示されるメーカー名や型番は非表示にしている。メーカー名・型番非表示はHTMLコード改変（規約違反）にあたる可能性あり。
スマートフォンではリンク全体の横幅自体を最大265pxに。iPhone SE2あたりでもリンクが画面を覆い尽くすような事はないはず。（※シミュレーター上では大丈夫だった。）
狭いスマホ画面領域を圧迫しないように、リンク内の余白など極力排除している。
今回のカスタマイズはショップリンクを2つ（Amazon・楽天）に限定している。ここにヤフーを追加する事は想定していない。
もし仮にショップリンクを3つにする場合、横並びはちょっと厳しい気がする。
サンプルコード-CSS
/*--------------------------------------
もしものかんたんリンク-CSS
--------------------------------------*/
/* リンク外枠 */
.easyLink-box.easyLink-size-s {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
padding: .5rem 2rem;
border: 1px solid #d3d3d3;
border-radius: .25rem;
}
/* 商品画像 */
div.easyLink-box div.easyLink-img {
margin-right: 3rem !important;
}
/* 商品タイトル */
p.easyLink-info-name a {
color: #006ecc !important;
font-weight: 600 !important;
}
/* ショップボタン */
p.easyLink-info-btn {
display: flex !important;
justify-content: space-between !important;
}
/* Amazon・楽天リンク */
a.easyLink-info-btn-amazon,
a.easyLink-info-btn-rakuten {
width: 48% !important;
margin: 0 !important;
padding: 0 !important;
}
/* メーカー名・型番非表示 */
p.easyLink-info-maker,p.easyLink-info-model {
display: none;
}
/*--------------------------------------
小さめタブレット対応？-CSS
--------------------------------------*/
@media (max-width:703px){
.easyLink-box.easyLink-size-s {
padding: 0 1rem !important;
}
div.easyLink-box div.easyLink-img {
width: 200px !important;
height: 200px !important;
margin-right: 1.5rem !important;
}
/* カーソルを含むBOX */
div.easyLink-box div.easyLink-img p.easyLink-img-box {
max-width: 180px !important;
max-height: 180px !important;
margin: 0 !important;
}
div.easyLink-box div.easyLink-img p.easyLink-img-box span {
width: 180px !important;
height: 180px !important;
top: 5px;
}
/* 画像サイズ */
div.easyLink-box.easyLink-size-s div.easyLink-img p.easyLink-img-box span > img {
width: 150px !important;
height: 150px !important;
object-fit: contain !important;
}
div.easyLink-box div.easyLink-info {
margin: auto;
}
p.easyLink-info-name {
line-height: 1.4 !important;
}
p.easyLink-info-name {
font-size: 1.05rem !important;
}
p.easyLink-info-btn a {
height: 33px !important;
}
}
/*--------------------------------------
スマホ対応-CSS
--------------------------------------*/
@media (max-width:480px){
div.easyLink-box.easyLink-size-s {
max-width: 265px !important;
padding: .5rem 1rem !important;
}
div.easyLink-box div.easyLink-img {
width: 200px !important;
height: 200px !important;
margin: 0 auto !important;
overflow: hidden !important;
}
div.easyLink-box div.easyLink-img p.easyLink-img-box {
max-width: 200px !important;
}
div.easyLink-img p.easyLink-img-box span > img {
max-width: 180px !important;
max-height: 180px !important;
}
p.easyLink-info-name {
font-size: 1rem !important;
text-decoration: underline;
line-height: 1.6rem !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
p.easyLink-info-btn {
margin-top: .75rem !important;
}
a.easyLink-info-btn-amazon,
a.easyLink-info-btn-rakuten {
font-size: .65rem !important;
height: 30px !important;
margin: 0 !important;
padding: 0 !important;
}
}
こちらのコードを利用する場合は全てにおいて自己責任となります。もしも不具合が発生した場合はご指摘いただけると助かります。
CSSの設置はブログサービスごとに任意の場所。
※かんたんリンク作成時に画像表示サイズ：中（デフォルト）を選択すること。
サンプルコード-HTML（おまけ）
<div class="easyLink-box easyLink-size-s">
<div class="easyLink-img">
<p class="easyLink-img-box">
<span><img：商品画像></span>
<a href="#" class="easyLink-arrow-left"><img：←></a>
<a href="#" class="easyLink-arrow-right"><img：→></a>
</p>
</div>
<div class="easyLink-info">
<p class="easyLink-info-maker">メーカー名</p>
<p class="easyLink-info-name"><a>商品タイトル</a></p>
<p class="easyLink-info-model">型番</p>
<p class="easyLink-info-btn">
<a>Amazonで見る</a><a>楽天市場で見る</a>
</p>
</div>
</div>
かんたんリンクのHTMLはこのようになっている。コーディング初心者にとって悩ましいのが、画像を囲っているクラスが3層構造になっている点、、ここでハマる。
簡単なはずの変更がなかなか上手く反映されないとか。
この辺を注意しながらカスタマイズすれば発狂しなくて済むと思うよ。
最後に、、
かんたんリンクのカスタマイズ（CSS）が、もしもアフィリエイトの規約に抵触するか？正直よくわからないし調べてもいない。
おそらく問題ないはず、だって他の人もやってるしアフィリエイト界隈じゃ常識だろくらいのモノで。
とはいえ心配な方はしっかり自分で調べて納得してから試して欲しい。