【WordPress】画像を横並びに表示したい。
【WordPress】
画像を
横並びにしたい
＊＊＊＊＊＊＊＊＊＊
画像をかっこよくギャラリー風に並べてみたいです。
それは良いですね。作品をギャラリーのように並べたり、
画像を横並びにして比較するときにも便利です。
今回はこのように挿入する画像の並べ方をみていきましょう
この記事ではテーマ『Luxeritas』を使用しています。
ギャラリーを挿入する
『+』ブロックの追加からから『ギャラリー』をクリックします。
するとギャラリーを新規でアップロードするか（自分のPCのフォルダーから選択する）、すでにメディアライブラリーにアップロードしてある画像から選択するか選ぶことができます。
アップロードから画像が保存されているホルダーを選んで画像を選択してみましょう。
アップロードを選択し画像が保存してあるフォルダーから画像を選択します
さらに続けてアップロードできます
３枚選んでみました。
この３枚は違う大きさですがギャラリーできちんと同じ大きさに表示されています。
（デフォルトでは画像の切り抜きがONだからです。）
アップロードから画像を追加したり矢印から画像の配置を入れ替えたり、鉛筆マークで編集したり、バツマークで削除することも簡単にできます。
ブロックの設定
カラムでは何列にするか設定できます。上の画像は3カラムで3列、最初のブロックでは2カラムで2列にしました。
《画像の切り抜き》
オフにすると元の画像の比率が保持されたまま表示されます。複数の違う大きさの画像を選択するとばらついて見えるかもしれません。
オンにすると上のギャラリーのように違う大きさも画像サイズのサイズで表示されます。
《リンク先》
画像をクリックしたときのリンク先を選べるようになっています。
- メディアファイル
画像を表示します - 添付ファイルのページ
画像ファイルのページが開きます。
《画像サイズ》
画像をアップロードした時に自動生成される画像の中から選択した画像サイズで表示されます。
その時の画像の大きさによって表示されるものが多少違います。
表示される画像をみながら選択するのが良いかなと思います。
サムネイルのサイズはデフォルトでは150Px ×150Px になっています。
また画像にリンクを設定して特定のページを開くことができます
キャプションを選択すると出てくるリンクマークをクリックします。投稿ページのタイトルを入力してリンクさせたいページを選択します。
するとこのように画像から他の投稿ページを開くことができるリンクを設定できました。
関連記事を紹介するときなどに便利ですね。
他の画像ブロックと何が違うの？
ギャラリー以外にも画像を挿入できるブロックはいくつかあります。
画像ブロック
画像ブロックは枠を付けて丸く切り抜いたり、フォトフレームをつけたりスタイルを変えることができます。
画像を挿入するには、アップロード（パソコンから画像を選択）、メディアギャラリーから選択の他に「URLから挿入」ではインターネット上ですでに公開されている画像を使用できます。
※利用規約をよく読んでお使いください。
横並びにすることはできないので、横に並べたいときはカラムブロックと組み合わせて使うと良いと思いでしょう。
カバー
カバーは画像の上に文字を重ねることができます。
このブログのタイトル下の画像もカバーで作っています。
文字の位置なども変えられるのでとても便利です。
メディアとテキスト
メディアとテキストは画像と文字を横並びに表示できます。
カラムブロックで横並び
次にカラムブロックを挿入して、画像を横並びにしてみましょう。
『+』からカラムを選択します。
カラムを選択できるので今回は2カラムを選択します。
今回は50/50の2カラムを選択します。
するとこのようなものが出ます。
そしてそれぞれ違うブロックを挿入できます。
今回は画像ブロックを入れてみます。
Before
こんな感じで、ビフォアアフターみたいに並べることもできますね。
このように、画像を挿入するだけでもかなり自由にカスタマイズできるので、自分好みのページを作ってみてください。
同じカテゴリの記事一覧へ
https://www.beginavi.net/sale/
