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

Elementor Proでヘッダーを作る

Elementor Proでヘッダーを作る

Elementor無料版とPro版の圧倒的な違いの1つ、それはテーマビルダーという事です。つまり、まるでテーマを作る様にトップページはもちろん、記事一覧ページや、記事ページ、ヘッダーやフッターも作れます。今回は、Elementor Proでヘッダーを作ってみたいと思います。

Elementor Proでヘッダーを作る

Elementor Proでヘッダーを作る紹介動画https://youtu.be/fTQpuKkK_IE

①新規追加

ダッシュボードの「Templates」→「新規追加」をクリック

add_header

「作業を行いたいテンプレートの機能を選択」で、作りたいテンプレートの種類を選択します。今回はヘッダーを作るので、「Header」を選択します。あとは、テンプレートに名前をつけて、緑の作成ボタンをクリックします。

②セクションを追加して設定

今回は既存のブロックやテンプレートは使いません。まず、セクションを追加します。セクションを追加したら、ある程度の設定をします。作りたいデザインによって設定は変わるかもしれませんが、今回は王道のヘッダーを作ってみたいと思います。

header_section

セクションについてより詳しい説明はこちら

Elementorの基本「セクション」をマスターしよう!

 

(1)コンテンツの幅
コンテンツの幅とは、ページ全体(=ブラウザの画面サイズ)に対し、コンテンツ(=カラムやウィジェット)をどの幅で表示させるかを設定する部分になります。

contents_wideブラウザの画面が青になります。それに対し、どこまでコンテンツを表示させるかを決めるのが、黄色い部分の「コンテンツの幅」になります。セクションごとに設定も可能ですが、いちいち設定するのが面倒な場合は、WordPress管理画面→「Eelementor」→「設定」→「スタイル」で、基本設定する事が出来ます。ここで設定されたコンテンツの幅はデフォルト設定となります。

elementor_setting

このコンテンツ幅ですが、一般的には1000〜1120pxが多く、その理由としては、大半のパソコン(ディスプレイサイズ)でもレイアウトを崩す事なく見てもらえる最適な幅と言われています。

(2)高さ
セクションの高さを設定する部分になります。通常であれば、中に入るウィジェットの数やウィジェットのサイズに合わせて柔軟に変化してくれるのですが、あえてヘッダーにおいては高さを設定しておきます。これは個人差があるのですが、自分の場合ファーストビュー(ページが開いて最初に目にする部分)におけるヘッダーの割合でイメージが変わると考えており、ヘッダーの高さは慎重に設定します。

また、一般的なヘッダーの高さは80px〜120px程度と言われております。

(3)Vertical Align
直訳すると「垂直方向に整列」、つまりセクションの縦に対しカラムの配置をどうするか?を設定します。上揃え、中央揃え、下揃えから選択出来ます。

これも個人差あるかと思いますが、中央揃えにする事でバランスの取れたデザインになると考え、個人的にはいつも中央に設定してます。

(4)背景(色)
自分の場合、ヘッダー領域とわかりやすくするため、先に背景に色をつけます。そうする事により、ヘッダーのイメージが明確となり、制作しやすくなります。

section_background

③サイトタイトル(またはロゴ)を入れる

Elementorのヘッダー作成時に使えるウィジェットがあります。

site_widget

これは、WordPress自体に設定されたサイトロゴとサイトタイトルを自動的に反映してくれるウィジェットです。

WordPress自体に設定とは、「外観」→「カスタマイズ」→「サイトの基本情報」で設定出来ます。

wp_thema_setting

この設定をしておくと、上記のSite Logoウィジェットなどが使えます。
見出しウィジェットや画像ウィジェットを活用してもOKです。

header_sample

 

④保存して反映させる!

デザインに関する説明ではないので、ヘッダーが出来た前提で進めます。完成したら、「公開」ボタンをクリックします。すると、下の画像のポップアップが表示されます。

condition

「Publish Settings」という画面が表示されます。これは、今作ったテンプレート(ヘッダー)をどのページにどの様なルールで設置するかを設定する部分です。

ヘッダーの場合、基本的にはサイトのどのページにも反映するかと思います。その場合、「サイトの全てのページ」という設定が正しくなります。

「Add Condition」をクリックして、設定条件を追加しましょう。

addcondition

最初の「Include」の部分は、左側のルールを含めるか含めないかを設定出来ます。上の画像では「Entire Site(サイト全体)」がルールなので、文章に訳すと「今作ったヘッダーは、サイトの全ページに反映させる」となります。

これ以外にも、様々なルールを設定する事が出来ます。

condition_sample1

先ほどのルールに加え、2つ目のルールが設定出来ます。直訳するとこんな感じです。「今作ったヘッダーは、基本全てのサイトに反映するんだけど、全ての固定ページには「Exclude(除外)」反映させないといて〜」となります。

condition_sample2

今度はどうでしょうか?皆さんも考えて見てください!

「今作ったヘッダーは、未分類のカテゴリがついたページだけに反映して下さい」となります。

いかがでしたか?慣れてくると簡単に条件分岐が出来ます。

実は、ヘッダーが作れるのもElementor Proの醍醐味なのですが、本当の意味でのElementor Proの価値は、個人的にはここにあると思います。どんな優れた高価なテーマでも、さすがにここまでは出来ないと思います。この時点で、Elementor Proの価値は十分にあると個人的には考えます。

と、話がそれてしまいました。

最後に、しっかりと設定したルールに従ってヘッダーが反映されているか、確認しましょう!

 

⑤反映確認

header_sp01

当ブログのLINE@会員向けページに反映させて見ました。これでヘッダーの完成です!もちろん、作ったヘッダーは「Templates」にあり、いつでも編集が出来ますので、「ボタン追加したいなぁ」と編集すれば、すかさずサイト全体のヘッダーにボタンが配置されます!

フッターも同じ

フッターも、ヘッダー同様に「作る」→「ルール設定」→「反映」の流れです。

まとめ

Elementor Proがテーマビルダーと呼ばれる意味が少しお分かり頂けましたでしょうか。テーマを使ってきた方であれば、ヘッダーやフッターが自由になるだけでも涙ものかと思います。(え、僕だけ?)

ここでは紹介出来なかったヘッダー機能には、ボタン一つでヘッダーを固定できる機能や、メニューを簡単に入れられるmenuウィジェットとの組み合わせなど、本当に自由にヘッダーをコントロールする事が出来ます。

ぜひ、Elementor Pro導入の判断の1つに加えて見てはいかがでしょうか。

(Elementorの営業マンぽいな・・・ぼそっ)

この記事の関連講座

Elementorのレスポンシブモード 講座
Elementorを使うためのWordPress講座
ブログの作り方講座

author

ITKA / 加藤 誠

ITKA / 加藤 誠

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

こちらもご覧下さい

ポップアップ!

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