【Luxeritas】フッターメニューを作ってみた！

2020年1月20日2020年6月21日Luxeritas

テーマをLuxeritasに変えて1年になります。以前からフッターメニューをなんとかしたいと思っていました。

というのもLuxeritasのメニューエリアは「ヘッダーナビ(グローバルナビ)」と「ヘッダーの上の帯状メニュー」の2箇所しかなく、フッターにはありません(^^;

「できればフッターにプライバシーポリシーやお問い合わせへのリンクを表示したい」と思い自分で作ってみることにしました。

Luxeritasにはフッターメニューエリアはないのでウィジェットを利用してフッターメニューを作ってみました。

上は私が作ったフッターメニューです。今回はこんな感じのものを作っていきたいと思います。

フッターの設定

ここではヘッダーとフッターの表示などに関する設定ができます。

フッターウィジェットエリアの表示数

フッターのウィジェットエリアは左・中央・右の3つがあります。

設定画面の左側の一番下に「フッターウィジェットエリアの表示数」という項目があるので「横3列(左・中央・右)」「横2列(左・右)」「横1列(中央)」からウィジェットエリアの表示数を選択できます。

「横1列(中央)」を選択してください。

フッターメニューを作る

まずは［外観］［ウィジェット］画面を開きます。

「かすHTML」や「テキスト」ウィジェットを『フッター中央(タイトルH4)』nに設置します。

設置したウィジェットにプライバシーポリシーやお問い合わせページなどのリンクを記述してしてください。

<div style="text-align:center;"><a href=ページへのURL">表示するテキスト</a> │ <a href=ページへのURL">表示するテキスト</a> </div>

2020年1月22日 追記

スマホ対応

上記の方法でリンクを並べるのが一番簡単な方法ですが、スマホなどの小さい画面でみるとリンクが画面に変なところで折り返されたりしてしまいます。

• ホーム
• プライバシーポリシー
• サイトマップ
• お問い合わせ

<ul class="sample">
<li><a href="URL">ホーム</a></li>
<li><a href="URL">プライバシーポリシー</a></li>
<li><a href="URL">サイトマップ</a></li>
<li><a href="URL">お問い合わせ</a></li>
</ul>

ul.sample {
    margin:1em 0;
    list-style:none;
    text-align:center;
}

ul.sample li {
    display:inline-block;
}

/*区切り線*/
ul.sample li:after {
    content:"│";
    margin:0 7px;
}

ul.sample li:last-child:after {
    content:none;
}

ボタンにする

ボタンにしたい場合は下記記事を参考にしてください。

こちらの記事はソーシャルボタンですが、アイコンなどを変えればフッターメニューとして使えます。

2020年1月22日 追記

おまけ

#foot-in h4と指定してスタイルを記述するとフッターのウィジェットのタイトルの見出しをカスタマイズすることができます。(フッターのウィジェットエリア左・中央・右に適用されます。)

最後に

冒頭でも書きましたが、Luxeritasにはフッターメニューエリアがありません。ですが「フッターにプライバシーポリシーやお問い合わせやSNSへのリンクを入れたい」と思っている人も多いと思います。

今回の方法は「フッターメニュー風」なものですが、簡単に作成できるのでやってみて下さい。

またLuxeritas以外の方でもフッターにウィジェットエリアがあればできると思いますので参考にしてみてください。