Weebly でドロップダウン タブを作成する方法

Weebly Web サイト エディターのドラッグ アンド ドロップ インターフェイスは、ドロップダウン タブなどの Web サイト要素を作成するタスクを合理化します。基礎となるコードの知識は必要ありません。デフォルトでは、Weebly はサイトのすべてのページをリンクとしてナビゲーション バーに並べて表示します。多くのページがあるサイトの場合、これにより混乱が生じ、訪問者が Web サイトをナビゲートするのが難しくなる可能性があります。混乱を避けるために、余分なページをサブページとして分類し、ドロップダウン リストにリンクとして表示します。

ステップ 1

Weebly アカウントにサインインし、ドロップダウン タブを作成するサイトの横にある [編集] ボタンをクリックします。

ステップ 2

[ページ] ボタンをクリックして、Web サイトの既存のページのリストを表示します。サイトの新しいページをまだ作成していない場合は、デフォルトのホーム、概要、連絡先ページのみが表示されます。

ステップ 3

[ページを追加 +] ボタンをクリックし、オプションのリストから [標準ページ] を選択します。ナビゲーション メニューに表示する名前を [ページ名] 入力ボックスに入力します。ドロップダウン メニューに表示される実際のページは、すべてこのメイン ページのサブページです。たとえば、サイトのすべてのレシピ ページを一覧表示するドロップダウン メニューを作成する場合は、ページ名として引用符を付けずに「Recipes」を使用します。

ステップ 4

[ページを追加 +] をクリックし、今度はドロップダウン リストに表示する実際のページを選択します。ページは、標準ページ、ブログ ページ、ストア ページ、または Weebly サイトにない外部ページへのリンクです。

ステップ 5

[ページ名] 入力ボックスのドロップダウン リストに表示するページの名前を入力します。たとえば、メニュー項目がアップル クランブルのレシピのページにリンクしている場合は、「アップル クランブル」と入力します。

ステップ 6

新しいページ アイコンをクリックして、ナビゲーション バーに表示するメイン ページ アイコンの下と右にドラッグします。マウス ボタンを放すと、ページ名アイコンが所定の位置にスナップされ、サブページになったことを示します。

ステップ 7

[詳細設定] をクリックし、ページ タイトル、説明、メタ キーワード、ヘッダーまたはフッター コード (該当する場合) の詳細を入力します。 [保存して編集] をクリックして、ページに実際のコンテンツを編集または追加します。

ステップ 8

サイトにページを追加し、関連するメイン ページの下にサブページとして配置して、ドロップダウン タブに追加のエントリを作成します。ページ リストでサブページ アイコンをクリックして上下にドラッグし、ドロップダウン メニューでの位置を並べ替えます。

ステップ 9

[公開] をクリックして、新しいドロップダウン メニューで Weebly サイトを更新します。

ヒント

各サブページは、ナビゲーション バーにフライアウトとして表示される独自のサブページを持つことができます。

[ページ] リストでサブページの名前をクリックし、[ナビゲーション メニューでページを非表示にする] をクリックして、そのページがドロップダウン リストに表示されないようにします。こうすることで、ナビゲーション メニューを乱雑にすることなくページを整理できます。 [リンクの作成] オプションを使用してハイパーリンクまたはボタンを作成し、[リンク先] ウィンドウから非表示のページを選択することで、訪問者がこれらの非表示のページにアクセスできるようにすることができます。