[実践編 Level 21.] WordPress(ワードプレス)|ページビルダープラグイン「Elementor」の使い方⑤ トップページをスマホ&タブレット仕様に対応しよう!
現段階では、トップページはあくまでPC用にカスタマイズを進めてきた。このままでは、タブレットやスマホなど、画面の幅が小さくなった際にレイアウトが崩れてしまったり上手くフィットしないので、そこを調整していこう。このレベルでは、Elementorを使って各ディバイスに適したレイアウト設定を攻略していこう。
[初心者冒険者のワードプレス攻略サイト] WordPressを攻略しよう! とにかくホームページを作りたいけど、わからない初心者のために!! ウェブ知識ゼロだったデザイナーによる、レベル1から始めるWordPress攻略サイト。
現段階では、トップページはあくまでPC用にカスタマイズを進めてきた。このままでは、タブレットやスマホなど、画面の幅が小さくなった際にレイアウトが崩れてしまったり上手くフィットしないので、そこを調整していこう。このレベルでは、Elementorを使って各ディバイスに適したレイアウト設定を攻略していこう。
トップページで欠かせないのがフッターの設定だ。現状では、メニュー表記やコピーライトの部分などがデフォルトのままなので、きちんと設定をしておこう。このレベルでは、フッターのカスタマイズ設定を攻略していく。
ップページのコンテンツが埋まってきたところで、ここでさらにワンランク上のレイアウト調整をやってみよう。ここでは、カスタマイザーやElementorでは調整できない部分をcss(スタイルシート)を使ってカスタマイズする方法を攻略していく。
WordPress(ワードプレス)簡単にトップページに画像ギャラリーを設置することが可能だ。ギャラリーの設置方法はいくつかあるが、やはりここでもプラグインを使うのが最善策だ。このレベルでは、オススメのギャラリープラグイン「Image Photo Gallery Final Tiles Grid(通称:Final Tiles)」を使って、ギャラリーの設置方法を攻略していく。
トップページにバナーなどの画像をスライドで表示したい時も多いと思う。プラグインを使わない方法もあるが、コーディングの技術が必要なのでここはサクッとプラグインで解決しよう。このレベルでは、トップページに簡単に画像スライダーを設置できるプラグインを使って攻略を進めていきたいと思う。
トップページに欠かせないのは、お知らせなどのNewsコンテンツだろう。お知らせがあることによって、サイトの更新状況をユーザーに伝えることができるし、見せ方によっては経営者ブログなどを一覧にして表示させることも可能だ。このレベルでは、WordPressの「投稿ページ」とそれを一覧表示させるプラグインを使って攻略を進めていきたいと思う。
前回のレベルでは、「Elementor」を使った「画像の配置」について攻略を進めていった。このレベルでは引き続き、ページビルダープラグイン「Elementor」を使って、「テキストの配置」について攻略していこう。
WordPress(ワードプレス)でページを作成していく上で、いくつか方法があるが、ここではページビルダー系のプラグインを使ってサイトを構築していこう。ページビルダープラグインを使えば、簡単に高品質なサイトが構築可能だ。コーディングなどの難しい知識も必要ないぞ。このレベルでは、ページビルダープラグインの中でもオススメの「Elementor」の使い方を攻略していく。
カスタマイザーでレイアウトとカラー設定を変更したら、さらにカスタマイズを進めていこう。現状では、トップページに2つの記事(デフォルトで入っている記事)が投稿されてしまっているので、これを変更して、空のページが表示されるように設定を変える必要がある。このレベルでは、トップページの表示設定を攻略していく。
「子テーマ」を作成したら、次はテーマのセットアップから始めよう。初期状態ではロゴも何も無いサイトが表示されているはずなので、インストールした「Sydney(シドニー)」を参考に、カスタマイズ方法を攻略していこう。なお、ここではあくまで一般的な1カラムのサイトを作る前提で進めていく。まずは、レイアウトとカラー設定を攻略しよう。