この２つの画像、横並びにできないかな？
という人のために長年wordpressでブログ記事を書いてきたブログ管理人シエン（@85uruta）が、画像を横に並べる方法を紹介します。
この記事を読んでいただくと、
などが分かりますよ。
画像・写真を横に並べる方法を２つ紹介
wordpressで画像・写真を横に並べる方法、とりあえず2つ紹介します！
まだまだいろんな方法あると思うんですが、簡単にできる方法とHTML・CSSを使う方法分かっておけば、たいていの場合対応できると思う。
2つの方法とは、
シンプルに画像・写真を横に並べたいだけなら、ブロック「ギャラリー」を使う方法でOK！
では解説していきます。
ブロック「ギャラリー」を使って画像を横に並べる方法
まずはブロック「ギャラリー」を出します。
横に並べたい画像をアップロードしていきます。
メディアライブラリ（すでにアップロード済の画像）を選択することもできますね。
1枚目の画像をアップロードすると、画像の下にアップロードできるのが出現するので、そこから2枚目以降の画像をアップロード。
するとこんなふうに2枚の画像が横並びになります。
「ギャラリー」使えば超簡単！
さらに画像を追加して3枚以上の画像を横並びにもできます。
「ギャラリー」だとスマホ表示では縦に並ぶ場合がある
「ギャラリー」を使うと画像を横並びにできますが、横幅の狭いスマホでの表示になると画像が横に並ばず縦に並ぶ場合があります。
それでもOKっていう人はいいんですが、
「スマホでも横に並んだまま表示させたいんだ！」
っていう人の場合は「ギャラリー」ではなくHTMLという簡単なプログラミング言語を使う方法があります。
cssのdisplay:inline-blockで、スマホでも画像を並べることができる
HTMLやCSSを使う方法ですね。
(HTML,CSSとは、たとえばブログの表示とかをコントロールするための簡単なプログラミング言語みたいなものです。)
「ギャラリー」を使う方法だと、パソコンのブラウザ表示では横に並んでいた画像が、スマホで表示すると縦に並んでしまうという場合があります。
スマホ表示でも横に並んだまま表示させたい場合は、以下の方法でできますね。
では具体的に解説していきます。
まず横に並べたい画像をwordpressにアップロードします。
1.ブロック「カスタムHTML」を出す
まずはHTMLをブログ記事に反映させるために、ブロック「カスタムHTML」を呼び出します。
「カスタムHTML」にHTMLコードを入力
カスタムHTMLにHTMLを入力していきます。
「カスタムHTML」に入力するHTMLは以下のようにしてください。
<div style="display:inline-block;">
<img src="【画像のURL】" alt="【画像の説明】" width="49%">
<img src="【画像のURL】" alt="【画像の説明】" width="49%">
</div>【画像のURL】が、ちょっとややこしいので説明していきます！
画像のURLの調べ方
画像のアップロードの方法は分かっておられる前提で説明していきます。
WordPressにアップロードした画像のURLの調べ方・貼り付け方は以下のとおり。
- WordPressのメニュー「メディア」→「ライブラリ」でアップロードした画像の一覧を表示
- 目的の画像をクリック
- 右のほうに「ファイルのURL」という項目があり、その下に「URLをクリップボードにコピー」というボタンがあるのでクリック
- これで画像のURLをコピー完了
- コピーした画像のURLをカスタムHTMLで貼り付ける
他にも、記事でアップした画像を右クリックして「画像アドレスをコピー」するという方法もあるよ。
では、くわしく解説していきます。
①Wordpressのメニュー「メディア」→「ライブラリ」でアップロードした画像の一覧を表示
「ライブラリ」はこんな感じの画面。
②目的の画像をクリック
横並びにしたい画像のURLを1つずつ取得していきます。
目的の画像をクリックします。
たとえば「3」という画像のURLをコピーしたい場合、「3」の画像をクリック。
すると「添付ファイルの詳細」の画面になります。
③「URLをクリップボードにコピー」で画像URLをコピー
「添付ファイルの詳細」画面の右のちょっと下のほうにファイルのURLという項目があり、
そのすぐ下に「URLをクリップボードにコピー」というボタンがあるのでクリック。
すると、この「3」の画像のURLをコピーできます。
④コピーした画像URLを貼り付ける（ペースト）
コピーした画像URLを、先ほどのカスタムHTMLのソースコードに貼り付けます。
<div style="display:inline-block;">
<img src="【コピーした画像のURLをここに貼り付け】" alt="【画像の説明】" width="49%">
<img src="【コピーした画像のURLをここに貼り付け】" alt="【画像の説明】" width="49%">
</div>実際にブロック「カスタムHTML」で貼り付けた画面がこれ
このようにすると、スマホ表示でも2つの画像が横に並んだままで表示されます。
もし画像が縦に並んでしまうようなら、「width=”49%”」の数値を48とか45とかにしてみてください。
この方法でスマホ表示でも2つの画像が横に並んだ状態がこちら
各種スマホの画面サイズで、どのように表示されるか確認する方法
自分のスマホ以外のスマホで、どのようにブログやサイトが表示されているか確認したらいいのでしょうか？
こういうときには各ブラウザで用意されているシュミレーターを使って確認してみるといいでしょう。
こちらで主要ブラウザでのスマホ画面を疑似的に確認する方法が紹介されています。
Web担当者なら知っておきたい、スマホ画面チェックツール7選
https://ferret-plus.com/224
小さいスマホの画面でも思い通りに表示されているなら、ほぼ各種ディスプレイサイズに対応できていることになるでしょう。
本当は、画面の横幅に合わせてCSSによって表示方法を変えていくというレスポンシブという方法があります。
しかし、ブログ記事の画像の表示をカスタマイズする程度であれば、この記事にあるような直接HTMLを書き加えるぐらいの簡単な方法でいいと思います。
まとめ
ということで画像を横並びにする方法でした。
今はスマホでブログ見る訪問者の人がほとんど。
なので、できたら「ギャラリー」ブロック使って、スマホ表示でも画像が横に並んだままになってほしいんですけどね。
今回の記事がお役に立てれば、うれしいです！
コメント