Bloggerの画像の文章回り込み問題。左寄せに癖ありすぎ！

Bloggerの画像の扱いってちょっとめんどくさいですよね。

画像を挿入した状態から移動させようとすると文章が勝手に回り込んでレイアウトが崩れてしまいます。

解決法はいくつかあるのでご紹介したいと思います。

• 別のブログにてまとめ直しました。
  Bloggerのメモブログ：Bloggerの画像を左寄せや中央寄せにするやり方解説。
  https://blogger-memoblog.blogspot.com/2018/08/blogger.html

画像のまわりこみ設定とは？

まずは画像を挿入してみましょう。
赤のラインのところに画像をいれます。
画像が入りました。
そのままだとセンタリングされているので左寄せにしたいと思います。
画像をクリックするとメニューが出てくるので「左寄せ」のボタンを押します。
画像は左に寄ったのですが空いたスペースに文章が入り込んでしまいました。
これが回り込みと呼ばれるものです。

次は一番簡単な解決方法です。

回り込ませず画像を左に寄せる

今度は画像のメニューではなく「配置」のメニューから操作します。

まずは画像をクリックして選択、
「配置」を押すと4種類のメニューが出てくるのですが、
一番上の「左揃え」のボタンを押します。
今度は画像だけが左に寄りました。
右のスペースは少し気になりますがレイアウトが崩れることはありません。

では今の操作で何が変わったのでしょうか。

回り込みの秘密は「float」のタグ

画像を挿入した後HTMLボタンを押してソースを見てみます。

画像を挿入した直後

長くて見づらいので画像のアドレスは省略しています。

左寄せのボタンを押した時のソースの変化

プロパティが増えていますね。
その中に「float: left;」というものがあります。

意味は
「指定した要素を左に寄せ、後に続く内容はその右に回り込ませる。」

回り込みの犯人はずばりコイツです。

左揃えのボタンを押した時のソースの変化

今度は画像を囲う「div」のプロパティが変化しました
text-align: center;
だったのが
text-align: left;
に変わっています。

「div」とは<div>～</div>で囲んだ要素をグループ化するタグです。
なので囲まれた要素以外には影響を与えることはありません。
囲んだ画像だけが左に寄るということですね。

文章の回り込みをコントロールしよう

画像の横に文章をまわりこませ、
好きなところで回り込みを解除してみましょう。

まずは画像を挿入して画像メニューの左寄せで文章の回り込みさせます。



または

このタグを回り込みを解除したいところに挿入します。
 <br style="clear: both;">を入れてみましょう。
すると
少しは見栄えがよくなったかな？

<div style="clear: both;"></div>は
何でもいいので画像を入れて削除すると


が残骸として残るので赤文字の所を削除すれば完成ですね。
画像挿入で自動的に入るこの<div>要素ですが自動で入れたなら消した時も自動で消えて欲しいものなんですけどね・・・。
Bloggerの仕様はたまに変なとこありますよね（笑）

毎回打ち込んだりコピペしたりするのも面倒なので、辞書登録して変換に入れる方がいいかもしれません。

スマホでは回り込みを解除しよう

スマホでも回り込みさせると狭い隙間に文字が入り込んで非常に読みにくくなったりするので解除してしまいましょう。


上記のコードをcssに追加すればok。
「ディスプレイの横幅が780px以下の場合は画像の回り込みを解除する」
という意味です。

vaster2を使用している場合

スマホでの表示はこんな感じ

上記コードの赤字のところに下記を追記

.separator a{width:100%;}


これで回り込みは解除されます。

これを画面いっぱいのサイズに変更するには
さらに追記が必要になります。

先にレスポンシブデザインの下に追記した一行の下にこれも足してください。
画像でかすぎる！という方は１つめの回り込み解除の追記だけでＯＫです。

以上、Bloggerの悩みのひとつ、画像回り込み問題でした。

それではまた次回！