サイト構築・運営

難しいことは知らなくてもウェブページで画像と文章をいい感じに隣同士に並べる簡単な方法

この記事で解決出来る課題は、

  • ウェブページのここには画像を置いてその隣には画像の説明文を掲載したい
  • ウェブページのここには扱っている商品画像を3つ横に並べたい
  • ウェブページの左に表をイメージ図を配置してその隣に文章を置きたい

サービス案内のページでも、ブログの記事でもウェブページを作っていく途中で、ここは1列じゃなくて、2列あるいは、3列で表現したいといった時がある。

ウェブサイト(ホームページ)を自力で作っていく過程で最初にぶつかる“壁”がそんな、文章や画像、表などをウェブページ上で2列、3列で表現することだろう。

こういった“壁”は、“カラム”を理解することで簡単に解決する。

“カラム”を理解すると、テキストと画像をいい感じに横並びに出来る

『カラム』(column)というのは、表でいうところの行と列のうち、“列”のことを指す。

ウェブページで段落や画像などのブロックを追加していくと、上から順番にコンテンツが積み上がっていき、縦に長いウェブページが出来上がる。これは、ウェブページの特性で、縦に積み上がっていくコンテンツを横に並べて表示させたりすることを、レイアウト・デザインを施すというわけだ。

そのレイアウト・デザインの一つの要素に『カラム』がある。

『カラム』を設定することで、左側に文章、右側に画像といった使い方が出来るのだ。

カラムを設定していない時と設定している時

そして、WordPressワードプレスの新しい編集技術のGutenbergグーテンベルクを使えば、その『カラム』を設定するレイアウト・デザインが驚くほど簡単に出来てしまうのだ。

ここからは、そんなGutenbergグーテンベルクを使ったレイアウト・デザインの方法について簡単にお伝えしていこう。

1WordPressワードプレスでカラムを設定するということ

最初にWordPressワードプレスGutenbergグーテンベルクを使って、『カラム』を設定することで、テキストや画像を横並びにするようなレイアウトが、驚くほど簡単に出来てしまうその理由を少し詳しく説明しておこう。

前述した通り、ウェブサイト(ホームページ)を制作する時にウェブページ上に配置した文章や画像は縦一列に並ぶという特性がある。

ウェブページでは配置した画像や文章は縦一列に並ぶ

なので、文章と画像を横に並べたい時は、このウェブページの特性に逆らって設定してくというわけだ。

それが、WordPressワードプレスGutenbergグーテンベルクの登場前であれば、C S Sスタイルシートという専門の技術を使って、文章と画像を横並びにしてきたが、これを専門家でない人がやろうとすると結構大変だ。

そこで、Gutenbergグーテンベルクという編集機能を使うことで、ブロックを横並びに配置して、その中に文章や画像を置いていくという発想で、誰でも文章と画像を横並びに出来るようになったというわけ。

では、Gutenbergグーテンベルクを使ってどのように操作すれば、文章と画像がいい感じで横並びになるのか?図を使って、ここから解説していく。

2Gutenbergグーテンベルクでカラムブロックを追加、ページをつくる

では、ここから“カラムブロック”を追加して、横並びのコンテンツを作っていこう。

ページ内に新しく『+』ボタンから新たにブロックを追加して、“デザイン”の項目から『カラム』を選択(クリック)する。

Gutenbergでカラムブロックを追加してページをつくる

32カラムの設定

今回は、“2カラムの設定”をする。

『+』ボタンから新たにブロックを追加して、“デザイン”の項目から『カラム』を選択すると、幾つかの『カラム』のパターンが表示されるので、今回は『50/50』の2カラムを選択。

ちなみに、この『50/50』というのは、『50%・50%』ということで、横幅を50パーセントずつ、つまり2分割するという意味になる。

2カラムの設定

42カラムのブロックの挿入

ページ内に2カラムのブロックが出来た。このブロックの中にコンテンツを入れていく。まずは、画面向かって左側のブロックの『+』マークを選択して、

2カラムのブロックの挿入

5『メディア』から『画像』を選択

“案内のパネル”を開き、『メディア』から『画像』を選択。

『メディア』から『画像』を選択

6画像のブロックに画像を追加

画像のブロックが追加されるので、画像を追加。今回はURLから画像を追加した。

画像のブロックに画像を追加

7ページ内に画像が横並びになった

同様に、画面向かって右側のブロックにも画像ブロックを追加して、画像を配置。

これで、画像が横並びになった。

ページ内に画像が横並びになった

ちなみに

画像にキャプション(画像の下に入れる説明)やaltタグ(画像が表示されないウェブページで画像の説明をするもの)を入れる場合は、挿入した画像をクリックして後からでも編集が出来る。

8新たなブロックを追加して3カラムに設定

