ウェブサイトメニューの設定方法
Webサイトにナビゲーションメニューを追加するには、[ライブラリ→ブロックメニュー]に移動し、好みに合ったメニューブロックを選択します。ブロックの[コンテンツ]パネルでメニューをカスタマイズできます。
このガイドを読んで、メニューのデザイン、その仕組み、および外観の詳細を確認してください。
このガイドでは、6 種類のナビゲーション メニューについて説明し、すべての種類のメニューを作成するためのハウツーと、それぞれをどこで使用するかについてのヒントを示します。
1
メニュー項目とリンクを追加する方法
メニュー項目を追加するには 2 つの方法があります。
1. メニュー項目とリンクを手動で追加する
ページへのフルリンクを設定します。
http://mysite.com/about
または相対リンクに入れてください:
/に関しては
ページの URL は [ページ設定] で設定できます。
http://mysite.com/about
または相対リンクに入れてください:
/に関しては
ページの URL は [ページ設定] で設定できます。
ページの編集中に URL バーに表示されるページの内部アドレスを使用しないでください。
https://tilda.cc/page/?pageid=509765
これは、ページがあなた以外には読み込まれないためです。メニューのリンクが機能しません。
https://tilda.cc/page/?pageid=509765
これは、ページがあなた以外には読み込まれないためです。メニューのリンクが機能しません。
2. ヘルパーを使用してリンク (URL) を追加する
メニュー項目の上にマウス ポインターを置きます。リンクを追加するための 2 つのオプションが表示されます。[ページへのリンク] と [ブロックへのリンク] です。
[ページへのリンク] をクリックして、Web サイトのページのリストを表示します。リストからページを選択すると、そのページの URL が自動的に配置されます。
ページ上のブロックへのリンクを追加する場合は、[ブロックへのリンク] をクリックします。ページが表示されるので、必要なブロックを選択できます。ユーザーがメニュー項目をクリックしたときに表示されるブロックをクリックします。アンカーリンクが自動的に追加されます。
2
すべてのページのメニューを作成する方法
Web サイトのすべてのページにメニューを設定するには、プロジェクト内に新しいページを作成し、そこにメニュー ブロックを追加して構成します。次に、[サイト設定] → [ヘッダーとフッター] に移動し、このページをヘッダーとして割り当てます。その後、プロジェクト ダッシュボードに戻り、[すべてのページを公開] をクリックします。
詳細については、「ヘッダーとフッター」ガイドをお読みください。
詳細については、「ヘッダーとフッター」ガイドをお読みください。
3
メニューを使用して 1 つのページ内を移動する方法
単一ページ内にナビゲーション メニューを作成するには、「リンク」フィールドにブロック ID (例: #rec2081259) を入力します。ブロック ID はブロック設定で確認できます。
#link などのカスタム リンクを使用したい場合は、アンカー リンクを作成できます。
#link などのカスタム リンクを使用したい場合は、アンカー リンクを作成できます。
アンカーリンクのスムーズなスクロールを有効にするには、「その他」カテゴリからページの下部にT178ブロックを追加します。
4
バイリンガルウェブサイトのメニューの作り方
2言語のWebサイトを作成するには、2つのプロジェクトを作成する必要があります(Tildaビジネスプランが必要です)。最初に 1 つの言語で Web サイトを作成する方が簡単な場合があります。その後、プロジェクトをコピーして翻訳できます。
ページをコピーするには、[ページ設定] → [アクション] → [複製] ページに移動します。ページを別の Web サイトに移動するには、[ページ設定] → [アクション] → [移動] ページに移動します。
残念ながら、ウェブサイト全体を複製することは不可能です。ただし、それを可能にするために取り組んでいます。
残念ながら、ウェブサイト全体を複製することは不可能です。ただし、それを可能にするために取り組んでいます。
ME204 メニュー ブロック、または次のメニューのいずれか (ME301、ME302、ME303、またはハンバーガー メニュー: ME401、ME402、ME304) を追加して、両方のプロジェクトのヘッダーを設定します。ブロックの [コンテンツ] パネルを開き、言語と Web サイトのリンクを追加します。
5
セカンドレベルメニューの作り方
第 2 レベルのメニューを作成するには、次の 2 つの方法があります。
- サブメニュー項目をメイン メニュー ブロックに追加する
ページにメニュー ブロックを追加します。
メニュー項目→サブ項目の追加ブロックのコンテンツパネルに移動する→、左側に「プラス」アイコンが表示されます。
2番目のレベルを追加するには、「プラス」アイコンをクリックし、サブメニューのタイトルとそのURLを追加します。「+」を数回クリックして、必要な数のサブアイテムを追加します。
メニュー項目→サブ項目の追加ブロックのコンテンツパネルに移動する→、左側に「プラス」アイコンが表示されます。
2番目のレベルを追加するには、「プラス」アイコンをクリックし、サブメニューのタイトルとそのURLを追加します。「+」を数回クリックして、必要な数のサブアイテムを追加します。
デスクトップでは、マウスをホバーするとドロップダウン リストに第 2 レベルのメニューが表示され、モバイル デバイスではタップすると表示されます。
重要: サブメニューが使用されているメイン メニュー項目は、サブ項目が含まれている場合はクリックできません。
Web サイトの訪問者が第 2 レベルのメニューを含むメニュー項目を簡単に理解できるようにするには、[設定] → [サブメニューの設定] で [第 2 レベルのメニューアイコンを表示] チェックボックスをオンにします。
2. ME601/ME601A ブロックを使用する
メニュー ブロックをページに追加します。これが第 1 レベルのメニューになります。次に、ME601 ブロックを追加します (メニュー: 第 2 レベル)。
ME601 では、メイン メニューの項目にサブメニューを追加できます。デスクトップ上にマウスを置くか、モバイルデバイス上でタップすると、ドロップダウン メニューとして表示されます。
使い方：
1) ME601 ブロック内: #submenu:more などのリンクフックを指定します。
2) メイン メニュー: ブロックの [コンテンツ] パネル → [メニュー項目] に #submenu:more リンクをメニュー項目のリンクとして追加します。
重要: メイン メニュー項目はクリックできなくなります。リンクを設定したい場合は、この項目をドロップダウン メニューに複製します。
注: 「#submenu:more」の「More」には、任意の単語を使用できます (例: #submenu:portfolio や #submenu:aboutus)。
ME601 では、メイン メニューの項目にサブメニューを追加できます。デスクトップ上にマウスを置くか、モバイルデバイス上でタップすると、ドロップダウン メニューとして表示されます。
使い方：
1) ME601 ブロック内: #submenu:more などのリンクフックを指定します。
2) メイン メニュー: ブロックの [コンテンツ] パネル → [メニュー項目] に #submenu:more リンクをメニュー項目のリンクとして追加します。
重要: メイン メニュー項目はクリックできなくなります。リンクを設定したい場合は、この項目をドロップダウン メニューに複製します。
注: 「#submenu:more」の「More」には、任意の単語を使用できます (例: #submenu:portfolio や #submenu:aboutus)。
ME601ブロックの使用例
Zero Blockを使用してメニューを作成する方法
ブロック固定を設定するには、[設定]Zero Block →を開き、[位置とオーバーフロー]→で[固定]を選択してブロックをロックします。
ブロックはページの上部または下部に固定でき、X ピクセルの後に表示されるように設定できます (表示オフセット)。この場合、外観アニメーションの 2 つのバリエーション (フェードインまたはスライドアップ/ダウン) のいずれかをカスタマイズできます。これは、たとえば、Web サイトのヘッダーを一度に表示するのではなく、ある程度スクロールした後に表示したい場合に便利です。
他のメニュー タイプについて読み、スクロール時に表示される固定メニューの作成方法、ページに 2 つのメニューを追加する方法、タブの作成方法などについては、「Web サイトの 6 つのメニュー デザインを探索する」の記事をご覧ください。
