こんにちは。

事務サポーター　山本のりこです。

【知っているようで、知らなかった～!】

スマホでブログみてると、

ときどき枠線から

はみ出しちゃってる写真

みかけますよね

私も、先日はじめて

はみ出しちゃってました。

これはイカンと、

しらべましたので、

共有したいと思いまして…

気にしない人は

全く気にしない程度のことですが、

気になる～人はいるのです。

なんとなく収まりが悪い

その写真

ちゃんと枠線に収めたい人

ちゃんと方法がありますよ。

ブログを書いてるときは、

いい感じに収まってます。

プレビューで見ても収まってる

しかし、スマホでみると

ガッカリ！！

はみでてる！！！

【　解決法　】

HTML表示に切り替えて

書き換え前：

<div style="height:12px;"><span style="margin-left:8px; padding:6px 10px; background:#ff9933; color:#ffffff; font-weight:bold;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">はみ出しちゃう写真</span></div>
<div style="border: 2px solid rgb(255, 153, 51); padding: 25px 12px 10px; font-size: 0.85em; border-radius: 5px; text-align: center;■"><br>
<br>
<br>
<br>
<a href="https://stat.ameba.jp/user_images/20170625/14/clerk-noriko/d5/52/j/o0640042713968350642.jpg"><img alt="" contenteditable="inherit" height="258" src="https://stat.ameba.jp/user_images/・・・・・・・・・・・・・.jpg" width="378"></a><br>
<br>
<br>
</div>

変える部分は3点

①　外枠線の<div style・・・・・・・・・・・・・>の最後、■の部分に

　　　overflow:auto;　を挿入

　※1つ目の<div style・・・・・・・・・・・・・>は見出しの線なので、2つ目の<div style・・・・・・・・・・・・・>が外枠線の記述です。

写真の<img alt・・・・・・・・・・・>の中を変更

②　height="数字"　　→　　数字をautoに　　height="auto"

③　width="数字"　　 →　数字を100％（または、お好みで95％など）に

　　　　　　　　　　　　　　　　　　width="100％"

書き換えてみると

サイズぴったりですね。

ちょっと余裕がほしいときは、

95％にすると

程よく収まりました

HTMLをさわるとなると、

難しいと思われがちですが、

ほんの少し書き換えるだけで、

スッキリしました。

あなたのブログ写真、枠線からはみだしてませんか？【知っているようで、知らなかった～!】