無料で始める

ナビゲーションの紹介

ナビゲーションメニュー

ナビゲーションメニューは、ホームページの案内板の様なもので、簡単に言えばリンクの集まりです。
作成したページ同士をつなげ、ページから別のページへの移動を可能とします。
ナビゲーション
ナビゲーションメニューは全ページの同じ場所に配置されます。そのため、どのページからも迷うことなくページ移動が行えます。
また、ナビゲーションメニューを見ることで、他にどんなページがあるのかを確認でき、ホームページ全体の構成をざっくりと掴むことができます。
ナビゲーション
ナビゲーションを変更すると、ナビゲーションに合わせてホームページ全体の見た目も変化します。

ナビゲーションのデザイン

帯(オビ)

ナビゲーションが、ホームページの上部に表示されます。
横幅いっぱいに広がるため、ホームページを大きく見せることが出来ます。
オビナビゲーション
大きな特徴として、画面をスクロールしても消えずに、常に画面上部に表示されています。
そのため閲覧者は、いつでも好きな時に別のページに移動できます。
ページ名が長い場合、省略して表示されます。
マウスカーソルをナビゲーションの上に載せると、ページ名が表示され、省略されていたページ名を確認することが出来ます。
文字サイズ
スマートフォン等の画面幅が狭い場合や、ページ数が多く1行に収まらない場合は、右上に「>>」が表示されます。
「>>」を押すと隠れていたページが表示され、もう一度押すと再度隠すことが出来ます。
文字サイズ
1行に表示できるページのリンク数は、文字数と画面の幅によって自動で調節します。
デモサイトを確認

トグル

パソコンでホームページを見た時と、スマートフォンで見た時で表示が切替わります。
パソコン様のデザインは、左側にページのリストが表示されます。
スマートフォン用のデザインは、右上にボタンが表示され、ボタンを押すとページのリストが表示されます。
デモサイトを確認
文字色背景色設定例

ナビゲーションの設定

crayon(クレヨン)管理画面のトップページから「デザイン」へ移動し「ナビゲーション」を選択します。
文字色背景色設定例
デザインを選択すると、上にあるプレビューが変化します。
リンクは「自動」と「手動」の選択ができ、「自動」の場合は公開されているページが自動で設定されます。
自動に設定していれば、新しいページを公開した時に、連動してナビゲーションにリンクが追加されます。
ページを非表示にすれば、ナビゲーションのリンクも非表示になります。
文字色背景色設定例
手動に設定した場合は、ナビゲーションで表示されるテキストとリンク先をページごとに設定できます。
ナビゲーションに表示したくないページがある場合や、ページタイトルと表示されるテキストを別にしたい時にご利用ください。

Crayon|スマホアプリでホームページ作成

カテゴリー