SWELLの固定フッターメニューとハンバーガーメニューの作り方

今はほとんどの人はネットをスマホで見るので、スマホ対応を優先してサイトやブログを作成しましょう。

特にこだわりがない場合は、ぶっちゃけPC表示は無視していいかと思います。

このブログもPC表示でもワンカラム表示にして作成しています。

SWELLスウェルの固定フッターメニューとハンバーガーメニューの設定方法

ネットのアクセスの大多数がスマホアクセスの現代では、やはりスマホ表示の最適化がとても重要です。

PC表示のレイアウトばかりにこだわっていても大抵のブロガーにとっては時間の無駄になるはずです。

SWELLで使えるアイコン一覧

SWELLにはフォントファイルが独自で用意されています。

fontawesomeを使わなくてもわかりやすいアイコンを使うことができます。

SWELLで使い場合は簡単なコードを記述するだけでOKです。

[icon class="ここにアイコンのクラス名"]
[icon class="XXXX"]

[icon class="icon-home"]
[icon class="icon-swell"]
[icon class="icon-megaphone"]

ほかのWordPressテーマを使っていた人には馴染みがないかもしれませんが、SWELLの場合はアイコンのショートコードはこのように書きます。

文中などにアイコン用ショートコードを入れるだけで絵文字が出せます

SWELLで使えるアイコンリストは次のページに用意されています。

SWELLの固定フッターメニューの設定

《設定箇所》カスタマイザー起動 → サイト全体設定 → 下部固定ボタン・メニュー

SWELLの固定フッターメニューではもっと簡単にアイコンを表示させることができます。

この箇所には文字だけではなくアイコンも表示させたいですよね。

SWELLなら簡単にアイコンを表示させることができます。

スマホページにフッターメニューがあると操作性がよくなり、サイト内の回遊率アップが期待できます。

目次ボタン、トップへ戻るボタンは固定フッターに入れるので、ページ設定では非表示にします。

固定フッターメニューの背景色などは、サイトのキーカラーにあった色にしましょう。

『特殊メニューボタンの表示設定』で表示したいボタンにチェックを入れる。

• メニュー開閉ボタンを表示
• ページトップボタンを表示する
• 目次メニューを表示する

この設定でユーザーがサイト内を回遊しやすくなるでしょう。

固定フッターメニューにアイコンを表示させる

《設定箇所》カスタマイザー起動 → メニュー → 固定メニュー設定

『固定フッター用』の新規メニューを作成しておきましょう。

設定で『固定フッター（SP） (現在: mobile)』にチェックを入れるとスマホ用固定フッターメニューになります。

ホームリンクボタンを作る

URLにサイトURLを入力。

説明のところにSWELLのアイコンコード『icon-home』を入力。

これでホームアイコンが表示されます。

簡単ですよね。

SWELLボタンを作る

次は任意ですが、SWELLについて書いたカテゴリリンクボタンを作りたいのでSWELLマークを使ったアイコンを作ります。

URLを指定して説明欄に『icon-swell』を入力。

たったこれだけで整った振ったボタンリンクが完成します。

応用してあなたのフッターメニューを作ってみてください。

SWELLのハンバーガーメニューの設定（スマホ開閉メニュー）

《設定箇所》カスタマイザー起動 → サイト全体設定 → スマホ開閉メニュー

一般的にはハンバーガーメニューと呼ばれています。

SWELLでは『スマホ開閉メニュー』となっています。

基本設定はデフォルトにしています。

『スマホ開閉メニュー』はデフォルトでカテゴリが表示されます。

その下の箇所の設定はウィジェットの『スマホ開閉メニュー下』で設定します。

こに表示したいウィジェットを追加します。広告コードも追加できますよ。

まとめ

スマホ表示のページ最適化は必須です。

回遊率を上げる、離脱率を下げるためにもスマホのナビゲーションはときどき見直してメンテナンスしていきましょう。

ここの設定次第でPV数が変ってしまう大事なところです。

＼ 高機能で人気のテーマ ／