こんにちは、ikuzo(いくぞう)です。
私がブログを始めたころ憧れていたものがありました。それは、
左に画像、右に文章です。
単に左に画像、右に文章を入れればいいだけの話ですが、やってみるとレイアウトが崩れて意外とスムーズにはいきませんでした。
今回は私がやった方法を紹介しますので、私と同じように左に画像、右に文章を入れたいのにうまくいかないぞ、と悩んでいる方の参考になれば幸いです。
※この記事は、クラシックエディタを使っている方向けの記事です。
WordPressブログで画像の右側に文章を配置する方法
ご存知だと思いますが、WordPressで画像を挿入するには「メディアを追加」を押します。
挿入したい画像を画面へドラッグして、
画像を左側へ配置するには「添付ファイルの表示設定」の配置を「左」で指定します。
「なし」でも画像は左に寄りますが、右側に文字を入れることはできません。
画像を挿入した後でも、画像をクリックすることによって位置は変更可能です。
画像の配置を「左」にすると、画像の右側に文字を入れることができるようになります。
ちなみに画像を挿入してから文字を入れようとすると、画像の上に文字が回り込むことがあります。
これはテキストエディタで見ると、
imgタグ（画像）の前に文字が入力されているのが原因だということが分かります。
ですので画像の上に文字が回り込む場合は、コードの後ろに文字を入力してやれば画像の右側に文字が入ります。
右側に文章を入れると画像の間隔が不規則になる問題
このように左側に画像、右側に文章を配置すること自体はそれほど難しくはありません。
なんですが、実際にいくつか画像を入れると気になることが出てくると思います。
それは何かというと、PCで見ると
！Σ(ﾟДﾟ)……画像の間隔が違うくね？
そうなんです。画像の間隔が一定ではなく、不規則になるんです。
しかもスマホで見るとこんな感じです。PCと比較して画像が離れすぎていると思いませんか？
原因は、PCとスマホ（特に縦画面）では右側の余白（スペース）の大きさが違うことです。
文章を入れる右側のスペースは、PCは広くてスマホは狭いですよね。
上の画像では同じ文章を入れても、PCが2行に対し、スマホは6行も使っています。
どちらも文字の下には空白の4行があって、PCでは画像の右側に空白の4行が収まっていますが、
文章で行数を使っているスマホは、空白の4行が画像の下にハミ出すわけです。
このように画像の右側に文章を入れることによって、画像同士の間隔が違ったり、スマホで見た場合は間隔が広くなる現象が起きるわけです。
画像の回り込みを解除できるプラグイン（Clear Floats button）
こんな現象を解決するにはどうしたらいいか？
ドラえもんに出てくる「のび太くん」なら、きっとこう言いますね。
「あ～ん、ドラえも～ん、なんか解決する道具だしてよぉ～」
（ドラえもん）「もぉ～、しょうがないなぁ。そうだ！いいものがある」
てれれれってれ～
「Clear Floats button！」
探したら、WordPressには画像の間隔を均一にできる便利なプラグインがありました。
プラグイン「Clear Floats button」とインストールすると、ビジュアルエディタにはこんなボタンが追加されます。
さきほどのPCの画面に戻りますが、空白の4行を消すと下の画像が上の画像の右横に回り込みます。
画像の回り込みを解除したい場所にカーソルを合わせます。
そして「Clear Floats button」のボタンを押します。すると……
破線と「CLEAR」という文字が挿入されて、画像の回り込みが解除されました（もちろん破線と「CLEAR」は、実際には表示されません）。
テキストエディタで見ると、こんなコードが挿入されています。
プラグイン「Clear Floats button」を使うことによって、画像の間隔がすべて同じになります。
画像の間隔（余白）を調整する方法
あとはこの画像の間隔を広げたり狭くする方法を紹介します。
画像同士の間隔を調整するには、imgタグの前後に余白の大きさを指定するコードを書き込みます。
難しいことはないので、これから説明する手順と同じようにやってみてください。
テキストエディタを選択します。
画像のimgタグがあります。
imgタグの前に、次のコードをコピー＆ペーストしてください。
<div style=”margin-bottom: 80px;”>
こんな感じです。
そしてそれぞれの<br style=”clear:both;”>の後ろに</div>と入力します。
ビジュアルエディタに戻してみると、画像下側の余白が大きくなっていると思います（変わらない場合はダブルクォーテーションを疑ってください）。
「80px」の数字部分を大きくすると（たとえば100pxなど）余白がさらに大きくなり、数字を小さくすると余白も小さくなります。
数字はお好みで調整してください。
最後に
うまくできたでしょうか。
今回は「左に画像、右に文章」の記事を作るやり方と、画像と画像の間にある余白の大きさを調整する方法を紹介しました。
このやり方を覚えたのは、私がブログを始めたころで、画像の間隔を均一にするプラグインを発見するまでは私も悩みました。
私と同じように「画像の間隔が均一でなくて落ち着かない」「なぜスマホで見ると画像が離れるの？」と思った方がこの記事を見つけていてくれたら嬉しいし、少しでも参考になっていれば幸いです。
本日は最後まで読んでいただき、ありがとうございました。
コメント