【第5章】TOPページ制作実践①
TOP画像の設定
・WordPressのダッシュボードの左サイドバーにある『固定ページ』から固定ページ一覧の画面にうつります。固定ページ一覧の中から『TOPページ』を選択してクリックしましょう。TOPページをクリックしたら、タイトルやアイキャッチ画像を設定した画面が出てきます。画面左上にある『Elementorで編集』の青いボタンからTOPページの編集画面に入ります。
・編集画面に入ったら、左に『固定ページ 設定』と表示されているパネルがあります。この左パネルから各種設定をおこなっていきます。パネルの一番下にアイコンが５つ並んでいる黒いバーがあるので、その中から一番左の『
(歯車マーク)』の設定ボタンをクリックしましょう。すると『一般設定』が表示されます。一般設定の一番下に『固定ページレイアウト』の項目があり、最初は『デフォルト』になっていますが、枠線をクリックすると設定を変更できるので『Elementor Full Width』にしましょう。
『』と同じ黒いバーの一番右にピンク色のボタン『更新』があるのでクリックしておきましょう。動画内では頻繁にクリックしていませんが、操作に慣れないうちは定期的にクリックして編集内容を更新しておくことを推奨します。
※ここからページのデザイン・設定を行っていきます。操作を行っている途中で間違えたり
やり直したい場合は、パソコンのキーボードの【Ctrl】＋【Z】で前に戻ることができます。【Ctrl】＋【Z】で戻らない場合は、左パネルの枠線の中央辺りにある『<』でパネルを非表示にしてから【Ctrl】＋【Z】で戻る場合があります。
・次は、ページのトップを設定していきます。ヘッダーの下にあるグレーの点線のボックスの中に『＋』のボタンがあります。カーソルを＋に持っていくと『新しいセクションの追加』と出てきます。セクションを追加したいので『＋』をクリックします。
※セクションとは・・・ページの大きな区切り(エリア)を作るのものです。例えば、『トップ画像のエリア』『サービス紹介のエリア』など、ページ全体をブロック分けしたものをセクションと言います。
・『＋』をクリックすると、『SELECT YOUR STRUCTURE』の文字の下にセクションのレイアウトが出てきます。使用したいセクションのレイアウトを選択することができます。今回は上段の一番左、区切りの入っていないセクションを使用します。このセクションレイアウトが基本になります。別のレイアウトを使用する場合はその都度指示を入れます。
・セクションのレイアウトを選択すると、ヘッダーの下にセクションが入ります。セクションがピンクの枠で囲われている時は、そのセクションが選択(編集可能)状態にあります。左パネルの上部に『セクションを編集』と書かれています。その下に『レイアウト』『スタイル』『高度な設定』の３つの項目があります。まずは、『レイアウト』を選択します。レイアウトの設定画面の一番上に『コンテンツ幅』という項目があるので選択ボックスから『全幅』を選びましょう。
・セクションのレイアウト設定を『全幅』にできたら、選択中のセクションの中(ピンク枠内)に、グレーの点線枠があります。その点線枠のエリアは、セクション内の『カラム』と言います。カラムの中にある『＋』をクリックすると、左パネルにウィジェットの一覧が出てきます。『基本』という項目の中から『スペーサー』を選択し、ピンク枠のセクションの中へドラッグ＆ドロップしましょう。するとスペーサーが入ります。
・スペーサーが入れられたら、スペーサーの幅を調整します。左パネルにスペーサの編集画面が出ているので、『コンテンツ』のタブを選択します。『スペース』という項目があるので、そこで調節します。白い丸を左右に動かしても、入力フォームに数字を入れても幅が変更できます。今回は、『165』と入力します。
※カラムとは・・・セクションの中を分ける仕切りです。カラムを使えば、セクションの中を複数個に区切ることができます。
※ウィジェットとは・・・カラムの中に画像やテキストなど実際の内容を入れるパーツです。
※スペーサーとは・・・ページの中で、上下に空白（余白）を作りたいときに使います。たとえば、見出しと画像の間にちょっと空間を入れたいときに「スペーサー」をドラッグ＆ドロップで挿入し、空白の高さを調整することができます。
・幅が調節できたら、右画面の今入れたスペーサーにカーソルを合わせます。スペーサーの上で右クリックしたらコンテキストメニューが表示されるのでその中から上から2番目にある『複製』をクリックしてみましょう。同じスペーサがもう一つ現れます。
※複製とは・・・『複製』は、選んだウィジェットとまったく同じものを、その場にもう一つ作る機能です。たとえば、スペーサーを複製すると、すぐ下に同じ設定を保持したスペーサーが追加されます。同じデザインや内容のパーツをすばやく増やしたいときに便利で、作業効率を上げてくれます。
・スペーサーを複製できたら、下側(複製した方)のスペーサーを選択します。スペーサの枠が濃いピンクになっていたら選択できている状態です。先程のスペーサーの編集と同じように『コンテンツ』タブから『スペース』を設定します。今回は『180』と入力しましょう。
・では、次はトップ画像を挿入します。スペーサーが入っているセクション枠の上部中央に『＋』『：：：』『×』のマークが付いた台形のタブがあるのでその中から『：：：』を選択しましょう。すると左パネルにセクションの編集画面が出てきます。
・『レイアウト』『スタイル』『高度な設定』の中から『スタイル』をクリックしましょう。『スタイル』のタブを選択すると編集項目の一番上に『背景』が出てきます。『普通』と『マウスオーバー』がありますが、『普通』を選択します。
・その下『Background Type』の文字の右側に『クラシック』『グラデーション』『動画』『スライドショー』４つのアイコンがあります。今回は一番左の『スライドショー』アイコンを選択します。スライドショーを選択すると、アイコンの下に画像を追加する枠が表示されます。＋のマークが入った濃いグレーの正方形があるのでそこをクリックして画像を追加します。
・『＋』をクリックするとメディアライブラリが開きます。『ギャラリーを作成』のタイトル下にある『ファイルをアップロード』を選択し、TOP画像に使いたい画像を今回は合計2枚の画像をアップロードしていきます。まずは1枚目の画像をアップロードします。アップロードしてチェックできたら右下の青ボタン『ギャラリーを作成』をクリックします。するとギャラリー編集画面にうつります。現在、チェックした画像が1枚表示されていると思います。左側に『ギャラリーを追加』という項目があるので、そこをクリックします。するとメディアライブラリが再度出てくるので先程と同じように2枚目の画像をアップロードして選択します。チェックできたら右下の青いボタン『ギャラリーに追加』をクリックしましょう。
・ギャラリーの編集画面に2枚画像が表示されていると思います。画像をドラッグ＆ドロップで自由に表示する順番を変えることができます。順番が決まったら右下『ギャラリーを挿入』をクリックします。
・『ギャラリーの挿入』をクリックするとトップページの編集画面に戻るので、左パネルからスライドショーの設定をしていきます。編集する項目は『無限ループ』から下の項目です。※設定内容は、以下の通りです。
無限ループ・・・はい
期間(ms)・・・5000
トランジション・・・Fade
トランジション所要時間(ms)・・・500
背景サイズ・・・デフォルト
背景位置・・・デフォルト
画像遅延ロード・・・いいえ
Ken Burnsエフェクト・・・はい
方向・・・カテゴリーのままで。選択しなくて良いです。
・トップ画像が設定できたら、スペーサーとスペーサーの間にサイトロゴを入れます。まずは、セクションを追加しましょう。トップ画像のセクションの下にあるグレーの点線枠の中から『＋』を選択し、次の表示画面では1段目の一番左の区切り無しの長方形を選択します。
・新しいセクションが出せたら、セクション内の『＋』をクリックしてウィジェットを挿入します。今回は『基本』の項目から『画像』のウィジェットを選択します。ドラッグ＆ドロップする場所は、トップ画像のセクション内にあるスペーサーとスペーサの間です。画像マークがトップ画像上(スペーサーとスペーサーの間)に出てきたらOKです。
・左のパネルに画像の編集画面が表示されます。『コンテンツ』タブを選択し、『画像の選択』の項目から画像を挿入します。『画像の選択』の下にある画像マーク(山と太陽を模したグレースケールの画像)にカーソルを合わせます。すると『画像の選択』と出るのでクリックします。クリックするとメディアライブラリが開きます。サイトロゴを設定したときに入れたロゴマークを使用してもいいし、新しくアップロードしても良いです。入れたいロゴマークを選んでチェックしたら(青枠・青いチェックマークが出てたらOK)右下の青ボタン『選択』をクリックします。すると、トップ画像の上にロゴが入ります。
・ロゴマークのサイズなどは左のパネルから編集します。パネルの『スタイル』タブを選んでロゴマークを設定していきます。『配置』では、表示位置を決めます。真ん中のアイコン『中央』を選択しましょう。その下『幅』では、サイズを調整できます。『40』と入力しましょう。左パネルの右側、中央辺りにある『<』マークのついたタブをクリックすると左サイドバーが消えて全画面表示で簡単なレビューが見られます。レビューを確認しながら幅などを調整するとイメージしやすいと思います。調整できたらもう一度『<』タブをクリックして左パネルを表示させて右下にあるピンクのボタン『更新』をクリックしましょう。
