13 フッターの作り方|ナビゲーションと法的リンクの設置法

執筆者 | 高コンバージョンファネル

こんにちは、下坂栄里子です。

この記事では、ページ最下部の「フッター」を作りながら、ナビゲーションリンクの追加方法と、黒背景×白文字の配色調整のコツを解説します。

「ナビゲーション」要素でリンクをまとめる

フッターには、追加セクションの中にある「ナビゲーション」という要素を使います。この要素を入れると、複数のリンクをまとめて設置できます。

ナビゲーション要素の設定画面。「Link name」欄と「LINK TO」のドロップダウン(移動先/カスタムアクションなど)が表示されている

今回は「特商法」「プライバシーポリシー」「利用規約」の3つのリンクを設置します。それぞれのリンク名を入力し、リンク先のページを指定していきます。オプトインページ自体には特商法の表記は必須ではないケースもありますが、念のため入れておくと安心です。もしご自身で作成された特商法ページがあれば、そちらにリンクさせてください。

コピーライト文言は「段落」で作る

リンクの下に表示するコピーライト文言(著作権表記)は、「段落」要素で作成します。文字サイズを少し小さくし、要素の並び順が上下逆になってしまった場合は、ツールバーの「移動」アイコンを押しながらドラッグすると入れ替えられます。

サイト全体の作り込みの流れについてはこちらの記事でも詳しく解説しています。

背景を黒にして、文字色を白に変更する

完成した黒背景のフッター。白文字で「下坂栄里子オンラインスクール|Copyright © | All Rights Reserved」と「特商法 プライバシーポリシー 利用規約」のリンクが並んでいる

フッター部分のセクション設定にある「背景」をONにし、黒っぽい色を選びます。この状態のままだと、もともと黒だった文字が背景に埋もれて見えなくなってしまうため、リンクとコピーライトのテキストを選択し、文字色を白に変更しましょう。これでページ全体の印象を引き締める、落ち着いたフッターが完成します。

まとめ

フッターのリンクは「ナビゲーション」要素でまとめて設置できる

コピーライト文言は「段落」要素で作り、順番がずれたら「移動」アイコンでドラッグして直す

特商法・プライバシーポリシー・利用規約へのリンクは、念のため用意しておくと安心

背景を黒にしたら、文字色を白に変更するのを忘れずに

ファネルデザイナー® 下坂栄里子でした。

SNSをやめても、あなたの知識は売れ続けます。

眠っている間に世界中で売れ続ける仕組み「5つのデジタル導線」の作り方を、16分の無料動画で公開中です。

▶︎ 無料動画を視聴する