スポンサーリンク

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

2020年1月20日Luxeritas

  • 2020年3月6日
    『スマホ対応』を追記しました。
  • 2020年1月22日
    『おまけ』を追記しました。

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

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

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

きらり

きらり

難しいんじゃないの?

結耶

結耶

フッターにメニューエリアを作って表示しようとすればむずいと思うけどね。「フッターメニュー風」なものは簡単にできるよw

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

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

2020年6月21日

Luxeritasバージョン3.8.2からフッターにナビゲーションメニューを設置できるようになりました。設定方法は下の記事で説明しています。

スポンサーリンク

フッターの設定

場所[Luxeritas][カスタマイズ(外観)][ヘッダー/フッター]

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

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

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

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

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

フッターメニューを作る

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

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

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

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

結耶

リンクを改行しないで設定していけば横並びにできます。

きらり

きらり

なるほど!フッターメニューエリアがないからこうやって作ってしまうんだねw

結耶

結耶

この方がカスタマイズしやすいしね。私はスマホでも見やすいようにボタンにしてみたよ!

2020年1月22日 追記

スマホ対応

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

きらり

きらり

文字列の途中で区切らないで欲しいな~。

結耶

結耶

だよね。小さい画面で見てちゃんと文字列で表示されるようにしてみよう!

HTML
<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>
CSS
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日 追記

おまけ

CSS#foot-in h4 { スタイルを記述 }

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

結耶

結耶

CSSで指定すればアイコンをつけることもできますよ(^-^)

最後に

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

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

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

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM