ふきだしを使った際にアイコンの端が切れる問題を解決しました

ブログテーマ「Blooklyn」をスマホでみると、画面の端が切れてみえることがあります。

PCだときちんと入るのに

f:id:yuzumochi3:20171115003341j:plain

 

スマホやタブレットでみると、画面の端に接したところが切れてしまいます。

f:id:yuzumochi3:20171114234533j:plain

 今回はその対処方法です。

「両端が切れる問題」が発覚した記事はこちら

www.yuzumochi.com

画面端で切れないようにする対策

Blooklynのレスポンシブ処理には独特の癖があるのか、アイコン以外でも画面の端に接すると切れてしまうようです。

f:id:yuzumochi3:20171114233317j:plain

これは見出しですが、画面の端に接した部分が両方とも切れています。

今回は、アイコンの端に余白をつくり、画面端から離すことで対策してみます。

marginで左右余白を指定する

ふきだしアイコンは、こちらのサイトのコードを使っています。

ohama-style.com

もとのコードをみると、余白を指定する部分が次のようになっています。

margin:0 auto 3px auto;

marginの後ろに並ぶ4つの項目が、余白を指定しているところです。

「上、右、下、左」の順になっているのですが、コードをみると右も左も「auto」になっています。

ここをautoではなく、画面端から離したいだけの幅をいれると、左右に余白をつくることができます。

余白をつくる

というわけで、今回はほんの少しの余白ができればいいので、「5px」を入れてみます。

margin:0 5px 3px 5px;

としてみたところ・・・

f:id:yuzumochi3:20171116005637j:plain

端が切れずに、ちゃんと画面内に入るようになりました。

この方法なら、ブログテーマ自体をいじるよりも、簡単になおすことができます。

見出しの両端が切れる問題

ちなみに、見出しの両端が切れる問題は、少しややこしそうだったので、代替デザインをさがしました。

f:id:yuzumochi3:20171114233317j:plain

「縦のステッチが入っていないもの」に変えることで解決しました。

f:id:yuzumochi3:20171116013451j:plain

コードはこちらからお借りしました。

blog.minimal-green.com

まとめ

今回は、ふきだしの端が切れる現象の解決方法でした。同じような症状で困っている人がいたら、ぜひ参考にしてみてくださいね。