コウ皆様こんにちは、ディレクターのコウで御座います。先日の固定バナーの設定方法に引き続き、BiNDupで導入されたウィジェットの活用方法を解説したいと思います。ページ内リンクナビゲーションとは今回はページ内リンクナビゲーションの設置方法を解説します。ページ内リンクナビゲーションとは何かと申しますと、ページ内に固定のアンカーリンクを設置して、各コンテンツエリアにスクロール出来る様にするナビゲーションです。WebLiFE*で活躍したナビゲーション手法ですね。1ページ内のコンテンツ量が多い構成の場合、このナビゲーションがあるとページ内での移動をスムーズに行えます。本当は現在位置とナビゲーションのデザインがシンクロするとより判り易いのですが、そこは対応しておりません、すみません。設置後のサンプルサイトをご覧下さい。右中央側に固定表示されている青いナビゲーションです。サンプルサイトを見るページ内リンクナビゲーションの設置方法さて早速設置してみましょう。Corporation』を使用して解説します。最後に実際に組み込んだデータを配布しますのでチェックしてみて下さいね。アンカーの設定ウィジェットの設定の前にスクロール先を設定しておく必要があります。Corporation』は既にアンカーが設定されておりますが、ご自身のサイトなどで設定がない場合は先に設定しておきましょう。スクロールさせたいブロックを開いてアンカー入力フォームに文字列を設定します。文字列は半角英数字であれば何でも構いません。ナンバリングしたりコンテンツ名を判断し易い名称にするのが良いでしょう。Corporation』ではcont1、cont2と云った様に、ナンバリングで名称が割り当てられています。ウィジェット編集モードに切り替えるウィジェットブロックを使う事で、上中下各左右の6箇所に固定の要素を配置する事が出来ます。ウィジェットを編集するには、『ページ編集』から『ウィジェット編集モード』に切り替えます。表示が切り替わり6つのウィジェットを編集出来る様になります。編集方法は通常のブロックエディタと同様です。今回は右中央のブロックにナビゲーションを配置したいので、該当ブロックを開いてそこから『ブロックテンプレート』を開きます。『ウィジェット』カテゴリの中から『ページ内リンク』を選択して適用をクリックします。リンクを設定ブロックテンプレートから取り込んだらそれぞれリンクを設定していきます。アンカーが設定してあると、リンク先の一覧の中にアンカー名が表示されますので、該当するアンカー名を選択します。デフォルトのリンク数は5つですが、必要に応じて増減させてください。スマーモードであれば左下の複製ボタンでリンクを増やしていけます。エディタモードの場合は単純にリンクをコピー&ペーストして増やしてください。以上、基本的な設置は完了です。ページ内リンクナビゲーションのカスタマイズもう少しデザインをカスタマイズしたい方の為にアイコンの変更方法とリンクカラーの変更方法を解説します。アイコンフォントの変更デフォルトのデザインを変更したい場合は、アイコンフォントから選択します。リンクパーツの中から『アイコン画像』>『アイコンフォントを選択...』をクリックします。アイコンフォントの一覧が表示されますので、その中から好きなデザインを選択します。デフォルトでは同じアイコンフォントですが、それぞれ違うデザインを割り当てる事も可能です。リンクカラーを変更するリンクカラーを変更する場合は、デザイン編集モード(Dress)から設定を行います。難しいですが、設定箇所は決まっていますので以下の手順で設定しましょう。デザイン編集モードを開いたら『詳細設定』タブを開きます。そこからパーツ>リンク>リンクを選択したら『次へ』をクリックします。緑の『+』ボタンをクリックして文字色を選択します。ここで実際に変更したいカラーを設定したら完了>戻る>保存>閉じるで終了します。これでウィジェットエリアのみ任意のカラーが設定出来ました。如何でしたか?デザイン編集モードでの設定が少し難しいですが、それ以外は割と簡単に設置出来ますのでお試し下さい。スマートフォンに於いてはナビゲーションが要素に重なったりしてしまう事がある為、非表示にした方が良い場合があります。スマートフォンで非表示する場合は、ブロックで非表示設定を行うと良いでしょう。今回作成したサイトデータはBiNDup環境でお使い頂けます。初月は無料なので試してみてください。CAMPで最も読まれた記事は?コンセプト。