PC
PR

【WordPress入門】複数の画像を横一列に並べて表示する方法

あき
記事内に商品プロモーションを含む場合があります

WordPress(ワードプレス)で記事を作成する際、「複数の画像を横一列に並べて表示したい」ということはありませんか?

今回はWordPress初心者向けに、「複数の画像を横一列に並べて表示する方法」をご紹介します。

複数の画像を横一列に並べて表示する方法

“ギャラリー”を使うと簡単に画像を横に並べて表示することができます。

ギャラリーとは

WordPressには“ギャラリー”という機能があります。

“ギャラリー”を使うと、複数の画像を綺麗に並べて、ビジュアル性が高いレイアウトを簡単に作ることができます。

嬉しい
嬉しい

既存の機能で簡単にビジュアル性の高いレイアウトを作ることができるなんて便利だね!!!

知りたい
知りたい

“ギャラリー”って初めて聞いたから、どうやって使うのか知りたいな

WordPressにある既存の”ギャラリー”だけでなく、プラグインを利用することで、画像をさらに魅力的に見せることも可能です。

今回は、WordPressにある既存の”ギャラリー”機能を使って、簡単に「複数の画像を横一列に並べて表示する方法」をご紹介しますので、ぜひ参考にしてみてください♪

“ギャラリー”を追加する手順

“ギャラリー”を追加する手順は以下の通りです。

  1. 「+」ボタンより”ギャラリー”を選択します
ギャラリーボタンをクリックする画像
  1. メディアライブラリをクリックします
メディアライブラリをクリックする画像
  1. 挿入したい画像を選択して「ギャラリーを作成」をクリックします
ギャラリーをクリックする画像
  1. 挿入したい画像が選択されていることを確認して「ギャラリーを挿入」をクリックします
ギャラリーを挿入するをクリックする画像
  1. 以下のように横に並びで画像を表示できました!
ギャラリー挿入が完了した画像

注意点

ここでは、筆者の体験談から注意点をご紹介したいと思います。

筆者
筆者

PCで画像のサイズを調整していたら失敗していた・・・

筆者は、普段PCで記事を「書く→チェック→投稿」しているので、いざ仕上がった記事をふとした拍子にスマホ版で確認した時に、「こんなはずじゃなかった・・・」と思うことがありました。

自戒も込めて、PCだけでなく、スマホだと見栄えが変わってしまう事例をご紹介します。

PCとスマホの違いによる注意点

PCで”ギャラリー”機能を使って4枚の画像を挿入して記事作成した時の事例をもとにした注意点のご紹介をします。

(Before)PCで記事に画像を挿入

PCで確認すると、“ギャラリー”で横並びに一列で表示できるのは3枚まででした。

【PC】“ギャラリー”機能で画像を4枚挿入

そこでPCで記事作成をしていた筆者が思ったのは、

筆者
筆者

画像の大きさが揃っていない・・・

この悩みを解消するために、1~3枚目は”ギャラリー”、4枚目の画像は”画像”機能で画像を挿入してみました!

【PC】1~3枚目は”ギャラリー”、4枚目の画像は”画像”機能で画像を挿入
筆者
筆者

画像の大きさが揃って見栄えが良くなった!!
少し手間だけれど、最後の1枚は手動で大きさを揃えて挿入する形がベストだ!!

しかし後日、スマホでブログを見た時に自分の考えの甘さを知ることになったのでした・・・

(After)スマホで見ると画像大きさが不揃い

後日スマホでを見た時に驚いたのは、挿入した画像の3枚目が大きく表示されて、4枚目はまた小さく表示されている事実を目の当たりにしたことでした・・・!

筆者
筆者

画像の大きさが揃っていない・・・
折角見栄えを調整したのに・・・泣

【スマホ】1~3枚目は”ギャラリー”、4枚目の画像は”画像”機能で画像を挿入

ショックを押し殺し試しに”ギャラリー”機能で4枚の画像を挿入すると、スマホから見た時には2枚ずつ横並びに表示されて画像の大きさが揃って表示されることを知りました。

【スマホ】“ギャラリー”機能で画像を4枚挿入

どうやら”ギャラリー”で画像を挿入すると、以下のような仕様の違いが出るようでした。

  • PCでは3枚まで横一列に画像を並べることができる
  • スマホでは2枚まで横一列に画像を並べることができる

結論

筆者のオススメは、初心者は”複数の画像はギャラリー”機能を使って画像を挿入することです!

他に画像のレイアウトを整える方法があるかもしれませんが、単純に”ギャラリー”を使えば楽で見栄えも悪くないと思います^^

嬉しい
嬉しい

“ギャラリー”を使えば簡単に画像を並べて表示できるから便利だね!

ちなみに、どうしても3枚横並びで画像を挿入したい場合は、筆者ならPCでレイアウトを整えてからスクリーンショットを取得して掲載するかなと思います。

PCとスマホでのギャラリーの仕様の違いに注意しつつ、納得のいく記事を作成したいですね!!

筆者自身、まだまだ記事作成を始めたばかりで勉強しながらではありますが、別の記事でもWordPress利用者向けに便利な利用方法をご紹介予定なので是非参考にしてみてください^^

まとめ

無事に複数の画像を横一列に並べて表示できましたでしょうか?

ブログを始めたばかりだと操作方法が分からなくて困ってしまうことも多いと思います。

一緒にWordPressの操作方法を徐々に覚えて、オリジナルのブログ作成をしましょう♪

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトは reCAPTCHA と Google によって保護されていますプライバシーポリシー利用規約 申し込み。

reCAPTCHAの認証期間が終了しました。ページを再読み込みしてください。

ABOUT ME
はる
はる
ブロガー / 永遠の厨二病
B'zとMr.Childrenが大好きです!音楽、アニメ、PCから雑記まで、生活全般で気になることをつらつら書いています。もしよかったら寄り道程度の気持ちで、ゆっくりしていってもらえたら嬉しいです♪^^
記事URLをコピーしました