2カラムのブロックに画像を2枚横並びに並べたブロックの下に新たにブロックを追加。

今度は、3カラムにしてみる。

新たなブロックを追加して3カラムに設定

93カラムのレイアウト

3カラムのブロックが並んだので、画面向かって左側のブロックに画像を配置。

3カラムのレイアウト

10画像+画像+テーブル

真ん中のブロックにも画像を配置して、画面向かって右側のブロックには、『テーブル』を配置する。

『+』マークをクリックして、“案内のパネル”を開き『テキスト』から『テーブル』を選択して、テーブルのカラム数と行数を決めて、『表を作成』をクリック。

画像+画像+テーブル

11テーブルの調整

テーブル(表)の行数が少ない場合は、上部に寄ってしまうので、中心に移動して配置のバランスを取っておく。

テーブルの調整

これで、3カラムに画像・画像・表といったレイアウトが完成した。

12大きさの違う3カラムを設定する

次は、その下に真ん中が大きめの3カラムを配置してみよう。

ちなみに、作成したテーブルの下に“キャプションを追加”という表記が出るが、これはテーブルの説明になる。入れてもいいし、入れなくても問題ない。入れなくても、実際に公開されるページにこの“キャプションを追加”という文言が表示されることは無い。

大きさの違う3カラムを設定する

13真ん中の写真だけ大きく表示

同じアスペクト比(縦横比)の画像だが、真ん中のカラムが大きいので、配置した画像も大きくなる。

真ん中の写真だけ大きく表示

14画像のサイズ調整も感覚的に出来る

画像の端をドラッグしながら、サイズを調整することも可能だ。

画像のサイズ調整も感覚的に出来る

15大きさの違う2カラムを設定する

続いて、その下に新たにブロックをつくり、カラムブロックを配置していく。

大きさの違う2カラムを設定する

16向かって左側が大きい66/33のカラム設定

ここには2カラムで、画面向かって左側のブロックを大きく表示する66/33のカラムにする。66/33のカラムというのは、画面向かって左側のブロックに66%のスペースを残りを33%のスペースをあてがうという意味だ。

向かって左側が大きい66/33のカラム設定

17『見出し』ブロックを配置

画面向かって左側の66%のブロックには、『見出し』ブロックを配置。

『見出し』ブロックを配置

18見出しを入力

配置した『見出し』ブロックに見出しを入力。

見出しを入力

19見出しの下には『段落』を

『見出し』の下には、『段落』ブロックを配置して、本文を入力。

見出しの下には『段落』を

20見出しと本文の隣には画像を配置

見出しと本文の隣のブロックには画像を配置したいので、『+』マークをクリックして画像を配置していく。

見出しと本文の隣には画像を配置

21公開して保存

『画像』を配置すると、ブログ記事やニュースサイトなんかでよく見かけるレイアウトになった。

画面向かって右上の『公開』をクリックして、一般公開して編集内容を保存しておこう。

公開して保存

22制作したウェブページを実際に見てみる

ここで、編集画面を出て、公開されている画面をチェックしてみよう。

ページが意図した通りのレイアウトになっていればOKだ。

よく見ると、サイト全体のレイアウトは2カラムに設定されている。これもよく見かけるレイアウトだが、メインとなるコンテンツを表示するスペースが少し狭く感じるので、

制作したウェブページを実際に見てみる

23サイトそのもののカラムを変更

今回は、このサイトそのもののレイアウトを2カラムから1カラムに変更してみる。

使っているデザインテーマ(WordPressの基礎となるサイトの型のようなもの)によって、ここの操作は様々だが、編集画面に戻って、サイドバーに『カラムの変更』が出来るような項目があれば、そこで『1カラムに変更する』設定をすることでサイトそのもののカラム数を変更することも出来る。

サイトそのもののカラムを変更

24サイト全体を1カラムに

編集画面を出て、一般公開の画面を見てみると、サイト全体が1カラムになった。

サイト全体を1カラムに

2566/33の2カラムで作成したブロックも表示

66/33の2カラムで作成したブロックもちゃんと表示されている。

66/33の2カラムで作成したブロックも表示

26すべてのブロックが意図した通りに表示

50/50の2カラムも33/33/33の3カラムも、真ん中が大きい3カラムも意図した通りの表示になっている。

wordpress

以上が、WordPressワードプレスのブロックエディターである、Gutenbergグーテンベルクを使ってウェブページのカラムを組み上げていくもっとも基本的な手順になる。

テクノロジーの進歩によって、これまで専門知識や専門技術が無ければ出来なかったことが出来るようになった。

とは、言っても誰でも簡単に使いこなせるようになるには、相応の知識が無いとなかなか先に進まない。

この記事がそんな知識の助けになってくれるように…

-サイト構築・運営
-, , , , ,