WordPressチュートリアル Elementorエディターでゼロからカスタムページを構築
プロフェッショナルで個性的なWordPressページを作りたいけど、面倒なコードに悩まされたくないなら、Elementorエディターが理想的なツールです。このチュートリアルでは、ゼロからElementorを使ってページレイアウトを作成し、ページ要素を構築する方法を手取り足取り学びます。これにより、あなたのWordPressサイトはより美しく、より実用的になります。このチュートリアルは、ゼロからWordPressページの作成と編集を学ぶための基礎的なガイドです。WordPressの管理画面から新しいページを作成し、ヘッダー、メインコンテンツ、フッターを順に構築し、Elementorのビジュアルコンポーネントを使用してレイアウトの編集、コンテンツの追加、スタイルの調整などの操作を行います。これは単なる基本的なチュートリアルではなく、実際に手を動かしながら学ぶ過程でもあります。ほとんどの場合、手順に従って進めば問題なく進行しますが、ページ要素の開発は変数が多く、プラグインの衝突やスタイルの異常などの問題に直面することもあります。したがって、Elementorを使うことを学ぶだけでなく、読者は観察力や問題解決能力を養うことも重要です。これにより、この強力なツールを本当に使いこなすことができます。もしあなたがWordPress初心者であれ、ページ編集スキルを向上させたいユーザーであれ、このチュートリアルは役立つガイドを提供し、ウェブページのデザインや要素作成をより効率的に進めるための助けとなるでしょう。次に、この記事の目次内容を見て、実際のテーマに入っていきましょう。
読者がより効率的に学習し、参照できるように、筆者は「WordPressチュートリアル：ゼロからElementorエディターでカスタムページを構築」の内容を体系的に整理し、わかりやすい目次リストにしました。各章は記事の構造を直感的に示し、アンカーリンクを内蔵しており、関心のある内容にワンクリックでジャンプでき、特定の部分を遡って学習したり、深く学ぶことができます。全編を通して学びたい方でも、操作中に特定の手順をすばやく見つけたい方でも、この目次を使うことで、読み進めやすく、効率的な学習が可能です。この記事の目次は以下の通りです：
- WordPress管理画面で新しいページを作成
- Elementorのテーマビルダーでヘッダー（ページ上部・ナビゲーションバー）テンプレートファイルを作成
- Elementorでページ本体のフレームを構築し、コンテンツ要素を追加
- Elementorでフッター（ページ下部）テンプレートファイルを作成
一、WordPress管理画面で新しいページを作成
Elementorエディターを使用してWordPressページを構築する前に、最初のステップは、ページ自体がWordPress管理画面で作成されていることを確認することです。WordPressのページ管理にアクセスするパスは、上記の画像に示されています。この章では、WordPressのページ管理機能から始めて、新しいページを作成する方法、ページタイトル、URL設定、ページ階層、ページの公開などの重要なステップを詳しく説明します。ページ作成はウェブサイト構築の基礎であり、ページの属性を正しく設定することで、後の編集効率が向上し、Elementorを使用する際のレイアウトや互換性の問題を回避できます。ページが準備できたら、Elementor編集モードにシームレスに切り替えて、ページ要素のレイアウトとデザインを開始できます。
1、ページタイトルの入力
WordPressの管理画面に入り、ページ管理画面にアクセスした後、ページ上部の「新規ページ」ボタンをクリックします。すると、上記の画像に示されている新しいページ作成画面が表示されます。赤枠で示されたタイトル入力欄にページタイトルを入力します。WordPressシステムでは、このページタイトルはページ管理内で表示されるタイトルであるとともに、ページの前端コード内のtitleタグにも使用されます。そのため、カスタマイズする際にはSEOの効果を考慮することが重要です。
2、ページURLのカスタマイズ
上記の画像に示されたように、ページタイトルを入力した後、右側の赤枠で示された「リンク」アンカーテキストをクリックすると、ページURLをカスタマイズするための入力欄がポップアップ表示されます。デフォルトでは、WordPressはページタイトルをURLの後ろに自動的に追加します。しかし、このデフォルトの方法はSEO規則に合わないことが多いです。タイトルに英語以外の文字が含まれていたり、長すぎたりすると、ユーザーにとって読みづらく、検索エンジン最適化にも不利です。理想的なURLはできるだけ短く、英単語を使用することで、読みやすさと検索エンジンの親和性を向上させます。
3、ページ階層の設定
ページ階層設定は、WordPressページ間の親子関係を定義するために使用されます。記事ページとは異なり、記事はカテゴリに分類できますが、ページには階層構造があります。例えば、URL構造「szlogic/web-design」は「ロジック思数字科技」のウェブデザインページを示します。このページを親ページに設定すると、その子ページのURL形式は「szlogic/web-design/あなたのページURL後継」のようになります。ページ階層を設定するには、上記の画像のように、編集画面右側の「ページ」セクションで「親ページ」オプションをクリックし、親ページの選択ウィンドウを表示させます。適切な親ページを選択すると、システムは自動的にURL構造を調整し、階層関係に従うようにします。ここで筆者が説明したいのは、ページ階層構造は必須ではなく、ページに親ページを設定しない場合は、デフォルト設定のままで問題ありません。
4、WordPressで新規ページを公開
必要なページ情報の設定が完了したら、ページを公開する操作を行います。ページは公開後にのみ、ウェブサイト構造の一部として認識され、URLを使用してアクセスできるようになります。上記の画像の赤枠で示された「公開」ボタンをクリックすると、操作画面が公開前の確認画面に移行します。この画面で再度「公開」ボタンをクリックすることで、新しいページの公開作業が完了します。
5、Elementorでページを編集する
Elementorでのページ編集は、新しく作成したWordPressページの最終ステップです。新しく作成したページを初めてElementor編集モードに入るには、ページ管理モードで上記の画像の赤枠で示された「Elementorで編集」ボタンをクリックして入ります。この操作を初めて行うと、その後はフロントエンドのページから直接アクセスでき、バックエンドにアクセスする必要はありません。初めてのアクセスは、Elementorに対してそのページの編集権限を与えることと同じ意味を持つため、最初はバックエンドから操作する必要があります。
二、ElementorのテーマビルダーでHeader（ヘッダー及びナビゲーションバー）テンプレートファイルを作成する
WordPressウェブサイトにおいて、ヘッダー（Header）とナビゲーションバーは非常に重要なグローバル要素です。これらはウェブサイトの全体的なスタイルに影響を与えるだけでなく、ユーザーのブラウジング体験にも直接影響します。ヘッダーは通常、すべてのページで一貫して表示する必要があるため、Elementorのテーマビルダー機能を利用して、再利用可能なヘッダーテンプレートを作成し、全サイトに統一して表示させることができます。この章では、Elementorのテンプレートファイル管理機能を使用して、ウェブサイトのニーズに合ったヘッダーをゼロからデザインする方法を紹介します。ロゴ、ナビゲーションメニュー、検索ボックスなどの一般的な要素を追加し、Elementorのドラッグアンドドロップ操作で個別に調整する方法を学びます。テンプレートデザインが完了したら、テンプレートファイルを公開する際に、設定した制御条件で「全サイトに適用」を選択する方法も解説し、このヘッダーがすべてのページに自動的に適用されるようにします。このテクニックをマスターすると、見た目が美しく、機能が完備されたヘッダーを作成するだけでなく、後で変更する際にも一括で更新でき、各ページを個別に調整する必要がなくなります。さあ、あなたのウェブサイト専用のヘッダー作成を始めましょう！
1、Elementorテーマビルダーの入り口
ブラウザで公開したページにアクセスし、同じブラウザでWordPressサイトのバックエンドにログインした状態でページを訪れると、ページの上部に管理ツールバーが表示されます。マウスを「Elementorで編集」のアンカーテキストにホバーさせると、Elementorのドロップダウンオプションメニューが表示され、その中に「テーマビルダー」の入り口が隠れています。上記の赤枠で示された「テーマビルダー」リンクをクリックすると、Elementorのテーマテンプレートファイルの管理操作ページに入ることができます。
2、ElementorのHeaderテンプレートファイル管理画面で新しいテンプレートファイルを作成
Elementorのテーマビルダーのホームページに入ると、左側のテンプレートファイルカテゴリーの上部にある「Header」カテゴリをクリックすると、上記の画像に示されている「Header」テンプレートファイルの管理操作画面に進みます。追加操作は不要で、上記の画像で赤枠で示された操作画面右上の「Add New」ボタンをクリックするだけで、Headerのテンプレートファイルを作成できます。
3、Header（ヘッダー）テンプレートのスタイル選択または完全なカスタムスタイルの作成
前のステップでHeaderテンプレートファイル管理操作画面の「Add New」ボタンをクリックした後、ページは自動的に上記の画像のようなElementorのHeaderモジュール選択画面に遷移します。ここで、Elementorが提供するいくつかのHeaderテンプレートスタイルを直接選択して使用できます。この操作画面では、読者はElementorのHeaderスタイルをクリックして選択し、読み込んで使用することもできますし、右上隅の「X」ボタンをクリックしてHeaderモジュールのスタイル選択ウィンドウを閉じ、完全にカスタムでウェブサイトのヘッダー/ナビゲーションバーを作成することもできます。
4、Elementorのコンテナを使用してヘッダーとナビゲーションバーのレイアウト
Headerテンプレート編集モードでは、Elementorのコンテナを使用してレイアウトされたヘッダースタイルが上記の画像のように表示されます。フロントエンド開発のコードレベルでは、すべてのウェブページの構造はブロック要素（通常はdivタグで表示されます）で構成されており、これらの要素はHTMLレイアウトにおいて「ボックスモデル」と呼ばれています。Elementorはビジュアルページエディタとしてこのロジックに従っており、ビジュアル操作インターフェースとコンテナ（Container）コンポーネントを提供し、ページの基本レイアウトを構築し、他の要素を整然と配置するのを助けます。そのため、ヘッダー（Header）とナビゲーションバー（Navbar）の要素を追加する前に、その構造を適切に計画し、Elementorのコンテナコンポーネントを使用してレイアウト設定を行う必要があります。コンテナコンポーネントを柔軟に使用するためには、このセクションで紹介するコンテナパラメータ設定とコンテナネスト操作方法を十分に理解する必要があります。コンテナはレイアウト構造の中心であり、コンテンツの配置方法だけでなく、ページのレスポンシブ表示やユーザー体験にも影響を与えます。また、コンテナの数はページ要素の数にも関連しています。通常、1つのコンテナには1つの要素コンポーネントを配置し、ヘッダー部分で一般的に使用される要素コンポーネントには、サイトロゴ、WordPressメニュー、検索フォームの3つがあり、それぞれウェブサイトのロゴ、WordPressメニュー、検索ボックスに対応しています。
（1）コンテナの幅の設定
上記の図のように、コンテナの幅の設定はページ要素の表示範囲を決定します。多くの初心者はページ編集時に、要素が全画面で表示されない問題に直面することがありますが、その根本的な原因は通常、コンテナの幅が「全幅」に設定されていないか、コンテナの内側の余白が0に設定されていないことです。ページ要素に余白を持たせたい場合は「ボックスレイアウト」を選択し、全画面表示を希望する場合はコンテナの幅を「全幅」に調整し、さらにコンテナの内側の余白を以下の設定方法で0に設定する必要があります。この2つの設定が正しく行われて初めて、コンテンツが画面全体に広がります。
（2）コンテナの内外の余白の設定
上記の図のように、Elementorのコンテナの外側の余白と内側の余白の設定は「高度な設定」タブにあります。トップエリアでは、4方向の外側の余白調整オプションが提供されています。デフォルトでは、Elementorは外側の余白と内側の余白の数値をロックし、4方向の余白を均一に保ちます。特定の方向の距離を個別に調整したい場合は、赤枠で示された「リンク」アイコンをクリックしてロックを解除し、該当する方向に必要な数値を入力します。また、ユーザーはロックアイコンの上にあるpx（デフォルト単位）をクリックして、ポップアップメニューから他の単位（em、rem、%、など）を選択して、異なるデザインニーズに対応することもできます。注意すべき点は、Elementorがデフォルトで内側の余白を10pxに設定しており、ロックを解除すると、システムが自動的に内側の余白を0に調整するため、実際のニーズに応じて適切な数値を手動で設定する必要があることです。
（3）コンテナのネスト方法
上記の図のように、Elementorコンテナのネストには2つの方法があります。以下の2つの方法は、いずれもコンテナのネストを効果的に実現できます。1つはドラッグアンドドロップ、もう1つはナビゲーターでコピーして貼り付ける方法です。ドラッグアンドドロップの方法はより直感的で、構造を最初から作成する場合に適しており、コピーして貼り付ける方法は既存のレイアウトを元に迅速に調整やコンテナの再利用を行う場合に便利です。
子コンテナをドラッグして追加する
上記の図のように、Elementorの左側のコンポーネントツールバーからコンテナコンポーネントを直接目的の親コンテナにドラッグすることができます。これにより、新しいコンテナが自動的に親コンテナに属し、階層構造が形成されます。
コンテナをコピーして貼り付ける
Elementorの操作画面右側のナビゲーターで、ネストしたいコンテナを選択し、コピー操作を実行します。その後、目的の親コンテナを選択し、右クリックして貼り付けを行うと、コピーしたコンテナが親コンテナの下に配置され、子コンテナになります。
（4）子コンテナの並べ方の設定
Elementorの子コンテナの並べ方は、親コンテナによって決まります。その設定位置は「レイアウト」タブにあり、上記の図で赤枠で示されています。「アイテム」セクションでは、コンテナの並べ方を選択でき、横並びと縦並びを選択し、具体的な並べ方向を調整できます。横並びを選択した場合、子コンテナは水平方向に順番に並べられ、左から右または右から左の順番を設定できます。これにより、さまざまなレイアウトニーズに対応できます。縦並びを選択した場合、子コンテナは垂直方向に積み重ねられ、上から下、または下から上の順番に並べることができます。これらの並べ方向の設定は、親コンテナ内の子コンテナのレイアウトに直接影響を与えます。適切な設定を行うことで、ページ要素のレイアウトを柔軟にし、全体のデザインに深みを加えることができます。
5、ヘッダーとナビゲーションバーの要素内容を編集および作成
上記の部分でヘッダーとナビゲーションバーの基本的なレイアウトが完成した後、次に必要なのは具体的な要素コンポーネントを追加し、完全なナビゲーションおよびブランド表示機能を持たせることです。Elementorはヘッダーに適した複数のコンポーネントを提供しており、その中でもSite Logo（サイトのロゴ）、WordPress Menu（ナビゲーションメニュー）、およびSearch（検索ボックス）は最も一般的で実用的な3つのコンポーネントです。これらのコンポーネントを対応するコンテナにドラッグアンドドロップし、必要な素材をアップロードおよび設定することで、完全な機能を持つヘッダーレイアウトを作成できます。上記のスクリーンショットは、Site Logoコンポーネントにロゴ素材をアップロードし、WordPress Menu（ナビゲーションメニュー）の表示条件を設定した結果です。
6、ヘッダーテンプレートファイルを公開および表示条件を設定
（1）ヘッダーテンプレートファイルの公開
上記のように、Elementorのコンテナコンポーネントを使用してヘッダー部分をレイアウトし、よく使用するコンポーネントを追加して素材をアップロードした後、ヘッダーテンプレートファイルを公開してページに適用する準備が整いました。Elementor編集モードで「公開」ボタンは、上図の赤枠で示された左側のサイドバーの下部にあります。「公開」ボタンをクリックすると、システムが表示ロジックの設定ウィンドウを表示し、ユーザーに対してヘッダーテンプレートの適用範囲を定義する手順を案内します。
（2）ヘッダーテンプレートファイルの表示条件を設定
上記の表示ロジック設定ウィンドウでは、ユーザーはヘッダー（Header）をサイト全体、特定のページ、投稿カテゴリー、または他のカスタム条件に適用するかを選択できます。ヘッダーテンプレートファイルはWordPressサイトのグローバルな部分に該当するため、すべてのページに適用されるように設定する必要があります。上記のように、表示ロジック設定ウィンドウで「Include > Entire Site」を選択します。これにより、このヘッダーテンプレートがサイト全体のすべてのページに適用されることを意味します。選択が完了したら、「Save&Close」ボタンをクリックして操作ウィンドウを適用し、閉じます。システムは自動的にこのヘッダーテンプレートをサイト全体のすべてのページに適用します。
三、Elementorを使用してページのメインフレームを構築し、コンテンツ要素を追加
ヘッダーとナビゲーションバーのレイアウトと作成が完了した後、次に必要なのはページのメインコンテンツエリアを構築することです。前章で説明した「Elementorのコンテナを使用してヘッダーとナビゲーションバーをレイアウトする」と同様、ページのメイン部分のデザインもElementorのコンテナコンポーネントに依存します。異なる点は、メイン部分には通常、テキスト、画像、アイコン、ビデオ、ボタン、フォームなど、より豊富なコンテンツ要素が含まれることです。これらの要素はすべてElementorで使用できる対応するコンポーネントがあります。実際の操作では、コンテナの幅の調整、内外の余白の設定、子コンテナのネスト方法をうまく活用することで、さまざまなページレイアウトを実現できます。例えば、適切なカラムレイアウトを使用すれば整然としたコンテンツ分布を作成でき、適応幅と余白の調整を組み合わせれば、ページが異なるスクリーンサイズで良好な視覚効果を保つことができます。これもElementorの強力な特徴であり、ユーザーがコードを書くことなく多様なページ構造を自由に構築できる理由です。
したがって、ページのメインコンテンツを設計する際には、コンテナの構造を適切に計画することが非常に重要です。明確で整理されたコンテナの階層は、デザインの美しさを保証するだけでなく、レスポンシブ性を向上させ、サイトが異なるデバイス上でも最適なブラウジング体験を提供できるようにします。次に、博主はElementorのコンテナコンポーネントを使用して、ページのメイン部分を上から下に順番にレイアウトし、要素コンポーネントを適用する方法を順を追って説明します。これにより、ページがさらに生き生きとし、層を持ったデザインになります！
1、バナーセクション
バナーセクションには通常、1つのコンポーネント、つまりElementorの「Slides」コンポーネントが必要です。Slidesコンポーネントは、Elementorでページ画像のカルーセルを作成するためのコンポーネントで、タイトル、テキスト、およびリンク設定機能が組み込まれています。したがって、バナーセクションでは複数のコンテナをネストする必要はなく、単一のコンテナを上部に配置するだけで済みます。
（1）Slidesコンポーネントのよく使用するパラメータ設定
背景のパラメータ設定
上の図のように、カルーセルオプションタブを展開すると、上記の赤枠で示された背景パラメータ設定オプションが表示されます。このエリアで、カルーセルブロック用の背景画像や背景色をアップロードし、上部の「Content」タブでタイトル、説明、およびボタンのテキスト内容を入力し、ボタンのURLアドレスを設定することができます。
コンテンツ位置のパラメータ設定
Slidesコンポーネントのパラメータ設定エリアの「スタイル」タブでは、コンテンツのカスタム位置を設定できます。上から下へ、設定可能な位置パラメータは、コンテンツの幅、内距、水平および垂直方向、テキストの整列方向です。これらの位置パラメータ設定を使うことで、タイトル、説明テキスト、ボタンのレイアウト位置をカスタマイズできます。
テキストスタイルの設定
テキストのスタイル設定は、上記の図のように、「コンテンツ位置のパラメータ設定」と同様に「スタイル」タブにあります。上記の赤枠で示されたテキストタイプ（タイトル、説明、ボタン）をクリックすると、展開されたCSSスタイル設定で、テキストオブジェクトのフォントサイズやカラーなどをカスタマイズできます。
2、ビジネス説明セクション
ビジネス説明セクションの要素コンポーネントは、ページデザインの具体的なニーズに応じて、さまざまなコンポーネントを組み合わせて実現できます。一般的に、説明セクションに含まれる要素が豊富であればあるほど、必要となるコンポーネントも増えます。上記のバナーセクションで使用されたSlidesスライドコンポーネントとは異なり、ページの他のセクションには決まったコンポーネント数の要件はなく、コンテンツのニーズに応じて自由に組み合わせることができます。上の図で示されたビジネス説明セクションの例では、この部分にはタイトルコンポーネントとボタンコンポーネントだけを使用しており、全体的にシンプルで直感的なデザインとなっています。次に、博主はこれらの2つのコンポーネントのよく使われるパラメータ設定を詳細に説明し、皆さんがその使用技術をよりよく習得できるようサポートします。
（1）タイトルコンポーネントのよく使われる設定項目
タイトルコンポーネントの「コンテンツ」タブ下の設定項目
Elementorのナビゲーターでタイトルコンポーネントを選択すると、上の図のように、左側のコンポーネント設定エリアに「コンテンツ」タブがデフォルトで表示されます。このタブには、主に3つの重要な設定項目があります：タイトル内容入力ボックス、タイトルリンク入力ボックス、およびHTML Hnタグ設定です。タイトル内容の入力は必須項目で、これによりページ上に表示されるテキスト内容が決まります。リンク入力ボックスはオプションで、リンクを追加するかどうかは具体的なニーズに応じて決めます。ほとんどの場合、タイトルにはリンクは追加されません。HTML Hnタグ設定はSEO最適化にとって非常に重要で、H1、H2、H3などのタグを正しく選択することは、検索エンジンがページ構造を認識するのに役立ち、適切に設定することでウェブサイトの可読性やランキング向上に貢献します。したがって、タイトルコンポーネントを編集する際には、コンテンツが正確であることを確認するだけでなく、ページ構造やSEOのニーズに基づいてHTMLタグを適切に設定する必要があります。
タイトルコンポーネントの「スタイル」タブ下のスタイル設定項目
ここまで読んで、まだElementorコンポーネントのスタイル設定の位置に慣れていない場合、博主から小さなヒントをお伝えします。Elementorのすべてのコンポーネントのスタイル設定は、コンポーネント設定パネルの「スタイル」タブにあります。異なるコンポーネントには具体的なスタイルオプションが異なりますが、設定のパスは同じです。タイトルコンポーネントを例に取ると、上の図で赤枠で示されたように、よく使われるスタイル設定項目にはタイトルの整列方法、タイトルテキストの色、およびタイポグラフィ設定が含まれています。タイポグラフィオプションでは、フォントタイプ、フォントサイズ、フォントの太さ、行間など、複数のスタイルを調整してタイトルの視覚効果がページ全体のデザインに合うようにすることができます。この規則に慣れれば、タイトル、ボタン、画像、その他のコンポーネントのスタイルを変更する際に、より迅速に対応することができます。
（2）ボタンコンポーネントのよく使われる設定項目
ボタンコンポーネントの「コンテンツ」タブ下の設定項目
ボタンコンポーネントの「コンテンツ」タブ下のよく使われる設定項目は、上の図の赤枠で示されているように、テキスト、リンク、およびアイコンです。この3つの設定項目は、必須の設定項目とオプション項目に分かれます。テキストの入力は必須で、テキストボックスに入力された内容がボタンの名前になります。リンク項目も必須であり、ボタンのリンクがなければ意味がありません。しかし、最後のアイコンの設定は、デザインの要求に応じて設定できます。ボタンにアイコンが不要な場合は、デフォルト設定のままで構いませんが、アイコンを追加したい場合は、対応するボタンをクリックしてElementorのアイコンライブラリにアクセスし、使用したいアイコンを選択するか、指定したアイコンファイルをアップロードすることで実現できます。
ボタンコンポーネントの「スタイル」タブ下のスタイル設定項目
ボタンコンポーネントの「スタイル」タブには、上の図のように多くの設定項目があります。前述のタイトルコンポーネントと比較して、ボタンのスタイル設定はより多彩で、視覚的な効果やインタラクション体験を精密に調整するための重要なパラメータが含まれています。「スタイル」タブ下では、まず配置設定があり、これによってボタンの配置方法（中央、左揃え、右揃え）が決まります。タイポグラフィ設定は他のコンポーネントと同様に、ボタンのテキストのフォント、フォントサイズ、フォントの太さなどのスタイルを調整するためのものです。テキストカラー設定では、標準状態とホバー状態（Hover）でのテキストカラーを個別に設定でき、異なる状態でのボタンの視認性と視覚的フィードバックを確保します。
さらに、ボーダーの角丸設定でボタンのエッジの曲率を制御でき、直角ボタン、丸角ボタン、または完全に円形のボタンに調整できます。ボックスシャドウ効果を使ってボタンに影を追加し、立体感を増して、クリックを誘導する効果を高めることができます。最後に、内余白（Padding）設定でボタン内のテキストとボーダーの間隔を決定でき、適切に調整することでボタンのサイズと全体的な視覚的バランスを最適化できます。これらのスタイル設定を組み合わせて使用することで、ページデザインのニーズに合った、見た目が美しく、ユーザー体験に優れたボタンスタイルを作成できます。
3、製品およびサービスブロック
製品およびサービスブロックのコンテナのネスト構造は、前述のブロックよりも複雑で、階層が豊富です。上の図から分かるように、このブロックの右側の子コンテナにはギャラリー（Gallery）コンポーネントが使用され、製品やサービスに関連する3枚の画像が表示されています。各画像にはテキスト情報が追加され、視覚的な表現とコンテンツ説明を強化しています。左側の子コンテナでは、タイトルコンポーネントと複数のボタンコンポーネントを組み合わせて、明確なテキスト誘導とインタラクション効果を実現しています。
ギャラリーコンポーネントは、さまざまなレイアウトやパラメータ設定を提供しており、上図の左側の設定操作エリアで、画像の配置方法、列数、間隔、リンク形式などを調整できます。現在のギャラリーコンポーネントでは、画像が4列のレイアウトで配置され、Lazy Load（遅延読み込み）機能が有効になっています。これにより、ページのパフォーマンスが向上します。左側の子コンテナにあるタイトルコンポーネントでは、大きなフォントサイズを設定して、目を引く視覚効果を確保しています。下の複数のボタンコンポーネントは、ユーザーが異なる製品やサービスカテゴリーを閲覧できるように誘導するために使用されています。ボタンの色、境界線スタイル、テキスト内容は「スタイル」タブでさらに調整可能で、全体のデザインスタイルと一致させることができます。前述の部分で、タイトルコンポーネントとボタンコンポーネントのパラメータ設定とスタイル設定については詳細に説明しました。次に、このセクションでまだ紹介していないギャラリー（Gallery）コンポーネントを重点的に解析し、そのパラメータ設定とスタイル調整について詳しく解説し、より柔軟にこのコンポーネントを使用して画像表示のレイアウトを行う方法を学びましょう。
（1）ギャラリーコンポーネント「コンテンツ」タブの設定項目
「コンテンツ」タブでは、ギャラリー（Gallery）コンポーネントは、画像表示の方法を柔軟に設定できる複数のコア設定項目を提供しています。まず、Type（タイプ）オプションでは、ギャラリーの表示形式を選択できます。例えば、単一画像（Single）やグリッド（Grid）など、異なるページレイアウトのニーズに応じた形式を選べます。次に、画像選択エリアでは、現在追加されている画像のリストが表示され、ユーザーはプラスボタンをクリックして新しい画像をアップロードすることができ、不要な画像を削除することもできます。Order By（並べ替え順）オプションでは、画像の並び順を設定できます。デフォルト順やランダム順など、並べ替えの方法を選べます。Lazy Load（遅延読み込み）オプションでは、遅延読み込み機能を有効または無効にできます。この機能は、特に大量の画像を含むギャラリーにおいてページパフォーマンスを向上させるのに役立ちます。
Layout（レイアウト）オプションでは、画像の配置方法を決定できます。上図の例では、グリッド（Grid）レイアウトが選択されています。Columns（列数）オプションでは、ギャラリーの列数を設定でき、画像の配置構造を調整して、ページ幅に合わせた表示ができます。Spacing（間隔）オプションでは、画像間の間隔を調整でき、スライダーで調整して画像の間隔を増減させ、視覚的効果を最適化します。Link（リンク）オプションでは、ギャラリー内の画像をクリックした後の遷移方法を設定できます。例えば、画像をメディアファイルにリンクさせて、クリック後にオリジナル画像を見ることができるようにしたり、特定のページにジャンプするようにしたりできます。Lightbox（ライトボックス効果）オプションでは、画像をポップアップウィンドウで表示する機能を有効にすることができ、より良いブラウジング体験を提供します。最後に、Aspect Ratio（アスペクト比）オプションでは、画像の表示比率を制御できます。例えば、ブログでは9:16を設定して、縦長の形で画像を表示することができます。これらの設定項目を使用することで、ユーザーはギャラリーコンポーネントの表示効果をカスタマイズし、さまざまなページデザインのニーズに適応させ、サイトの視覚的表現を向上させることができます。
（2）ギャラリーコンポーネント「スタイル」タブの設定項目
「スタイル」タブでは、ギャラリー（Gallery）コンポーネントに複数の設定項目が提供されており、読者はギャラリーの外観効果をカスタマイズできます。その中で、Image（画像）セクションでは、ユーザーが画像の枠線、角丸、ホバーアニメーションなどのスタイルを調整でき、視覚的なプレゼンテーションを最適化します。Image（画像）の設定では、Normal（通常）とHover（ホバー）という2つの状態を切り替え、それぞれ異なるスタイルを設定できます。Normal（通常）状態では、Border Color（枠線の色）、Border Width（枠線の幅）、Border Radius（枠線の角丸）を調整して、画像の枠線スタイルを制御できます。さらに、CSSフィルター（CSS Filters）をサポートしており、画像に明るさ、コントラスト、彩度などの効果を適用して、視覚的な深みを増すことができます。
Hover（ホバー）状態では、画像にさまざまなインタラクション効果を追加できます。例えば、Hover Animation（ホバーアニメーション）は多くのアニメーション効果をサポートし、マウスが画像にホバーすると動的な変化が表示されます。Animation Duration（アニメーションの継続時間）オプションでアニメーションの速度を調整し、アニメーションがスムーズに再生され、ユーザー体験に合った流れを提供できます。さらに、Overlay（オーバーレイ）やContent（コンテンツ）のオプションを使って、ギャラリーの重ね合わせ効果や画像上のテキスト表示をさらにカスタマイズし、より美しい視覚効果を実現します。これらの設定項目を使用することで、ギャラリーの全体的なスタイルを柔軟に調整し、サイトのデザインスタイルやインタラクションのニーズに合わせることができます。
4、製品の主な利点ガイドブロック
製品の主な利点ガイドブロックでは、コンポーネントの使用方法は前述の「ビジネス説明ブロック」と完全に同じですが、唯一の違いは、このブロックのコンテナに背景画像要素が追加されていることです。この変更により、新しい知識が導入されますので、このセクションでは、コンテナに背景画像を追加する方法について説明します。また、タイトルコンポーネント、テキストエディタコンポーネント、ボタンコンポーネントのパラメータや機能設定については、「ビジネス説明ブロック」のコンテナレイアウトと要素コンポーネント設定を参考にして、練習と実践を行ってください。
（1）コンテナに背景画像を追加する方法
Elementorでコンテナコンポーネントに背景画像を追加するには、コンテナの「スタイル」タブで関連する設定を行う必要があります。まず、背景画像を追加したいコンテナを選択し、左側の設定パネルで「スタイル」タブに切り替えます。その操作エリアで、「背景」設定セクションを展開すると、「背景オーバーレイ」オプションが表示されます。背景タイプで「画像」オプションを選択し、必要な背景画像をアップロードまたはメディアライブラリから選択します。画像を選択した後、さらに画像の表示方法を調整できます。まず、画像の解像度は「オリジナル」または必要に応じて調整できます。次に、「配置」オプションで適切なアライメント方式を選択します。たとえば、「センター」に設定すると、画像が常に中央に表示されます。「背景固定」オプションは、背景がページのスクロールに合わせて移動するかどうかを決定します。背景を常にウィンドウ内で固定したい場合は「固定」モードを選択します。「背景繰り返し」設定では「繰り返さない」を選んで、小さな画像が背景でタイル状に繰り返されるのを避けることができます。また、「表示サイズ」オプションでは、「覆う」を選択することで、画像がコンテナを完全に埋め尽くし、空白がないようにすることができます。これらの設定を使って、ユーザーはコンテナの背景画像表示効果を精密に調整し、ページデザインのニーズに合ったものにすることができます。
5、ブランドストーリーセクション
ブランドストーリーセクションのコンテナレイアウトと使用されている要素コンポーネントは、前述の「製品とビジネスセクション」と一致しています。同様に、タイトルコンポーネント、ボタンコンポーネント、ギャラリー（Gallery）コンポーネントの3つのコンポーネントを使用してコンテンツを読み込み、全体のレイアウトは親コンテナに2つの子コンテナを配置する形式になっています。読者は、前に学んだコンテナパラメータ設定、ネスト配置方法、そしてこの3つのコンポーネントのパラメータとスタイル調整を使うことで、上記の「ブランドストーリーセクション」のレイアウトデザインを実現できます。
6、最新情報セクション
ElementorのPostコンポーネントのメタデータ（Meta Data）を英語形式でページに表示するためには、まずWordPressのサイト言語を英語に変更する必要があります。これは、Elementorの編集画面および一部のメタデータがサイト言語をデフォルトで読み込んで表示するためです。上記のスクリーンショットでは、Postコンポーネントのパラメータ設定とスタイル設定も英語に変更されています。次に、博主はPostコンポーネントの主要な機能設定とスタイル調整方法について説明し、皆さんがこのコンポーネントをより良く活用できるようにします。
（1）Postコンポーネント「内容」タブの設定項目
ElementorのPostコンポーネントでは、「内容」タブに一連の主要な設定項目があり、記事リストのレイアウトや表示方法を制御できます。各設定項目の詳細は以下の通りで、これらの設定を使用することで、ユーザーはPostコンポーネントのコンテンツ表示方法を柔軟に調整し、ページのデザインスタイルにより適したものにできます：
- レイアウト（Layout）： レイアウトセクションでは、ユーザーが記事の表示スタイルを選択できます。「Skin」オプションでは全体的な外観スタイルを設定でき、「Cards」モードでは記事をカード形式で配置できます。次に「Columns」オプションでは記事リストの列数を指定でき、「Posts Per Page」では1ページに表示する記事の数を決定します。
- 画像（Image）： 画像関連の設定には「Show Image」スイッチがあり、記事のサムネイル画像の表示を制御できます。「Masonry」オプションでは、画像と記事ブロックを異なる高さで並べる瀑布流レイアウトを有効にし、視覚効果を高めます。「Image Resolution」では画像の解像度を設定でき、「Medium 0.3x」などの設定で画像の読み込み負担を減らせます。また、「Image Ratio」では画像の縦横比を調整し、全体レイアウトが調和するようにします。
- タイトル（Title）： タイトルセクションには「Show」スイッチがあり、記事タイトルを表示するかどうかを決定できます。また、「Title HTML Tag」ではHTMLタグ（例：H3）を選択し、SEOの重視度やスタイル階層に影響を与えます。
- 概要（Excerpt）： 概要セクションでは記事のサマリー表示を設定できます。「Show」スイッチで概要を表示するかどうかを決定し、「Excerpt Length」では概要の文字数を制御してページのレイアウトを整えます。さらに、「Apply to custom Excerpt」オプションでは、カスタムコンテンツフィールドに概要設定を適用することができます。
- メタデータ（Meta Data）： メタデータセクションでは、記事の日付、時間、カテゴリー、タグ、著者などの情報を表示するかどうかを選択できます。これにより、記事リストがより完全で情報豊富になります。スクリーンショットで見ると、日付（Date）、時間（Time）、コメント数（Comments）などの情報がすべて表示されています。
（2）Postコンポーネント「スタイル」タブの設定項目
ElementorのPostコンポーネントでは、「スタイル」タブに一連の外観調整オプションが提供されており、全体的なレイアウト、画像スタイル、テキストスタイル、間隔設定を含み、記事リストの視覚的な効果がウェブサイトのデザインスタイルに合致するように調整できます。「スタイル」タブのこれらの設定を使用することで、ユーザーはPostコンポーネントの視覚的表現を細かく調整し、ウェブサイトのブランドスタイルと全体的なデザイン要件により適合させることができます。Postコンポーネントのスタイルでは、以下の詳細なカスタマイズが可能です：
- レイアウト（Layout）： レイアウトセクションでは、Postコンポーネントの全体的なサイズを調整でき、カードの幅や高さなどのパラメータを設定します。これにより、記事ブロックの配置方法を最適化し、異なるページレイアウトに適切にフィットさせることができます。
- 画像（Image）： 画像セクションでは、記事のサムネイル画像の詳細なスタイル調整が可能で、画像の角丸（Border Radius）、境界線（Border）、および影の効果（Box Shadow）を調整できます。これらのパラメータを変更することで、画像の視覚スタイルを四角形、丸角、または立体感のあるデザインにすることができます。
- コンテンツ（Content）： コンテンツセクションでは、記事内部の要素（タイトル、概要、「続きを読む」ボタン、メタデータ（Meta Data）のスタイル設定を行います。タイトル（Title）の設定では、フォントサイズ、カラー、フォントウェイト、間隔などを調整し、リスト内のタイトルに階層感を持たせることができます。概要（Excerpt）の部分でもフォントスタイルを調整でき、記事の紹介部分が読みやすく、美しくなるようにします。また、メタデータ（Meta Data）セクションでは、日付、カテゴリー、タグなどの情報のフォントやカラーをカスタマイズし、記事リストの情報階層をより明確にします。
四、Elementorを使用してフッターテンプレートファイルを作成する
フッター部分は本記事の最後のデモンストレーションであり、ページのレイアウトと要素をどのようにカスタマイズして作成するかを解説します。フッターのレイアウトとデザインが完成すれば、ページ全体の構造はほぼ完成し、完全なページが作成されます。フッターテンプレートファイルの作成方法は、ヘッダーテンプレートファイルと同様で、フロントエンドページからElementorのテーマビルダーインターフェースにアクセスする必要があります。テーマビルダーの管理画面内では、左側のテンプレートディレクトリからフッター（Footer）オプションを見つけることができ、このオプションは左側ディレクトリの2番目に位置しています。これをクリックすると、フッターテンプレートの操作管理画面に移動します。この画面で右上の「Add New」ボタンをクリックすることで、新しいフッターテンプレートファイルを作成できます。作成プロセス中、Elementorは一連のプリセットフッタースタイルを提供し、ユーザーは適切なスタイルを選択して、素早くフッターのデザインを完成させることができます。完全にカスタマイズされたレイアウトが必要な場合は、スタイル選択ウィンドウを閉じて、コンテナと要素コンポーネントを自由に使用して、サイトのスタイルに合ったフッターテンプレートをデザインすることも可能です。
1、フッター（Footer）の一般的なレイアウト形式
上記の部分で学習と実践を行ったことで、読者は、単純または複雑なページレイアウトにおいても、前述の親コンテナのパラメーター設定、配置方向、子コンテナのネスト方法を習得すれば、希望するレイアウト形式を実現できることを理解できたと思います。フッターのレイアウトは上の画像のように、それほど複雑ではなく、通常は親コンテナ内に複数の子コンテナをネストして実現され、子コンテナの配置方向はデザイン要件に応じて決まります。今回示したフッターのレイアウトは、3行形式で子コンテナを配置し、その中の2層目の子コンテナには列形式で3つの子コンテナがネストされています。コンテナのレイアウトが決まったら、次はその子コンテナに対応する要素コンポーネントを配置します。
2、フッター（Footer）でよく使われるコンポーネント
フッターはサイトの最下部に位置する構造エリアであり、ページの本体のように情報が密集しているわけではなく、ヘッダーのようにナビゲーション主導ではありませんが、それでも非常に実用的な機能を担っています。例えば、著作権情報、連絡先情報、ソーシャルリンク、サブナビゲーション、サブスクリプションフォームなどが含まれます。実際のデザインでは、フッターの複雑さはサイト全体のスタイルと機能要件によって決まります。非常にシンプルにすることも、比較的リッチにすることも可能です。ブログ運営者は、実際のWebサイト作成の過程で、異なるプロジェクトの要求に基づいて効率的で実用的なフッターコンポーネントの組み合わせを徐々にまとめました。各サイトのポジショニングが異なりますが、これらの一般的なコンポーネントを適切に使用すれば、過度なデザインを加えることなく、構造が明確で美しく統一された、機能的なフッターエリアを作成できます。次に、これらのコンポーネントの機能設定とスタイル設定について紹介し、これらのコンポーネントのスタイルとデザイン計画が一致するようにし、WordPressサイトでプロフェッショナルで品質を感じさせる細部を実現しましょう。
（1）Site Logoコンポーネント
Site Logoコンポーネントは、前述の「Headerテンプレートファイル」セクションで既に使用されていますが、その際には主に全体的なレイアウトとコンポーネントの組み合わせに焦点を当て、Site Logoコンポーネント自体の機能やスタイルの詳細には触れませんでした。したがって、この小節では、このコンポーネントの「コンテンツ」タブと「スタイル」タブのそれぞれを補足説明し、異なるシーンでの使用方法をより柔軟に習得できるようにします。
Site Logoコンポーネントの「コンテンツ」タブでは、ユーザーがWordPressの管理画面で設定したサイトのロゴを使用するか、独自に画像をアップロードしてロゴをカスタマイズすることができます。画像を選択する以外にも、このパネルではロゴのリンク動作（たとえば、クリックした際にホームページに移動するかどうか）、ロゴ画像のサイズ（デフォルト、サムネイル、中程度のサイズなど、WordPressで定義された画像サイズから選択可能）を設定できます。「スタイル」タブでは、ロゴの視覚的な表現に関するさらなるコントロールオプションが提供されます。このパネルでは、ロゴの幅と最大幅をカスタマイズして、異なる解像度での表示要件に適応させることができます。また、画像の不透明度、CSSフィルター効果（グレースケール、輝度、コントラストなど）を設定し、ロゴがページ全体のスタイルに合うように調整できます。さらに、「スタイル」タブでは、ロゴに境界線、角丸、影の効果を追加することも可能で、ロゴをより立体的に表示できます。これらのスタイル項目を調整することで、視覚的な統一感が向上し、異なるデバイスやテーマスタイルでもロゴが最適に表示されるようになります。
（2）タイトルコンポーネント
タイトルコンポーネントの機能設定とスタイル設定については、本記事の第3章「Elementorを使ってページ本体のフレームワークを構築し、コンテンツ要素を追加する」の「業務説明ブロック」セクションで既に解説しました。したがって、ここでは再度詳細に説明することはせず、前述の内容で学んだタイトルコンポーネントの使用方法を実践で試していただければと思います。
（3）アイコンリストコンポーネント
Elementorの「アイコンリストコンポーネント」では、「コンテンツ」タブが各リストアイテムの具体的な内容と配置構造を設定するために使用されます。表示したい各項目を順番に追加し、各項目にアイコン（例えば、チェックマーク、矢印、電話アイコンなど）を指定して情報の認識性を高めることができます。当然、今回のデモンストレーションのようにリストのアイコンを削除することも可能です。アイコンの設定項目で現在のアイコンを削除すれば、アイコンなしで表示できます。各リストアイテムには、カスタムのタイトルテキストを追加でき、リンク先を設定することもできます（例えば、他のページに移動したり、電話をかけるリンクなど）。
「スタイル」タブでは、Elementorがアイコンリストの外観を個別にカスタマイズするための多くのオプションを提供しています。アイコンスタイルとテキストスタイルを細かく調整できます。アイコン部分では、アイコンの色、サイズ、間隔、ホバー効果などをカスタマイズでき、テキスト部分では、フォント、フォントサイズ、行高、色、アイコンとテキスト間の間隔などを設定できます。分割線機能を有効にした場合は、線の太さ、色、スタイルを調整することも可能です。これらのスタイルオプションを使用することで、シンプルなデザインから視覚的に強調された創造的なページまで、ページ全体のデザインスタイルに合わせてアイコンリストを柔軟に適応させることができます。
（4）ソーシャルアイコンコンポーネント
Elementorの「ソーシャルアイコンコンポーネント」では、「コンテンツ」タブが異なるソーシャルプラットフォームのリンクを追加し、管理するために使用されます。ユーザーは、Facebook、Twitter、YouTubeなどのソーシャルアイコンを自由に追加できます。各アイコンは、内蔵のアイコンライブラリを使用するか、SVGアイコンをアップロードすることができ、対応するソーシャルリンクを入力して、リンクが新しいタブで開くかどうかを設定できます。予め設定されたソーシャルプラットフォーム以外にも「カスタム」タイプを選択して、任意のリンクとアイコンを追加することができ、より柔軟な用途が実現できます。これらのコンテンツ設定を通じて、ソーシャルアイコンは訪問者を他のプラットフォームに誘導するだけでなく、視覚的にサイトの外部リンク能力やブランドの連携性を強化することができます。
「スタイル」タブでは、Elementorはソーシャルアイコンの視覚的なカスタマイズオプションを豊富に提供しています。これにより、ソーシャルアイコンが機能的でありながら、美しく表示されるようになります。アイコンのサイズ、間隔、整列方法を設定したり、アイコンの色（公式ブランドカラーやカスタムカラー）を設定できます。さらに、この設定項目では、アイコンの境界線、角丸、背景色を調整することもでき、ホバー効果を設定して色反転、ズームアニメーション、または影の変化を追加することができます。これにより、ソーシャルアイコンはユーザーのインタラクションに応じて動的に表示されます。これらのスタイル設定を活用すれば、シンプルでフラットなスタイルのソーシャルエリアや、視覚的に目立つソーシャルガイドエリアなど、さまざまなデザインに対応できます。
（5）テキストエディタコンポーネント
Elementorの「テキストエディタコンポーネント」では、「コンテンツ」タブがテキスト内容の入力と基本的なレイアウト設定を担当します。ユーザーはテキストエディタボックス内に必要なテキストを直接入力できます。このコンポーネントは、WordPressのクラシックエディターに似たWYSIWYG（所見即得）エディターを使用しており、太字、斜体、リンク挿入、整列設定などのレイアウト操作が可能です。動的なコンテンツ（例えば、記事タイトルや日付など）を挿入する場合は、Elementorの動的タグ機能を使用して実現できます。全体的に、このタブの設定はコンテンツの充填と構造の表示に重点を置いており、本文の段落、紹介文、著作権情報などのテキストベースのエリアに適しています。
「スタイル」タブでは、テキスト内容の外観スタイルをカスタマイズできます。文字色、フォントタイプ、フォントサイズ、文字の太さ、行高、文字間隔などのパラメータを設定し、ページ全体のビジュアルスタイルに合わせることができます。
3、フッターテンプレートファイルの公開操作と表示条件の設定
Footer（フッター）テンプレートファイルはHeaderテンプレートファイルと同様に、WordPressサイトのグローバル部分です。したがって、表示条件の設定もHeaderテンプレートファイルと同様に、すべてのページで表示されるように設定します。読者の皆さんは、上記の図で示された手順とオプションに従って、フッターテンプレートファイルの公開および表示条件の設定を完了することができます。
4、Elementorエディターで完成したページの展示
結論：上記に示された完成したページのスクリーンショットは、筆者が本チュートリアルを執筆する際、実際に操作しながら解説して作成したページの成果物です。WordPressのバックエンドでページを新規作成するところから、Elementorを使ってヘッダー、メインコンテンツ、フッターの各要素と構造を作成するまで、各ステップ、各設定は実際の開発プロセスに基づいて実演したものです。言うなれば、最終的に呈示されたページの効果は、本文の内容そのものの直接的な成果です。このゼロから始めるElementorを使ったWebサイト作成のチュートリアルが、WordPressページデザイン開発を学んでいる皆さんにとって、明確な参考と実用的なテクニックを提供できることを願っています。操作中に問題が発生した場合は、該当する章に戻って詳細を確認してみてください。もし、すでに全体のプロセスを完了した場合は、この基盤の上にさらに個性的なデザインを追加し、さらに自分だけの高品質なウェブサイトページを拡展してみてください。
最後に、もしこのチュートリアルを読んでWordPressサイト作成に専門的な技術支援が必要だと感じた場合、またはElementorで作成したページデザインをさらに高いレベルに引き上げたいと思った場合は、ぜひロジックシー・デジタルテクノロジー株式会社にご相談ください。当社はWordPressウェブサイトのデザインとカスタム開発を専門とし、豊富な実務経験を活かして、企業ブランドの立ち位置やビジネスニーズに応じた、ユーザー体験と転換目標に適した専門的なウェブサイトページを作成します。企業サイト、ECプラットフォーム、多言語対応の外国向けサイトなど、どんな種類のウェブサイトにも、高効率で安定性があり、拡張性のあるサイト作成ソリューションを提供できます。
この記事はロジックシー・デジタルテクノロジー株式会社（SZLOGIC）によって著作権を所有しています。個人的なシェアや学習は歓迎しますが、無断で商業目的での使用や転載は厳禁です。
