WordPressのテーマビルダープラグイン「Elementor」のファンブログ

【連載】 Elementorでホームページを作ろう !#2

Elementorでホームページを作ろう !とは?

Elementorでホームページを作ろう シリーズでは、ゼロからホームページ完成までの基本の流れを紹介していく連載企画です!順番に記事をご覧頂き、作業して頂くだけホームページが出来てしまう!(・・・を目標に)皆さんと一緒に実際にホームページを作って行きたいと思います。途中寄り道もあるかもしれませんが、気長にお付き合い頂けると幸いです。

バックナンバー

【連載】Elementorでホームページを作ろう!#1

今日はヒーローを作ろう!

ホームページの顔とも言えるヒーロー部分(別名:ヒーローヘッダー)一番最初に表示される部分を作って行きましょう!前回と同じ手順で、固定ページ>トップページを選択>「Elementorで編集」で画面を開きます。
elementor_monitor3

ヒーロー部分のスペース確保

1)前回同様にセクション「+」で追加し、構成は1カラムを選択します。
section_higher

2)右上の項目名部分に「セクションを編集」と表示されている事を確認し、「レイアウトタブ」内の高さで「最小の高さを選択」を選びます。
section_customize

3)好きな高さに設定
スライダーまたは、数字で設定します。
section_customize2

section_customize3

ヒーロー部分の背景を設定

今回は背景画像の設定を行います。単色やグラデーション、動画を背景にする事ができ、それらの方法は後日別の記事でご紹介します。

1)引き続きセクションの編集で、スタイルタブを開きます。
sectionstyle1

2)普通→筆アイコンを選択→画像追加「+」をクリック
sectionstyle2

3)背景にしたい画像を選択
sectionstyle4
(画像内の文字が「変」になっていますが、正しくは「変わった」です)

ヒーローの中身を作る!

まず、目標のデザインをご覧下さい。
hero

これと同じものを作ってみます。右にキャッチコピー、左に画像を入れます。

1)カラムを追加(1カラム→2カラム)
少しわかりずらいのですが、カラムのアイコン(グレーのアイコン)の上で右クリックをします。するとメニューが表示されます。その中の「+新しいカラムの追加」を選択します。
column_plus

2)右に見出し、左に画像のウィジェットを追加します。
column2

見出しのデザインを変える

見出しの編集についてウィジェットマニュアル「見出し」をご覧下さい!

1)見出しウィジェットを選択し、コンテンツの「タイトル」を入力
headline_style

2)文字の色を変えてみる!
スタイルタブを開き、色パレッドをクリックします。パレット内の好きな色を選択します。リアルタイムにライブプレビュー画面(画面右側)の色も変更されます。
headline_colourchange

3)文字のサイズを変えてみる!
同じくスタイル内のえんぴつのアイコンをクリックし、「サイズ」のスライダーを動かしたり、数字でフォントサイズ(文字サイズ)を設定します。
fontsize

画像の配置と設定

1)画像の設定
先ほどやりましたセクション背景同様に、入れたい画像を設定します。反映されたら、「画像サイズ」を設定します。

(補足)画像サイズとは?小さく表示したい場合、大きな画像のまま表示させるのはサイトが重たくなってしまいます。その為、小さく表示したい場合は画像サイズを変える事ができ、反対に大きく表示させたい場合は、フル(=画像100%のサイズ)などを選択します。つまりここで言う画像サイズというのは、データの大きさを意味します。すなわち画質にも関わってきます。

picture_customize
今回は比較的大きく表示させたい(=綺麗な状態・そのままの状態)ので、フルを選択

2)画像の表示サイズの調整
最大幅とは、カラムに対しての幅を示します。例えば100%に設定した場合、カラム名一杯が画像の範囲と意味します。それを加味して設定されるのが、幅となります。最大幅を超える事なく(つまり、最大幅の範囲内で)幅の調整を行います。
picturesize
(例)最大幅を小さく20%にし、幅を100%にした場合
widesetting
上の画像を見ると、幅100%なのに小さく画像が表示されます。それは、幅は最大幅に対しての割合だからです。

プレビューと保存

heroFIX

出来上がりをプレビューで確認しましょう。編集画面のライブプレビュー画面は、メニュー部分の幅がある為、表示幅が狭いです。その為、全画面に表示した場合、幅等のバランスが変わります。

こまめにプレビューで確認しつつ、サイズは幅などを調整してみましょう。

そして、最後は必ず保存(下書きとして保存)を行います。
save

まとめ

デザイン性はさておき、今回はヒーロー部分の作成を行いました。デザインやレイアウトによってやり方は都度変わります。色々触ってみるのが一番の上達方法かと思いますので、今回ご紹介したのはあくまで参考ご覧下さい。

今回習得しておきたい事!
・セッションの高さと背景の設定の方法
・カラムの追加の方法
・画像サイズの意味と幅と最大幅の関係性

次回は、色々なウィジェットを使い、商品紹介のコーナーを作ってみたいと思います。

Elementor公式はこちら

この記事の関連講座

ACFマスター講座
Elementorのレスポンシブモード 講座
Elementorを使うためのWordPress講座

author

ITKA / 加藤 誠

ITKA / 加藤 誠

Elementorを使い始めて6年目、好き過ぎてファンブログを始めて4年。Elementorを使って年間約30サイトを制作しております。主にWebマーケティング支援事業を中心とし、現在5社の顧問・コンサルティングとして携らさせて頂いております。Elementorのご相談からWeb集客のご相談はお気軽にお問い合わせ下さい。

こちらもご覧下さい

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。