ウェブサイト・メニューの作り方

ウェブサイトにナビゲーションメニューを追加するには、ブロックライブラリ → メニューでお好みのメニューブロックを選択してください。メニューはブロックのコンテンツパネルでカスタマイズできます。
このガイドを読んで、メニュー・デザインについて、その仕組みと見栄えについてもっと知ってください:
このガイドでは、7種類のナビゲーション・メニューを取り上げ、すべてのメニュー・タイプを作成するためのハウツーと、それぞれのメニューをどこで使うかのヒントを掲載しています。
1
メニュー項目とリンクの追加方法
メニュー項目を追加するには2つの方法がある。
1.メニュー項目とリンクを手動で追加する
例えば、
http://mysite.com/about

または、相対リンクを設定します:
/について

ページのURLはページ設定で設定できます:


https://tilda.cc/page/?pageid=509765

これは、あなた以外にはページが読み込まれないからです。メニューのリンクは機能しません。
2.ヘルパーを使ってリンク(URL)を追加する
メニュー項目にマウスポインタを合わせます。リンクを追加するための2つのオプションが表示されます:ページへのリンク」と「ブロックへのリンク」です。
ページへのリンク」をクリックすると、ウェブサイトのページ一覧が表示されます。リストからページを選択すると、URLが自動的に配置されます。
ページ上のブロックにリンクを追加したい場合は、「ブロックへのリンク」をクリックしてください。ページが表示されますので、お好きなブロックを選択してください。ユーザーがメニュー項目をクリックしたときに移動させたいブロックをクリックします。アンカーリンクが自動的に追加されます。
2
全ページにメニューを作成する方法
ウェブサイトの全ページにメニューを設定するには、プロジェクト内に新しいページを作成し、そこにメニューブロックを追加して設定します。その後、サイト設定 → ヘッダーとフッターで、このページをヘッダーとして割り当てます。その後、プロジェクトダッシュボードに戻り、「すべてのページを公開」をクリックします。

詳しくは「ヘッダーとフッター」のガイドをお読みください。
3
メニューを使ってページ内を移動する方法
1つのページ内にナビゲーション・メニューを作成するには、「リンク」フィールドにブロックIDを記入します(例:#rec2081259)。ブロックIDはブロック設定で確認できます。

カスタムリンク、例えば#linkを使いたい場合は、アンカーリンクを作成します
アンカーリンクのスムーズスクロールを有効にするには、「その他」カテゴリのT178ブロックをページ下部に追加する。
4
バイリンガルウェブサイトのメニューの作り方
2ヶ国語のウェブサイトを作成するには、2つのプロジェクトを作成する必要があります(Tilda 要ビジネスプラン)。まず片方の言語でウェブサイトを作成する方が簡単かもしれません。その後、プロジェクトをコピーして翻訳すればよいのです。
ページをコピーするには、ページ設定 → アクション → ページを複製。ページを他のウェブサイトに移動するには、ページ設定 → アクション → ページ移動。

残念ながら、ウェブサイト全体を複製することは不可能です。しかし、私たちはそれを可能にするために取り組んでいます。
両方のプロジェクトのヘッダーを設定し、ME204メニューブロックまたは以下のメニューのいずれかを追加する:ME301、ME302、ME303、またはハンバーガーメニューを追加する:ME401、ME402、ME304。ブロックのコンテンツパネルを開き、言語とウェブサイトのリンクを追加します。
5

セカンドレベルメニューの作り方
セカンドレベルメニューを作るには2つの方法がある:
  1. メイン・メニュー・ブロックにサブメニュー項目を追加する
メニューブロックをページに追加する。

ブロックのコンテンツパネル → メニューアイテム → サブアイテムを追加すると、左側に「プラス」アイコンが表示される。

2階層目を追加するには、「プラス」アイコンをクリックし、サブメニューのタイトルとそのURLを追加する。を数回クリックして、必要な数のサブ項目を追加します。

デスクトップでは、マウスカーソルを置くと第2レベルのメニューがドロップダウンリストで表示され、モバイルデバイスではタップすると表示される。
重要:サブメニューが使用されているメインメニューは、サブメニューが含まれている場合はクリックできません。
ウェブサイトの訪問者がどのメニュー項目に第2レベルメニューが含まれているかを簡単に理解できるように、設定 → サブメニュー設定で「第2レベルメニューアイコンを表示する」チェックボックスを選択します。
2.ME601/ME601Aブロックを使用する。
任意のメニューブロックをページに追加してください。次にME601ブロック(Menu: second level)を追加します。

ME601では、メインメニューの項目にサブメニューを追加することができます。デスクトップでマウスを置いたり、モバイルデバイスでタップすると、ドロップダウンメニューとして表示されます。

動作方法:
1) ME601ブロックの中で:リンクフックを指定します(例:#submenu:more)。
2) メインメニューの中で:メニューアイテムのリンクとして、ブロック→メニューアイテムのコンテンツパネルに#submenu:moreリンクを追加します。

重要:メインメニューアイテムはクリックできません。リンクを貼りたい場合は、この項目をドロップダウンメニューに複製してください。

注意:"#submenu:more "の "more "はどんな単語でもかまいません:例えば、#submenu:portfolioや#submenu:aboutusなどです。
ME601ブロックの使用例
メニューの作り方Zero Block
ブロックの固定を設定するには、Zero Block → Settings → "Position and Overflow "で、"Fixed "を選択してブロックを固定する。
ブロックはページの上部または下部に固定でき、Xピクセル後に表示されるように設定できます(アピアランス・オフセット)。この場合、「フェードイン」と「スライドアップ/ダウン」の2種類の出現アニメーションをカスタマイズできます。例えば、ウェブサイトのヘッダーを一度に表示するのではなく、ある程度スクロールした後に表示させたい場合などに便利です。
その他のメニューの種類や、スクロールしても表示される固定メニューの作り方、1ページに2つのメニューを追加する方法、タブの作り方などについては、「ウェブサイトのメニューデザインを7つ紹介」の記事をご覧ください。
ウェブサイトのメニューデザイン7選
メニューデザインのオプション、カスタマイズ、ヒント、例
ウェブサイトのナビゲーションを改善する方法
わかりやすく使いやすいウェブサイトを作るための実践的なヒント
製造元
Tilda