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

ブロガー雑記
この記事は約6分で読めます。

この2つの画像、横並びにできないかな?

という人のために長年wordpressでブログ記事を書いてきたブログ管理人シエン(@85uruta)が、画像を横に並べる方法を紹介します。

この記事を読んでいただくと、

  • プラグインなしで画像を横並びにする方法
  • 横に並んだ画像の間に余白を作る方法

などが分かりますよ。

画像・写真を横に並べる方法を2つ紹介

wordpressで画像・写真を横に並べる方法、とりあえず2つ紹介します!

まだまだいろんな方法あると思うんですが、簡単にできる方法とHTML・CSSを使う方法分かっておけば、たいていの場合対応できると思う。

2つの方法とは、

  • ブロック「ギャラリー」を使う
  • cssのdisplay:inline-blockを使う

シンプルに画像・写真を横に並べたいだけなら、ブロック「ギャラリー」を使う方法でOK!

シエン
シエン

では解説していきます。

ブロック「ギャラリー」を使って画像を横に並べる方法

まずはブロック「ギャラリー」を出します。

ブロック「ギャラリー」

横に並べたい画像をアップロードしていきます。

画像をアップロード

メディアライブラリ(すでにアップロード済の画像)を選択することもできますね。

1枚目の画像をアップロードすると、画像の下にアップロードできるのが出現するので、そこから2枚目以降の画像をアップロード。

2枚目以降のアップロード

するとこんなふうに2枚の画像が横並びになります。

横並びになった2枚の画像
シエン
シエン

「ギャラリー」使えば超簡単!

さらに画像を追加して3枚以上の画像を横並びにもできます。

「ギャラリー」だとスマホ表示では縦に並ぶ場合がある

「ギャラリー」を使うと画像を横並びにできますが、横幅の狭いスマホでの表示になると画像が横に並ばず縦に並ぶ場合があります。

それでもOKっていう人はいいんですが、

「スマホでも横に並んだまま表示させたいんだ!」

っていう人の場合は「ギャラリー」ではなくHTMLという簡単なプログラミング言語を使う方法があります。

cssのdisplay:inline-blockで、スマホでも画像を並べることができる

HTMLやCSSを使う方法ですね。

(HTML,CSSとは、たとえばブログの表示とかをコントロールするための簡単なプログラミング言語みたいなものです。)

「ギャラリー」を使う方法だと、パソコンのブラウザ表示では横に並んでいた画像が、スマホで表示すると縦に並んでしまうという場合があります。

スマホ表示でも横に並んだまま表示させたい場合は、以下の方法でできますね。

シエン
シエン

では具体的に解説していきます。

まず横に並べたい画像をwordpressにアップロードします。

1.ブロック「カスタムHTML」を出す

まずは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】=wordpressに画像をアップしたときに付与されるアドレス
  • 【画像の説明】=どういう画像かの説明。リンゴの画像だったら「リンゴ」と入力しとく
  • 「width=”49%”」というのは画像の横幅の指定です
シエン
シエン

【画像のURL】が、ちょっとややこしいので説明していきます!

画像のURLの調べ方

画像のアップロードの方法は分かっておられる前提で説明していきます。

WordPressにアップロードした画像のURLの調べ方・貼り付け方は以下のとおり。

  1. WordPressのメニュー「メディア」→「ライブラリ」でアップロードした画像の一覧を表示
  2. 目的の画像をクリック
  3. 右のほうに「ファイルのURL」という項目があり、その下に「URLをクリップボードにコピー」というボタンがあるのでクリック
  4. これで画像のURLをコピー完了
  5. コピーした画像のURLをカスタムHTMLで貼り付ける
シエン
シエン

他にも、記事でアップした画像を右クリックして「画像アドレスをコピー」するという方法もあるよ。

では、くわしく解説していきます。

①Wordpressのメニュー「メディア」→「ライブラリ」でアップロードした画像の一覧を表示
メニュー「ライブラリ」

「ライブラリ」はこんな感じの画面。

「メディアライブラリ」一覧
②目的の画像をクリック

横並びにしたい画像のURLを1つずつ取得していきます。

目的の画像をクリックします。

たとえば「3」という画像のURLをコピーしたい場合、「3」の画像をクリック。

「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を書き加えるぐらいの簡単な方法でいいと思います。

まとめ

ということで画像を横並びにする方法でした。

今はスマホでブログ見る訪問者の人がほとんど。

なので、できたら「ギャラリー」ブロック使って、スマホ表示でも画像が横に並んだままになってほしいんですけどね。

今回の記事がお役に立てれば、うれしいです!

コメント

タイトルとURLをコピーしました