隣の花の育てかた

~気になるお隣さん【5人家族+ねこ】の家庭事情~

5人家族節約術
ねことの暮らし
我が家のこと
子ども3人子育てのあれこれ

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

f:id:Sakuranbox:20201231163828j:image

 

 

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

 

カエレバを使っていましたがもしもが「かんたんリンク」を作ってくれてからもしもで作るようになりました

 

 

すごく簡単にリンクが作れるようになったけど…

 

 

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

 

 

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

 

 

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

 

 

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

 

 

 

 

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

 

PC版は見やすいのですがスマホ版は大きすぎて見にくい…

 

 

と思うのは私だけでしょうか??

 

 

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

 

 

≪iPhone6の画面です≫

f:id:Sakuranbox:20201230153014j:plain
f:id:Sakuranbox:20201230153011j:plain

 

 

なんとかスマホの画面にリンクも含め全部入れたくて

  • メーカー名
  • 型番

 は非表示に

 

 

余分な空白は小さくさせました

 

f:id:Sakuranbox:20201230153649j:plain
f:id:Sakuranbox:20201230153007j:plain

 

 

比較すると一目瞭然!

 

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

 

 

f:id:Sakuranbox:20201230153004j:plain


 

 

リンク文字が3行までならiPhone6の画面でも全部入りきれるように!

 

f:id:Sakuranbox:20201230153007j:plain
f:id:Sakuranbox:20201230153018j:plain

 

 

 

実際のリンクはこちら

 

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

 

 

 

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

 

 

 

 

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

 

 

となっています

 

 

 

CSSはこちら

 

デザイン→カスタマイズ→デザイン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; } } /*ここまで*/

 

Amazon 楽天 Yahoo! それぞれのリンク色を変えたかったら

18行目 21行目 24行目で色指定コードを変更してください

 

 

色コードはこちら

 

 

 

ごめんなさい!解説不可能です

 

このCSSを作ったのは約1年前で今よりもっと知識がありませんでした

 

 

いろんなサイトを参考にさせて頂きましたが

私がしたい「かんたんリンクを小さくさせるカスタマイズ」ではありませんでした

 

 

どうしても小さくさせたくて、ない頭をフル回転!

カスタマイズ記事を読み込んで検証してを繰り返してやっとできたCSS

 

 

その時にどこをどういじったのかメモしておけばよかったんですけどね…

 

 

 

当時はやっとできた!!っていう達成感ですっ飛んでました

 

 

 

なので

  • どこをどういじったのか
  • 何を加えたのか

 

まったく覚えていません(チーン)

なので読み取ってください(泣)

 

 

同じように小さくさせたい方がいるかな?と思い、不完全燃焼のカスタマイズ記事になってしまいましたが載せてみました

 

 

今のところ不具合なく作動していますが

CSS初心者が悪戦苦闘して作ったものですので追記するのは自己責任でお願いします

 

 

 

追記:新機能【ボタン追加】にも対応 注意点は?

f:id:Sakuranbox:20210224153628j:plain

 

もしもに新機能がつきました!

ボタンを4個5個と追加できるようになってさらに便利になりました

 

 

新機能にもこのCSSは対応していてほっとしましたが注意が2点あります

 

 

①指定した色が反映される

ボタン追加したときに選択できるボタンの色

この色が実際のブログに反映されます

 

f:id:Sakuranbox:20210224153554j:plain

 

 

緑を指定すれば緑に

紫を指定すれば紫になります

 

f:id:Sakuranbox:20210304222618j:plain
f:id:Sakuranbox:20210304222616j:plain


きちんと4個めにも影と矢印が反映されています

 

 

②画像は大に

f:id:Sakuranbox:20210224154440j:plain

 

このCSSは画像を大に合わせて余白を狭く修正をしています

 

 

画像サイズを中にすると画像が見切れるので必ずを選択してください

 

 

さらに使いやすくなったもしもアフィリエイト!

CSSがそのまま反映できてほっとしました

 

 

CSSを作ったすもぐりさんとみことさんはすごい!