ホームページのメニューと呼ばれるナビゲーションを整えて、ホームページの土台を作ります。

• 024-1 メニューの形
• 024-2 メニュー編集の流れ
• 024-3 メニュー編集ツールの表示
• 024-4 メニューの変更
  • 024-4-1 １階層目のページを作る
  • 024-4-2 第２、第３階層目のページを作る
  • 024-4-3 ページを削除する
• 024-5 階層を持つページを分かり易く表示する

• 024-6 ナビゲーションのプチカストマイズ

Jimdo により自動作成されたサンプルページには「ホーム」「サービス内容」「事例」などのメニュー（ナビゲーション）が並んでいます。更に、メニューの下にサブメニューもあります。

ナビゲーションの形

standard（スタンダード）:

標準ナビゲーション

dropdown（ドロップダウン）:

カーソルを合わせるとサブページがドロップダウンで表示されます

slide（スライド）:

ナビゲーションアイコンをクリックすると左からナビゲーションがスライド表示されます

breadcrumbs（パンくず）:「Rome」レイアウトなど

上位階層から現在のページまでを辿る形のナビゲーション（例：会社概要＞アクセス）

このメニューを自分のホームページのデザインに合わせて編集します。

まずホームページの構成をデザインしておいて、その構成に沿って最初にナビゲーションの構造を作り、各ページの内容は後から作っていくこと。

ホームページのデザインについては、003 完成形のデザインで記述した通り。

そこでデザインしたページ構成（下図）を、ナビゲーションの編集で使います。

サンプルレイアウトの「初期のナビゲーション」から「デザインしたナビゲーション」への編集は、

１）初期状態のナビゲーションに、デザインしたページ構成でのナビゲーションを追加する（ページの追加）

２）初期状態でのページ構成でのナビゲーションを削除する（ページの削除）

の流れで編集します。

ページの作成、削除、上下の並び替え、階層化は、以下のアイコンにて行う。

ここでは、実際に作成するホームページのデザイン文書のページ構成を元にメニューを変更する。

サンプルのメニューからデザインしたメニューへの変更は、２ステップで行う方が好ましい。

• サンプルのオリジナルメニューに、デザインしたメニューを追加する
• サンプルのオリジナルメニューを削除する

ナビゲーション上で階層を持つページは、上位のページをクリックして下位のページが表示される仕組みとなっています。

クリックせずに、下位階層を持つページだとわかりやすくする表示する方法です。

たとえばページタイトルに記号を追加することで、階層化されているページがあると、わかりやくすなります。

第２階層の文字列が長いと、標準では２行になってしまう。そのため横幅を変えることを調べました。レイアウトによっては変更できないものもある。

以下のカストマイズ用のCSSを、［管理メニュー］の［基本設定］から［ヘッダー編集］に貼り付け［保存］する。

Malaga の場合：

.cc-nav-level-1 li a {

     width: 220px !important;

     }

ナビゲーション第一階層の項目数や文字数が多くなると、２行にまたがって表示される。極端に項目数や文字数が多い場合は別だが、多少の調整が可能な場合がある。

以下のカストマイズ用のCSSを、［管理メニュー］の［基本設定］から［ヘッダー編集］に貼り付け［保存］する。

Malaga の場合：

.jtpl-navigation {

     margin: 6px 6px 0 !important;

     }