シングルページの利便性がアップする、ページ内ナビゲーションを追加しよう

皆様こんにちは、ディレクターのコウで御座います。

先日の固定バナーの設定方法に引き続き、BiNDupで導入されたウィジェットの活用方法を解説したいと思います。

ページ内リンクナビゲーションとは

今回はページ内リンクナビゲーションの設置方法を解説します。
ページ内リンクナビゲーションとは何かと申しますと、ページ内に固定のアンカーリンクを設置して、各コンテンツエリアにスクロール出来る様にするナビゲーションです。
LiVE for WebLiFE*で活躍したナビゲーション手法ですね。

1ページ内のコンテンツ量が多い構成の場合、このナビゲーションがあるとページ内での移動をスムーズに行えます。
本当は現在位置とナビゲーションのデザインがシンクロするとより判り易いのですが、そこは対応しておりません、すみません。

先ずは設置後のサンプルサイトをご覧下さい。
右中央側に固定表示されている青いナビゲーションです。

サンプルサイトを見る

ページ内リンクナビゲーションの設置方法

さて早速設置してみましょう。
今回はサンプルとしてBiNDupテンプレート『Tokyo Quality Corporation』を使用して解説します。
最後に実際に組み込んだデータを配布しますのでチェックしてみて下さいね。

アンカーの設定

ウィジェットの設定の前にスクロール先を設定しておく必要があります。
『Tokyo Quality Corporation』は既にアンカーが設定されておりますが、ご自身のサイトなどで設定がない場合は先に設定しておきましょう。

スクロールさせたいブロックを開いてアンカー入力フォームに文字列を設定します。

文字列は半角英数字であれば何でも構いません。
ナンバリングしたりコンテンツ名を判断し易い名称にするのが良いでしょう。
『Tokyo Quality Corporation』ではcont1、cont2と云った様に、ナンバリングで名称が割り当てられています。

ウィジェット編集モードに切り替える

ウィジェットブロックを使う事で、上中下各左右の6箇所に固定の要素を配置する事が出来ます。
ウィジェットを編集するには、『ページ編集』から『ウィジェット編集モード』に切り替えます。

表示が切り替わり6つのウィジェットを編集出来る様になります。
編集方法は通常のブロックエディタと同様です。

ブロックテンプレートから選択

今回は右中央のブロックにナビゲーションを配置したいので、該当ブロックを開いてそこから『ブロックテンプレート』を開きます。

『ウィジェット』カテゴリの中から『ページ内リンク』を選択して適用をクリックします。

リンクを設定

ブロックテンプレートから取り込んだらそれぞれリンクを設定していきます。
アンカーが設定してあると、リンク先の一覧の中にアンカー名が表示されますので、該当するアンカー名を選択します。

デフォルトのリンク数は5つですが、必要に応じて増減させてください。
スマーモードであれば左下の複製ボタンでリンクを増やしていけます。
エディタモードの場合は単純にリンクをコピー＆ペーストして増やしてください。

以上、基本的な設置は完了です。
結構簡単ですね。

ページ内リンクナビゲーションのカスタマイズ

もう少しデザインをカスタマイズしたい方の為にアイコンの変更方法とリンクカラーの変更方法を解説します。

アイコンフォントの変更

デフォルトのデザインを変更したい場合は、アイコンフォントから選択します。
リンクパーツの中から『アイコン画像』＞『アイコンフォントを選択...』をクリックします。
アイコンフォントの一覧が表示されますので、その中から好きなデザインを選択します。

デフォルトでは同じアイコンフォントですが、それぞれ違うデザインを割り当てる事も可能です。

リンクカラーを変更する

リンクカラーを変更する場合は、デザイン編集モード（Dress）から設定を行います。
少し難しいですが、設定箇所は決まっていますので以下の手順で設定しましょう。

デザイン編集モードを開いたら『詳細設定』タブを開きます。

緑の『＋』ボタンをクリックして
ウィジェット＞ウィジェット 右中央
を選択します。

そこから
パーツ＞リンク＞リンク
を選択したら『次へ』をクリックします。

再び緑の『＋』ボタンをクリックして
文字色
を選択します。

ここで実際に変更したいカラーを設定したら
完了＞戻る＞保存＞閉じる
で終了します。

これでウィジェットエリアのみ任意のカラーが設定出来ました。

スマートフォンでの注意点

如何でしたか？
デザイン編集モードでの設定が少し難しいですが、それ以外は割と簡単に設置出来ますのでお試し下さい。

スマートフォンに於いてはナビゲーションが要素に重なったりしてしまう事がある為、非表示にした方が良い場合があります。
スマートフォンで非表示する場合は、ブロックで非表示設定を行うと良いでしょう。

今回作成したサイトデータはBiNDup環境でお使い頂けます。初月は無料なので試してみてください。
※ダウンロードにはログインが必要です