ヘルプセンター
ヘルプセンター
スタート
Tilda の仕組み
新しいページを作成する
ページをコピーする
ページを転送する
ページの並べ替え
サイト設定
ドメイン名の購入
ドメイン名の接続
DNSの設定
カスタムドメインのエラーのトラブルシューティング
ホームページ
ヘッダーとフッター
ウェブサイトのフォントを設定する
コード輸出
プロジェクト移管
無料tilda.ws サブドメイン
カラー設定
URLリダイレクトの作成
HTTPSの設定
ページフォルダー
ページ編集
ナビゲーション・メニューの追加
アンカーと内部リンク
モバイルデバイスでの視聴
HTMLコードを埋め込む
グーグルマップを追加
多言語ウェブサイトの作成
オンライン出版用の画像を準備する
カバーを投げる
ノン・ブレイキング・スペース&ソフト・ハイフン
ページ出版
フィードバック・ウィジェットを追加する
フェイスブックでプレビュー
コメント欄の追加
インスタグラムのフィードを埋め込む
投稿一覧またはインデックスページ
オンラインストアと支払い
オンラインストアと決済処理
オンラインストアに商品を追加する
ショッピングカートの設定
商品の直接販売
支払いシステムの割り当て
ストライプの設定
ペイパルの設定
2Checkoutの設定
注文通知の送信
オンライン決済システムなしで販売する
単一製品の販売
製品バリエーションの追加
配送オプション
補完製品
プロモコード(割引)を作成する
フォーム
データ取得フォームの設定
データ収集フォーム
電子メール
グーグル シート
メールチンプ
グーグルフォーム
センドグリッド
センディンブルー
セルジー
コンモ
パイプドライブ
Zoho CRM
トレロ
テレグラム
スラック
ザピア
メーラーライト
ノーティオン
セールスフォース
ハブスポット
ウェブフック
カスタムスクリプト
フォームのミスを避ける
マンデードットコム
アナリティクス
ウェブサイト統計の追跡
グーグル・アナリティクス
グーグルタグマネージャー
目標達成率の提出
SEO
オンライン・プロモーション
Zero Block
カスタムブロックの作成
レスポンシブデザイン
キーボードショートカット一覧
アニメーション
ステップ・バイ・ステップ・アニメーション
Figmaからのインポート
メールキャンペーンビルダー
電子メールの作成、編集、送信
プランと請求
プラン
価格と支払い
自動購読更新のキャンセル
入金確認
Tilda ビジネス・プランへのアップグレード
特別プラン
開発者向け
HTMLコードを埋め込む
コード輸出
ウェブフック
Tilda API
WordPressプラグイン
tilda ヘルプセンター
ウェブサイト・メニューの作り方
ウェブサイトにナビゲーションメニューを追加するには、ブロックライブラリ → メニューでお好みのメニューブロックを選択してください。メニューはブロックのコンテンツパネルでカスタマイズできます。
メニュー項目とリンクの追加方法
読む
全ページにメニューを作成する方法
読む
メニューを使ってページ内を移動する方法
読む
多言語ウェブサイトのメニューの作り方
読む
セカンドレベルメニューの作り方
読む
メニューの作り方Zero Block
読む
このガイドを読んで、メニュー・デザインについて、その仕組みと見栄えについてもっと知ってください:
ウェブサイトのナビゲーション・メニューの作り方
このガイドでは、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つの方法がある:
メイン・メニュー・ブロックにサブメニュー項目を追加する
メニューブロックをページに追加する。
ブロックのコンテンツパネル → メニューアイテム → サブアイテムを追加すると、左側に「プラス」アイコンが表示される。
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ブロック(メニュー:第2階層)
メイン・メニュー・ブロック
МЕ601ブロック(メニュー:第2階層)
メイン・メニュー・ブロック
ME601ブロックの使用例
メニューの作り方Zero Block
ブロックの固定を設定するには、Zero Block → Settings → "Position and Overflow "で、"Fixed "を選択してブロックを固定する。
ブロックはページの上部または下部に固定でき、Xピクセル後に表示されるように設定できます(アピアランス・オフセット)。この場合、「フェードイン」と「スライドアップ/ダウン」の2種類の出現アニメーションをカスタマイズできます。例えば、ウェブサイトのヘッダーを一度に表示するのではなく、ある程度スクロールした後に表示させたい場合などに便利です。
その他のメニューの種類や、スクロールしても表示される固定メニューの作り方、1ページに2つのメニューを追加する方法、タブの作り方などについては、「ウェブサイトのメニューデザインを7つ紹介」の記事をご覧ください。
ウェブサイトのメニューデザイン7選
メニューデザインのオプション、カスタマイズ、ヒント、例
さらに詳しく
ウェブサイトのナビゲーションを改善する方法
わかりやすく使いやすいウェブサイトを作るための実践的なヒント
さらに詳しく
製造元
Tilda