【エレメンター講座 第12回】
Webページのレスポンシブ設定をしましょう
【ワードプレス】
この記事は、動画の音声を書き起こしたものです。
誰でも簡単に無料でオリジナルホームページが作れちゃう、エレメンター講座の第12回目です。
今回は、前回まで編集して完成したトップページ、こちら前回の動画でフッターまで完成しました。
こちらのトップページの、今回は全てのデバイスで最適表示されるようなレスポンシブの設定をしていきます。
パソコン画面、タブレット、スマホ、全ての画面で適切な表示がされるように、レスポンシブ設定をしていきます。
そしてレスポンシブを設定して全ての編集が完了しますけれども、そうしたらこちらのページをテンプレートとして当社のホームページからダウンロードできるように、概要欄にダウンロードページのURLを貼っておきます。
そちらのほうも合わせてご利用ください。
それではレスポンシブ設定の前に、各ウィジェットの動きをもうちょっと付けていこうと思います。
下のコーナーは動きをつけたので他の部分、まずこちらのポラロイド写真。
こちらの動きを、ちょっと付けてみます。
こちらの画像編集から高度な設定、そしてモーション効果をクリックします。
そして開始アニメーション、これを、これですね、フェードイン・ライト。
こちらも、二つ目の写真も高度な設定からモーション効果、フェードイン・ライト。
これで、ちょっと「ゆっくり」。
三つ目、画像編集、高度な設定、モーション効果、これを「ゆっくり」にして、スタートを「300」にしてみます。
そしてこちらがタイトル、高度な設定、モーション効果、これを上に上がってくる、こんな感じで「ゆっくり」にしてみましょう。
ここらへんはタイトルだけ、ちょっと動きをつけてみます。
こちらはフェードイン、で「ゆっくり」。
このタイトルも高度な設定、モーション効果から「フェードイン」で「ゆっくり」に設定。
こちらのタイトルも同じです。
そしてここは、動画で動きをつけました。
これでとりあえず一通り動きをつけたので、ちょっとプレビュー見てみます。
こんな感じの動きですね、タイトルは上から。
ここは浮き上がってくる感じでタイトルが出ます。
さあ、とりあえずこんな感じで、動きをつけるのはいいでしょうか。
さあそれではレスポンシブの設定に移ります。
こちらのデスクトップのマーク、これをクリックすると「デスクトップ」、「タブレット」、「モバイル」と出るので、タブレットを。
これで編集画面がタブレットのサイズになります。
まずタイトルから、これがちょっと２行になっちゃってます。
これを、じゃあどうに変えるか。
例えばこちらのカラムの割合を少なくしてやって、ここを広げることもできますけれども。
今回はちょっとこの文字を小さくするだけで、対応できるかな。
さあ、こんな感じでいいですかね。
そして画像がかなり広くなっちゃってます、こちら、こんな感じでそろえます。
こちらのフォントはいい、なんとかタブレットはこちらのレイアウトが保たれてます。
ここのタイトルが大きいですね。
こうやって見ながら、大きさなどを微調整していきます。
こちらのほうも、すべてテキストを揃えていきます。
はい、テキストの大きさを時短で設定して完了しました、こんな感じです。
そしてこちらの方も、タイトルをちょっと小さくしました。
こちらの画像の高さが、こちらのスペーサーをクリックすると、スペーサーの編集から高さが350、スペーサーの高さでこれを設定していたので、これは今回「350」で全部合わせてみました。
そしてこちらは、やや下を開けて、一番下のフッターは何も変更することなく、文字の大きさ大丈夫でしたね。
さあこれで、タブレットの編集は終わりです。
もう一度レスポンシブでモバイル、スマホの設定に向かいます。
スマホ画面の設定です。
それで、こちらスマホ画面でこれがヘッダーですね。
ヘッダーの３段、これはちょっとかっこ悪いですね。
それでよくあるハンバーガー、スマホのメニューがハンバーガー、タップするとメニューがドロップダウンで出てくるという、有料版でそういうウィジェットがあるんですけれども、無料版でやるために、今回ちょっと裏ワザを使おうかなと思っています。
ウィジェットのメニューから、この中から「切り替え」、これをドラッグ＆ドロップでこちらに入れます。
この「切り替え」というのが「よくある質問」ですね、よくある質問の「質問」と「回答」という感じで使うんですけれども、これを今回ちょっとハンバーガーメニューに変えちゃおうかなと思います。
一つ消してこちらを、これが本来質問の部分、タイトル、これを感じの「三」、これをハンバーガーに見立てて、こちらが回答部分ですけれども、こちらをコピペしちゃいます。
さあこんな感じですね、これでハンバーガー、これは本当にあり合わせでの裏ワザなんですけれども。
さあこれで、とりあえず暫定的なハンバーガーメニュー、そしてこれはいらないですから、いらない場合にじゃあどうするのか。
これは本来、タブレットとPCでは出しておきたいウィジェットです。
そしてこちらのウィジェットの高度な設定、そして下のほうに「レスポンシブ」ってあります。
レスポンシブを開くと、デスクトップ、タブレット、モバイルで、隠したいものを選べます。
こちらはモバイルでいらなくなるので、「モバイルで隠す」。
そしてこちらのウィジェット、これはモバイルだけで必要なので、同じ「高度な設定」から「レスポンシブ」、タブレットとデスクトップで隠しておきます。
これでこちらの暫定的なハンバーガーメニューが、モバイルだけで表示されるようになります。
そしてこれが、このカラム、これを70％くらい、そしてこれを30％。
それで、このタイトルの横にこれが入ります。
そしてこれはお好みで、スマホで出したければこのままでいいですし、スマホで隠したければ先ほどの、高度な設定、レスポンシブから。
今回はこれは出しておいていいでしょう、２行だったらそれほど変じゃないので。
こんな感じで設定しておきます。
そしてここから下はテキストの大きさだけですから、また時短のために、ちょっと編集しちゃいます。
さあこれでテキストの大きさを設定完了しました。
こんな感じです。
これがスマホの画面です、一通りこんな感じでいいですかね。
事業内容、そしてこちらフッターです。
さあこれで、このページは全て完了しましたので、こちら更新で完了しておきます。
こちらで、プレビュー見てみましょう。
こんな感じの動きになってます。
さあ、これで完了しました。
今回こちらのページを、皆さんがダウンロードして使えるようにテンプレートを、当社のページからダウンロードできるようにしておきます。
そちらのURLを概要欄に貼っておきます。
それでは今回は、こちらで終わりとなります。
次回の動画では、もう一つページを作っておいた「お問い合わせページ」、そちらの方の設定をしていこうと思います。
それではこれで終わりとなります、ありがとうございました。
