EdCommerceページのレイアウトをカスタマイズする

Last updated: October 16, 2026

初期サイト作成後にEdCommerceサイトのページレイアウトをカスタマイズする方法を説明します。次の3つの領域を扱います：(1) ページ詳細 — Settings > Ecommerce > Ecommerce Detailsで基本的な識別情報と設定を編集します（デフォルトパレットまたはカスタムHEXによる色、ロゴ、タイムゾーン、キャンペーンの開始日と終了日、サイトタイトル、URL、説明、プライバシーポリシー、デフォルト言語、デフォルト通貨を設定し、Saveをクリックします）；(2) テンプレートとレイアウト — Settings > EdCommerce > Searchでメイン検索（ホームページ）のノーコードレイアウトテンプレートを切り替え、Settings > EdCommerce > Resultsで検索結果ページのテンプレートを切り替え、Settings > Providers > 3点アイコン > Customize Provider Pageでプロバイダーページを切り替えます；(3) ナビゲーションメニュー — Settings > EdCommerce > Navbarでナビゲーションバーを編集します（Search、Proposals、Contactが初期設定されています）。項目のオン／オフの切り替え、ドラッグ＆ドロップによる項目の並べ替えや階層化、「Add New Page」による新しい項目の追加（外部URLまたは既存のEdCommerceページ）、サイトロゴのカスタム「Logo Redirect」の設定ができます。

サイト作成プロセスでは、ロゴ、フォントの種類、配色、タイトル、説明、URLなどの初期情報をすでに追加しています...

この記事では、サイトの基本的な項目を編集する方法、テンプレートを使ってレイアウトをカスタマイズする方法、ナビゲーションメニューを編集する方法について説明します。

ページ詳細

このセクションでは、サイトのこれらの基本的な項目をすべて編集する方法を説明します（何も変更しない場合は、この手順をスキップできます）。

  • Settings > Ecommerce > Ecommerce Detailsに移動します

このセクションでは、次の項目を編集できます：

  • 色：デフォルトの色のいずれか、または独自のHEXカラー（例：#FFFFFF）を追加できます
  • ロゴ
  • タイムゾーン
  • eコマースキャンペーンの開始日と終了日
  • サイトのタイトル
  • URL
  • サイトの説明
  • プライバシーポリシーを追加
  • デフォルト言語を設定
  • デフォルト通貨を設定

ページを閉じる前に、変更内容を保存することを忘れないでください。ページ下部に「save」ボタンがあります。

テンプレートとレイアウト

すでにご存じかもしれませんが、EdCommerceページのコンテンツは完全にカスタマイズできます。

さまざまな色、フォント、その他の設定を選択できるだけでなく、このコンテンツの表示方法も管理できます。使いやすいテンプレートを利用すれば、コーディングの知識がなくてもページのレイアウトをカスタマイズできます。

メイン検索のテンプレート

ホームページには2種類のスタイルから選択でき、サイトでプログラムを検索する際の学生の体験をカスタマイズできます。

Settingsページ > EdCommerce > Searchに移動し、お気に入りのスタイルを選択してください。

検索結果ページのテンプレート

学生が検索を行うと、結果ページに移動します。3種類の異なるスタイルから選択して、これらの結果の表示方法をカスタマイズすることもできます。

「設定」ページに移動し、「エドコマース」を選択してから「結果」を選択し、最も好みに合うテンプレートを選択してください。

プロバイダーページのテンプレート

これらのテーマまたはテンプレートは、プロバイダーページ向けに3種類の異なるレイアウトスタイルを提供します。これらのスタイルによって、教育者の情報が学生にどのように表示されるかが決まります。

スタイルを選択するには、エドコマースの設定ページに移動し、「プロバイダー」を選択して、カスタマイズしたいプロバイダーの横にある3点アイコンをクリックし、「プロバイダーページをカスタマイズ」を選択します。

ナビゲーションメニュー

ナビゲーションバー（navbar）とも呼ばれるナビゲーションバーは、エドコマースサイトのメニューとして機能します。学生はサイトのさまざまなセクションに簡単にアクセスできます。

サイトのメニューを編集するには、設定ページ > エドコマース > ナビゲーションバーに移動します。

ここでは、デフォルトで次のページが表示されます：

  • 検索
  • 提案
  • お問い合わせ

メニュー項目を非表示または再表示する方法

エドコマース設定の「ナビゲーションバー」セクションには、ナビゲーションバーで利用可能なすべての要素（またはページ）の一覧があります。

これらの要素をメニューに表示するかどうかは、自由に選択できます。表示または非表示にするには、オンまたはオフに切り替えるだけです。この操作により、それぞれウェブサイトのメニューに項目が追加または削除されます。

メニュー項目を整理する方法

ドラッグアンドドロップ機能を使えば、メニュー内のページを簡単に整理できます。並べ替えたい項目（ページ）をクリックし、メニュー内の希望する位置までドラッグするだけです。

さらに、関連するページをまとめることで、より整理された使いやすいメニューを作成できます。これは、メインメニュー項目の下にサブ要素を追加することで行えます。

これを行うには、グループ化したいページをクリックしてドラッグし、サブ要素にしたいメインメニュー項目の上にカーソルを合わせます。マウスボタンを放してそこにドロップすると、選択したメイン項目の下に効果的にグループ化されます。

これらの変更はウェブサイトのナビゲーションに反映され、訪問者が探しているものを見つけやすくなります。

メニューに新しい項目を追加する方法

メニューに新しい項目を追加するには、「新しいページを追加」ボタンをクリックします。

次に、タイトルを入力し、リンク先のページを指定します。

  • URLを入力して外部ウェブページへのリンクを追加することもできます。
  • または、「ページ」をクリックして、エドコマースサイトに既に存在するページから選択することもできます。ページは一覧で表示されます。

ナビゲーションバーに変更を加えたら、必ず「保存」をクリックしてください。

サイトのロゴにリンクを追加する方法

ナビゲーションページの上部に、「ロゴのリダイレクト」ボタンがあります。

それをクリックすると、ユーザーがあなたのEdCommerceサイトのロゴをクリックしたときに表示されるカスタムリンクを追加できます。

ウェブサイトのホームページまたはEdCommerceサイトのホームページにリンクすることをおすすめします。

以下の簡単な手順に従うことで、情報を最適に整理するためのドロップダウンオプションを備えた、サイト用のカスタマイズされたメニューを簡単に作成できます。

これらの変更を確認するには、画面左上のEdCommerceロゴをクリックし、「EdCommerceプレビュー」を選択してください。