MENU
よあけ
【著者プロフィール】ふなさん
▶︎ WEBマスター歴20年以上/元WEBデザイナー(出版社のHPなど)
▶︎ WordPress構築歴は10年以上
▶︎ 資格:ネットショップ実務士レベル1/基礎心理カウンセラー
▶︎ WordPress構築最適化・テーマの活用方法・アフィリエイトブログの作り方など発信
▶︎ ブログ収入は1000万円以上を達成しています。
▶︎ 掲載しているノウハウ・結果には個人差があり、成果を保証するものではありません
▶︎ 趣味:ブログ・音楽・筋トレなど
WordPressテーマおすすめTOP3

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

swell

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

特にこだわりがない場合は、ぶっちゃけ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マークを使ったアイコンを作ります。

フッターにSWELLアイコンを表示

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

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

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

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

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

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

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

ハンバーガーメニュー(スマホ開閉メニュー)を設定

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

ウィジェットのスマホ開閉メニュー下を設定

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

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

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

これでスマホフッターメニューとハンバーガーメニューが完成しました!
おつかれさまです。

まとめ

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

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

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

高機能で人気のテーマ

SWELLテーマの購入〜カスタマイズ

  • URLをコピーしました!

レンタルサーバーの選び方

スクロールできます
サーバー特徴月額料金

ConoHa WING
詳しく
ドメイン2つ無料
300GB
WEXAL®高速化
初月無料
3ヶ月契約
1,210円/月
wpx シン・レンタルサーバー
シン・レンタルサーバー
詳しく
ドメイン1つ無料
300GB
KUSANAGI高速化
お試し期間10日
3ヶ月契約
693円/月

ロリポップ!
詳しく
無料ドメイン1つ(12ヶ月以上)
400GB
初期費用無料(ハイスピードのみ)
お試し期間10日
ハイスピードプラン
3ヶ月契約
1,210円/月

さくらのレンタルサーバー
詳しく
初期費用無料
300GB
初期費用無料
お試し期間2週間
スタンダード
524円/月
各レンタルサーバーの比較

WordPressの始め方

スクロールできます
テーマ名AFFINGER6 ACTION
AFFINGER

SANGO

SWELL
税込価格14,800円11,000円17,600円
Gutenberg対応
高速化プラグインが必要プラグインが必要独自高速化機能
ABテストオプション
ダウンロードConoHaで割引ダウンロード
ブロックエディタ対応のおすすめ有料テーマ

この記事を書いた人

【著者プロフィール】ふなさん▶︎ WEBマスター歴20年以上/元WEBデザイナー(出版社のHPなど)▶︎ WordPress構築歴は10年以上▶︎ 資格:ネットショップ実務士レベル1/基礎心理カウンセラー▶︎ WordPress構築最適化・テーマの活用方法・アフィリエイトブログの作り方など発信▶︎ ブログ収入は1000万円以上を達成しています。▶︎ 掲載しているノウハウ・結果には個人差があり、成果を保証するものではありません▶︎ 趣味:ブログ・音楽・筋トレなど

目次
閉じる