今はほとんどの人はネットをスマホで見るので、スマホ対応を優先してサイトやブログを作成しましょう。
特にこだわりがない場合は、ぶっちゃけPC表示は無視していいかと思います。
このブログもPC表示でもワンカラム表示にして作成しています。
SWELLの固定フッターメニューとハンバーガーメニューの設定方法
ネットのアクセスの大多数がスマホアクセスの現代では、やはりスマホ表示の最適化がとても重要です。
PC表示のレイアウトばかりにこだわっていても大抵のブロガーにとっては時間の無駄になるはずです。
SWELLで使えるアイコン一覧
SWELLにはフォントファイルが独自で用意されています。
fontawesomeを使わなくてもわかりやすいアイコンを使うことができます。
SWELLで使い場合は簡単なコードを記述するだけでOKです。

fontawesomeを使わなくていいのでサイトが重くなりにくいです。
[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数が変ってしまう大事なところです。
\ 高機能で人気のテーマ /
SWELLテーマの購入〜カスタマイズ
-
SWELLのブログ記事の書き方 WordPress記事投稿解説!オリジナルブロックの機能サンプル一覧
-
SWELLテーマの使い方 テンプレートカスタマイズ【初心者からプロまで使える】
-
SWELLの固定フッターメニューとハンバーガーメニューの作り方 カスタマイズ
-
SWELL評判レビュー 人気の理由や購入方法 SWELLブログの始め方を完全解説
-
SWELLの初期設定・導入手順 一番はじめに設定すべき7項目
-
WordPressブログ 人気テーマランキング トップ3はどれ?
-
WEB制作会社やフリーランスが商用利用できるWordPressテーマ2選 複数サイトもOK
-
SWELLの表示速度の高速化設定 有料テーマでは最も速い?
-
SWELLテーマを使ったセンスの良いブログ・サイト30選
-
SWELLテーマを無料でお試しする方法と解決策
-
WordPressプラグイン『SEO SIMPLE PACK』の設定・使い方
-
SWELL・AFFINGER・SANGO 比較レビュー 機能や料金の違い
-
SWELLの乗り換えサポートプラグインの使い方 移行で表示崩れる?
-
SWELLのアフィリエイトとコミュニティ参加方法
-
SWELLの制限エリアの使い方 キャンペーンやステマ規制の対応におすすめ
-
WordPressでホームページやブログを簡単に作る方法 トラブル対応も
-
AFFINGER6のデメリット 今からアフィンガー6を購入すると損な理由
-
SWELLを安く買う方法!エックスサーバーのWordPressテーマインストール機能の使い方
-
SWELLのカテゴリー・タグページをカスタマイズしてまとめ記事を作る方法