もしも「かんたんリンク」スマホ版を小さくカスタマイズしてみた！新機能にも対応注意点は？

f:id:Sakuranbox:20201231163828j:image

もしもの「かんたんリンク」はスマホ表示だと画面に収まりきらなくて大きすぎるのが私的に気になっていました

そこでスマホ表示でもワンスクロールで画面に収まるようにカスタマイズしました

今のところもしもでもきちんと反応してくれてるし、デザインも問題なしですが…

ＣＳＳ張り付け・その後のことは自己責任でお願いします

ひこ

新機能のボタン追加にも対応しています
最後のほうに新機能の注意点を追記しました

もしも「かんたんリンク」のスマホ版を小さくした完成はこちら
- 実際のリンクはこちら
もしも「かんたんリンク」のカスタマイズＣＳＳ
- ＣＳＳはこちら
ごめんなさい！解説不可能です
追記：新機能【ボタン追加】にも対応　注意点は？
- ①指定した色が反映される
- ②画像は大に

もしも「かんたんリンク」のスマホ版を小さくした完成はこちら

ＰＣ版は見やすいのですがスマホ版は大きすぎて見にくい…と思うのは私だけでしょうか？？

画面に収まりきらなくてスクロールしないといけないくらい大きい

＼iPhone６の画面／

なんとかスマホのひと画面にリンクも含め全部入れたいので、余分な空白は小さくし、メーカー名・型番は非表示にさせました

比較すると一目瞭然！

かなりすっきり小さくなりました！！

f:id:Sakuranbox:20201230153004j:plain

リンク文字が３行までならiPhone６の画面でも全部入りきれるように！

実際のリンクはこちら

画像は「大」を使用しています

リンク

もしものデザインやメーカー・型番の非表示のＣＳＳはお二方から頂きました

デザインのＣＳＳ

もしもの「かんたんリンク」のボタンをカスタマイズ｜スマホ表示もあり | SUMOGURI [すもぐり]

メーカー名・型番非表示ＣＳＳ

もしもアフィリエイトかんたんリンクのスマホ表示サイズをカスタマイズ - mikotohodo-三言ほど-

もしも「かんたんリンク」のカスタマイズＣＳＳ

前半… すもぐりさんのデザインＣＳＳ
中間…参考にしながら考えた空白非表示ＣＳＳ
後半… みことさんの非表示ＣＳＳ

となっています

ＣＳＳはこちら

デザイン→カスタマイズ→デザインCSSに追記してください

※念のためバックアップを取ってからにしましょう

ダブルクリックで全選択できるよ

/*--------------------------------------
  もしもの簡単リンクのカスタマイズ
--------------------------------------*/
.easyLink-info-btn {
	display: inline!important;
}
.easyLink-info-name a { color: #3296d2 !important; /* 文字色 */ } 
.easyLink-info-btn a{
	margin: 5px 10px 5px 0!important;
	padding: 0 12px!important;
        line-height: 35px!important;
	display: inline-block!important;
	width: 93%!important;
	box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
	font-size: 1em!important;
}
.easyLink-info-btn-amazon{
	background:#ffb36b!important;
}
.easyLink-info-btn-rakuten{
	background:#ea7373!important;
}
.easyLink-info-btn-yahoo{
	background:#73c1ea!important;
}
.easyLink-info-btn a:before {
    font-family: FontAwesome;
    content: "\f0da";
    padding-right: 3px;
}
@media screen and (max-width: 480px){
	div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
		width: 93%!important;
		position: relative;
	}
	.easyLink-info-btn a:before {
		padding-right: 5px;
		right: 5px;
		position: absolute;		
	}
}
/*ここから追加項目*/
@media screen and (max-width: 480px) {
div.easyLink-box div.easyLink-info p.easyLink-info-name {
 margin-bottom: 5px;
 font-size: 15px;
 }
div.easyLink-box {
 padding: 10px 20px;
 }
div.easyLink-box div.easyLink-img p.easyLink-img-box span > img {
 max-width: 45%;
 max-height: 100%;
 }
 div.easyLink-box div.easyLink-img {
 margin-bottom: 5px;
 height: 100%;
 }
div.easyLink-box div.easyLink-img::before {
 padding-top: 80%!important;
 }
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
 margin-top: 10px;
 text-align: center;
 }
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
margin: 12px 0;
padding: 6px 0;
}
.easyLink-info-maker {
 display: none;
 }
.easyLink-info-model {
 display: none;
 }
 }
/*ここまで*/