wordpressで画像を横並び表示にする簡単な方法。プラグインいらず。

ブログ更新しているところ
ブログを更新していると、画像を横に並べたいなっていうときがあるでしょう。

とくに、スマホの画面をキャプチャすると縦に長くなるので画像を横に並べて表示させたくなる時があります。

(ちなみにスマホで撮影した写真・画像を使ってPCからブログ更新するならgoogleフォトを使うと圧倒的に便利です。)

縦に長くて横幅が狭い画像で、さらに二つの画像を比較したいときは、画像を横に並べたほうが閲覧者に分かりやすくなりますよね。

以下はwordpressの場合です。他の無料ブログなどでもHTMLがカスタマイズできるならOKでしょう。

display:inline-blockを加えるだけでOK

簡単に画像を横並びにするには、

<div style=”display:inline-block;”>
【画像のhtmlタグ】【画像のhtmlタグ】
< /div>

というふうにするだけでOKです。

このタグで画像部分を囲むだけで複数の画像が横並びになります。

横に並びきらない場合は、自動で縦に並びます。

wordpressの場合、投稿画面の「テキスト」のほうで
< div style=”display:inline-block;”>
【画像のhtmlタグ】【画像のhtmlタグ】
< /div>
を記述するようにします。

wordpressの投稿画面の「テキスト」とは、ここのことです。

wordpressのテキスト

気を付けたいのが、
<div style=”display:inline-block;”>
【画像のhtmlタグ】
【画像のhtmlタグ】
< /div>
というふうに二つの画像のHTMLタグを改行してしまうと、画像が横並びになりません。

縦に並んだままになってしまいます。

なぜかというと、
wordpressの投稿画面の「テキスト」で
<img src=”○○○”>
<img src=”○○○”>
というふうに入力した状態になると自動的に<br />が挿入されて改行されてしまうからです。

<img src=”○○○”>【ここに自動で<br />が挿入される】
<img src=”○○○”>

ですので、
<img src=”○○○”><img src=”○○○”>
というふうに改行しないようにして記述しないといけません。

横並びになった画像の間に余白を作るには

display:inline-block;で画像が横並びになったとしても、二つの画像の間に余白がなく二つの画像がピッタリとくっついた状態で表示されます。

こんなふうに

こういうときは、後ろ側の画像のhtmlタグに、
style=”margin-left:5px;”
を書き加えると、二つの画像の間に5pxの余白ができます。

<img src=”○○○” style=”margin-left:5px;“>

こういうふうに二つの画像に間に余白を作ることができます。

スマートフォンの画面でも画像を横並びにする簡単な方法

スマートフォンでの表示になると、
style=”display:inline-block;”
をしていたとしても、画像の横幅によっては横並びにならずに自動的に縦に並ぶ場合があります。

この状態でもOKであればいいですが、PCでもスマホでも横並びに表示させたい場合はどうすればいいのでしょうか?

簡単な方法は、それぞれの画像の横幅を、たとえば45%などに指定するといいです。

こんな感じにします。

< img src=”○○○” width=”45%” />

縦の幅は指定しないようにします。

こうすればスマホの横幅の狭い画面でも画像が横並びで表示されるようになります。

スマホ画面でも横並び

画像の横幅のwidth=”45%”の45%の部分を、いろいろ調整して自分のスマホで確かめたりして調整してみましょう。

各種スマホの画面サイズで、どのように表示されるか確認する方法

自分のスマホ以外のスマホで、どのようにブログやサイトが表示されているか確認したらいいのでしょうか?

こういうときには各ブラウザで用意されているシュミレーターを使って確認してみるといいでしょう。

こちらで主要ブラウザでのスマホ画面を疑似的に確認する方法が紹介されています。

Web担当者なら知っておきたい、スマホ画面チェックツール8選
https://ferret-plus.com/224

これらスマホ画面サイズのなかでも、インチ数の少ない画面の小さいスマホの画面でも思い通りに表示されているなら、ほぼ各種ディスプレイサイズに対応できていることになるでしょう。

本当は、画面の横幅に合わせてCSSによって表示方法を変えていくというレスポンシブという方法があるんですが、ブログ記事の画像の表示をカスタマイズする程度であれば、直接HTMLを書き加えるぐらいの簡単な方法でいいと思います。

スポンサーリンク
レンタングル大




レンタングル大




シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レンタングル大