[実践編 Level 21.] WordPress(ワードプレス)|ページビルダープラグイン「Elementor」の使い方⑤ トップページをスマホ&タブレット仕様に対応しよう!

現段階では、トップページはあくまでPC用にカスタマイズを進めてきた。

このままでは、タブレットやスマホなど、画面の幅が小さくなった際にレイアウトが崩れてしまったり上手くフィットしないので、そこを調整していこう。

このレベルでは、Elementorを使って各ディバイスに適したレイアウト設定を攻略していこう。

Sydneyのテーマを使ったデモサイトを公開するので、参考にしてほしい:

https://www.dammy.wordpress-quest.com/

※サイトの内容は攻略が進むごとに随時変わるのでご了承願いたい。
基本的にデモサイトのカスマイズは、
当サイトで記載してある方法以外は使っていない。

Elementorを使ってディバイス別のレイアウト調整をやってみよう

Elementorでは、簡単にディバイスを切り替える機能が備わっている。

実際に、ディバイスを切り替えてみよう。

ディバイスを切り替えるには、Elementorのメニューバーの一番下にある、モニターのアイコンから選択する。
【タブレット画面】
【スマホ画面】

Sydneyのテーマはレスポンシブ対応なので、画面の幅に合わせてコンテンツが自動で可変するようになっている。

レスポンシブとは、見る側のディバイスのサイズに合わせて自動で表示を調整してくれるWebデザインのことを指している。
サイトをレスポンシブ対応にすることによって、ディバイスごとに新規でデザインを構築する必要がなく、柔軟なレイアウト作業が可能。

ディバイスに合わせた余白を調整をしよう

レスポンシブはとても便利な仕様だが、クリアしなければならない問題も存在する。

一番の課題は、コンテンツが小さくなることによって生じる余白などの無駄な空きや、コンテンツ同士が詰まりすぎてしまうなどのレイアウト問題だろう。

先ずは、タブレットのレイアウトから見ていこう。

タブレット画面の調整

左の画像はディバイス表示をタブレットに切り替えたものだ。
テキストが左右目一杯にきてしまっているのが見て取れる。
カラム同士の余白を調整するにはマージンの空きを調整しよう。
先ずは中央のカラムを選択して、「詳細」タブに切り替える。

マージンのリンクを外した状態で「右=20」、「左=20」で空きを調整。

続いて、左のカラムを選択して、「詳細」タブからマージンを「右=20」、「左=30」で空きを調整。
最後に、右のカラムを選択して、「詳細」タブからマージンを「右=30」、「左=20」で空きを調整。
これで左右に余白ができた。

スマホ画面の調整

続いて、スマホでも同じ箇所のレイアウトを調整してみよう。

モニター表示の切り替えから、「モバイル」を選択する。

余白の設定はタブレットと一緒のやり方でマージンの空きを調整すればOKだ。

モバイル画面に切り替えると、カラムが自動で1列になって3行のカラムへと切り替わる。

先ずは中央のカラムを選択して、「詳細」タブに切り替える。

マージンのリンクを外した状態で「上=30」、「右=40」、「左=40」で空きを調整。

続いて、上のカラムを選択して、「詳細」タブからマージンを「右=40」、「左=40」で空きを調整。
最後に、下のカラムを選択して、「詳細」タブからマージンを「上=30」、「右=40」、「左=40」で空きを調整。
細かいところだが、文字が小さくなったことによって、見出しと本文の空きが広がり過ぎたので、空きを調整したいと思う。
カラムを選択して、「レイアウト」タブに切り替える。

下の「ウィジェットスペース」の数値を変えるとそれに連動して行間の空きも変わるはずだ。

デフォルトでは「20」になっているので、スマホではここを「15」に変更してみる。

余白が整って見た目がスッキリしたかと思う。

お知らせ・スライド・ギャラリーの空きを調整しよう

お知らせ・スライド・ギャラリーに関しては同じ方法で余白の調整が可能だ。

ここでは「お知らせ」の箇所を例に余白を調整してみよう。

タブレットの表示に切り替えると、左右の空きが狭いので広げてみよう。
お知らせのカラムを選択して、「詳細」タブに切り替える。

パディングのリンクを外した状態で、「右=30」、「左=30」で空きを調整。

これで「お知らせ」の左右の余白が広がった。
もし上の空きを調整したい場合はパディングの「上」に数値を入れて調整しよう。
スライダーは左右の空きを「0」にして画面に対して全幅にしてみた。

上の空きは「30」に設定。

ギャラリーの空きは「上=30」、「右=30」、「左=30」に設定。

ギャラリーに使っている「Final Tiles Gallery」は、パディングやマージンをいじっても右の画面ですぐに反映されない場合がある。その時は、数値を打ち込んだあと、一旦ディバイス表示を切り替えて戻すと反映するので試してほしい。
スマホでの設定はタブレットと全く同じなのでここでは割愛させてもらう。

以上でディバイスごとのレイアウト調整が完了した。

 ディバイスごとの調整はElementorのディバイス表示を切り替えよう
 複数のカラムはマージンで空きを調整しよう
 ショートコードで配置しているプラグインの空き調整はパディングで調整しよう
今回はデモサイトで配置しているコンテンツのみ空きの調整をしたが、同じやり方で他のコンテンツも調整が可能なので試してみてほしい。
では、冒険者諸君、GOOD QUEST !!