Bloggerで画像の配置を思い通りに行いたい｜Blogger修行

Before、デフォルトのカラー

ケロ＠Blogger修行中です。

修行はまだスタートしたばかりで、背景色やテキストカラーなどの変更をする設定画面の出し方すらわかっていませんでした(笑)。


Bloggerでテキストリンク色を変更する｜Blogger修行

そもそもヘルプコールの内容のひとつは、
「画像を思い通りの位置に配置できなくてイライラする！」でした。

いくつかのBlogサービスの編集画面を操作したことはあったので、Blogger特有の画像配置のクセをつかめるかどうかを確認できさえすればいいよね、聞かれたら調べりゃいいや、とたいして検証もせず放っておいたのでした。

After、ちょこっと変えてみた

ちょっと気が向いて自発的に検証を始めてみたら、確かに画像の配置が直感的にやりづらいBloggerのクセを徐々に感じてきました。

これはテキトーにいじってたらできた。

例えば、文章の回り込みが自然にできる部分とできない部分がありますよね。

左の画像に対する、このブロックの文章だと、回り込みがちゃんとできてますけど、この文章を上につなげたいと思った場合はどうでしょう。

「例えば……」の「例」という字の先頭でBackspaceキーを押すか、「……感じてきました。」の句点の直後でDeleteキーを押すことでしょう。


ワープロ的に考えると正解ですが、Bloggerでそれをやるとこうなります。

Before、上の余白を詰めたいと思ったのに…。

After、なぜ写真の説明に吸い付いちゃうの！？

これは操作に慣れていないと非常にイラッとする動きですね……。tableタグに取り込まれてしまうのです。

打ちはじめ部分。

Bloggerで新規投稿を開いた時点ではHTMLは白紙です。
ベタ打ちで文章を打ち始めても非常にシンプルです。

で、よくありがちな操作ですが、文章ある程度打ったらそろそろ画像を挿入して、文章に回り込みさせようかな、なんて追加してみると、画像を挿入すると、デフォルトでは中央に配置されるようになっています。

多くのBlogサービスの編集画面やHTMLエディタでは、文章を書き出したら左寄せがデフォルトで、そこに画像を挿入しても左寄せになると思いますが、Bloggerはタグに影響されないとこに画像を挿入すると、デフォルトで中央寄せになってしまうのです。
で、何らかのタイミングで画像を挿入した時に以下のタグが含まれていました。

<div class="separator" style="clear: both; text-align: center;">（略）</div>

このタグで文章が挟まれている箇所では、画像は回り込まずに行間に配置されます。
それは「お約束」なのでわかります。

しかしBloggerのよくわかんないとこは、画像の配置を左右に振ったり、ドラッグ&ドロップしているうちに、このタグが消滅してくれる場合があることです。

また、自分で削除しようと、HTMLに切り替えて編集していても、ちょっとタグをいじりかけただけでもリアルタイムで「タグが閉じられていません」とか、画面にチラチラ警告が出たりするのがウザいです。
タグをいじれるからHTMLモードで開いているのであって、正直その機能はいらんと思いますが……。

まあ、画像の配置においてはタグがわかればちょっと探ってみた方が吉の模様です。

って書きながら、一回Blog更新したら、なぜか一番最初に挿入した画像のマージンだけやたら狭いのは何故なんだ！
チラッとタグ見る限り、他の画像と同じ設定のはず……酔ってないときもう一度見るから……今日は寝よう……。

あきらめてください…。