［実践編 Level 21.］ WordPress（ワードプレス）｜ページビルダープラグイン「Elementor」の使い方⑤ トップページをスマホ＆タブレット仕様に対応しよう!

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

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

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

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

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

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

ディバイスを切り替えるには、Elementorのメニューバーの一番下にある、モニターのアイコンから選択する。

【タブレット画面】

【スマホ画面】

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

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

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

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

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

タブレット画面の調整

左の画像はディバイス表示をタブレットに切り替えたものだ。
テキストが左右目一杯にきてしまっているのが見て取れる。

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

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

続いて、左のカラムを選択して、「詳細」タブからマージンを「右＝20」、「左＝30」で空きを調整。

最後に、右のカラムを選択して、「詳細」タブからマージンを「右＝30」、「左＝20」で空きを調整。

これで左右に余白ができた。

スマホ画面の調整

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

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

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

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

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

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

続いて、上のカラムを選択して、「詳細」タブからマージンを「右＝40」、「左＝40」で空きを調整。

最後に、下のカラムを選択して、「詳細」タブからマージンを「上＝30」、「右＝40」、「左＝40」で空きを調整。

細かいところだが、文字が小さくなったことによって、見出しと本文の空きが広がり過ぎたので、空きを調整したいと思う。

カラムを選択して、「レイアウト」タブに切り替える。

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

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

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

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

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

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

タブレットの表示に切り替えると、左右の空きが狭いので広げてみよう。

お知らせのカラムを選択して、「詳細」タブに切り替える。

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

スライダーは左右の空きを「0」にして画面に対して全幅にしてみた。

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

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

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