Ver1.8 Released!

モバイル用フッター固定メニューの設定方法

SANGOは「ver1.3」のアップデート以降、スマホ/タブレット用のフッター固定メニューが利用できるようになりました(パソコンでは表示されません)。このページでは、その設定方法を解説します。

フッター固定メニューの設定手順

手順1:メニューを作成する

まずはメニューの作成を行いましょう。

外観⇒メニュー

メニューページの上側にある「新規メニューを作成」をクリックします。

新規メニューを作成

手順2:メニュー名を決める

メニュー名を入力します。分かりやすく「モバイルフッター固定メニュー」などとすると良いでしょう。

手順3:カスタムリンクでメニューを追加していく

次に「ホーム」、「ホームシェア」などのメニュー項目を追加していきます。「カスタムリンク」から追加していくようにしましょう。

カスタムリンクを作成

リンク先のURL

まず、リンク先のURLは以下のように入力します。もちろん、使いたい項目だけ追加すればOKです。
※ #から始まる文字列を入力するときは「https://」や「http://」の部分は削除してください。

リンク先のURL
  • ホーム⇒トップページのURL
  • シェア#sng_shareと入力
  • フォロー#sng_followと入力
  • メニュー#sng_menuと入力
  • トップ(へ戻る)#と入力
  • 電話ボタンtel:123456789と入力(数字を電話番号に)
  • 検索ボタン#sng_searchと入力
  • その他のページ⇒そのページのURL

「シェアボタン」「フォローボタン」「トップへ戻るボタン」などは、このURLを入力し間違えると、うまく機能しないので、ご注意ください。

シェアボタン用のメニューは、投稿ページとトップページでのみ表示されます。
検索ボタンはSANGO Ver1.8で追加されたため、これ以下のバージョンでは利用できません。

リンク文字列(ナビゲーションラベル)

次にリンク文字列(アイコン+テキスト)です。アイコンはFontAwesomeを利用しています。好きなアイコンを選んで使いましょう。具体的には、以下のように入力します。

リンク文字列の入力例
<i class="fa fa-home"></i>ホーム

水色の部分がアイコンのコードで、「ホーム」という文字はアイコンのすぐ下に表示されます。改行は自動で入るので、コードとテキストを詰めて並べればOKです。

アイコンコードの探し方

SANGOのバージョンや設定により使用可能なFontAwesomeのアイコンが異なります。SANGO v1.7以上をご利用の場合、あらかじめFontAwesome5が有効になっています(詳しくはこちら)。

FontAwesome 5 のアイコン一覧

SANGO v1.6以下をご利用の場合には、FontAwesome4.7しか使用できません。

FontAwesome4.7のアイコン一覧

アイコンコードをコピペ

それぞれ、上のボタンのリンク先からアイコンの一覧を見ることができます。使いたいアイコンをクリックすると、詳細ページが開きます。アイコンのコードが記載されているので、こちらをそのままコピペすればOKです。

(上の画像はFontAwesome4.7の場合です。FontAwesome5の画面は少し見た目が異なります)

メニューのリンク文字列(ナビゲーションラベル)は別設定が必要

左から現れるナビドロワー(ハンバーガーメニューで設定したもの)を項目に含めたい場合には、リンク文字列を以下のように囲む必要があります。

メニューのリンク文字列
<label for="drawer__input"><i class="fa fa-list-ul"></i>メニュー</label>

↑このようにlabelタグで囲むことで、タップしたときにメニューが横から表示されるようになります。よく分からなければ、上の記入例をそのままコピペして頂ければと思います。

手順4:表示させたい項目を全て追加する

↑このように使いたいメニュー項目を全て追加しましょう。参考までに入力例をまとめておきます。

メニューリンク先URLリンク文字列(ナビゲーションラベル)
ホームトップページのURL<i class="fa fa-home"></i>ホーム
シェア#sng_share<i class="fa fa-share-alt"></i>シェア
フォロー#sng_follow<i class="fa fa-bell"></i>フォロー
メニュー#sng_menu<label for="drawer__input"><i class="fa fa-list-ul"></i>メニュー</label>
トップへ戻る#<i class="fa fa-arrow-circle-up"></i>トップ
電話ボタンtel:123456789<i class="fa fa-phone"></i>問い合わせ
検索ボタン
v1.8〜
#sng_search<label for="header-search-input"><i class="fa fa-search"></i>検索</label>

手順5:メニューの位置を選んで保存

下にスクロールし「モバイル用フッター固定メニュー」にチェックを入れて、保存します。保存を忘れないように!

手順6:カスタマイザーで設定をする

次にカスタマイザーで設定を行います。

外観⇒カスタマイズ⇒SANGOオリジナル機能の管理⇒モバイルフッター固定メニュー

「シェア」「フォロー」を使う場合はチェック

「シェア」や「フォロー」のメニューを使う場合には、こちらにチェックを入れましょう。チェックを入れないと、メニューをタップしても反応しません。

MEMO
「あらかじめボタンを仕込んでおき(隠しておき)、タップにより表示させる」というような仕組みになっています。こちらにチェックを入れないと、仕込みがされないというわけです。

手順7:フッター固定メニューの色の設定をする

最後に色の設定を行いましょう。ここは説明不要かもしれませんね。

「アクティブカラー」というのは「リンク先のページにいるとき」のアイコン/文字色です。例えば、トップページにいるときには「ホーム」のメニューがアクティブカラーになります。

手順7:フォローボタンを使う場合の設定

フォローボタン

フォローボタンをメニューに含めない場合には、こちらの手順は不要です。

フォローボタンは、「Twitter」「Facebook」「Feedly」「Instagram」のうち、カスタマイザーの「フォローボックス(記事下)」で入力されているものが表示されます。フォローボックスは表示させたくないという場合には[フォローボックスを表示する]にチェックは入れずに、Twitterのアカウント名やFacebookページのURLだけを入力してください。

手順8:スマホで表示を確認して完了!

カスタマイザーで設定ができたら保存をします。これで設定は完了。うまく表示されるか、スマホ/タブレットなどでチェックしてみましょう。

フッター固定メニュー

うまく表示されないときのチェックリスト

そもそもメニューが表示されない

  • テーマのverは1.3以上ですか?
  • アップデート後にキャッシュを削除しましたか?
  • スマホ/タブレットで見ていますか?(PCでは表示されません)
  • メニューは作成済みですか?
  • メニューの位置で「モバイル用フッター固定メニュー」にチェックが入っていますか?
  • 子テーマにsng-function.phpが入っていませんか?(Ver1.3のアップデートで固定メニューのために変更を行っています)

シェアボタンが表示されない/効かない

  • アーカイブ(カテゴリー/タグ/日付別ページなど)の場合には表示されません
  • メニューのリンク先URLが「#sng_share」になっていますか?
  • カスタマイザーのフッター固定メニューの設定で「シェアボタンを使用する」にチェックが入っていますか?
  • jQueryのエラーが出ていませんか?(確認方法

jQueryのエラーが出ている場合は「jQueryをフッターで読み込む」もしくは「jQueryの読み込み方を変える」ようなプラグイン(主に高速化関係のものだと思います)を入れていないかチェックしてみてください。プラグインの設定を変えるだけでも正しく動くようになるかもしれません。
例:「LiteSpeed Cache」を使用している場合には「JS Deferredをロード」をオフに

フォローボタンが表示されない/効かない

  • メニューのリンク先URLが「#sng_follow」になっていますか?
  • カスタマイザーのフッター固定メニュー設定で「フォローボタンを使用する」にチェックが入っていますか?
  • カスタマイザーのフォローボックス設定で「Twitterアカウント名」や「FacebookページのURL」が入力されていますか?

メニューが効かない

  • リンク文字列がlabelタグで囲まれていますか?(前述の解説を参照ください)

 

111 COMMENTS

こあら 2019/04/11

SANGOを購入させていただいたばかりの者です。
とてもかわいいテーマに出会えてうれしいです。

早速ですが、モバイル用フッターに問い合わせ先のアイコンを設定したのですが、リンク先URLを例にある電話ではなく、メールアドレスにしたいです。電話の場合はリンク先URLを”tel: 123456789″にすると記載されていましたが、メールの場合はどうすればよいでしょうか?

回答を見る
えるね 2019/04/03

すてきなテーマをありがとうございます。
タイトルの通り、フッター固定メニューのフォローボタンでTwitterのアイコンが「fa fa-twitter」になってしまっていてアイコンが表示されません。v5から?「fab fa-twitter」になったと思いますが、変更のやり方がわかりません。シェアボタン側のTwitterアイコンは「fab fa-twitter」になっているのでテーマのバグでしょうか?
カスタマイズ側のFontawesomeは最新にしています。
アイコンのコードの変更のやり方を教えていただけると幸いです

回答を見る
けん 2019/03/28

お世話になっております。
サルワカ様のおかげで自分でWPを作ることができ、大変感謝しております。
もし可能であれば方法を教えて頂きたいのですが、現在「モバイルフッター固定メニュー」に「フォロー」を追加しモバイルでも正常に表示されております。
そこで「インスタグラム、フェイスブック、ツイッター、Feedly」とボタンが表示されているのですが(サルワカ様フォーマット通り)その【Feedly】の緑色のボタンの場所にYouTubeリンクを貼りたいと考えており、Feedlyの緑のボタンをYouTube(だと分かる)ボタンに変更したいと考えているのですが、それは可能でしょうか??
何卒よろしくお願い致します。

回答を見る
きお 2019/03/05

サルカワ様
初めまして、素敵なテーマをありがとうございます。

シェアボタンを削除したいのですが、全て削除するのではなく「はてぶ」のみ削除をすることは可能でしょうか。また、シェアボタンの順序を変更することは可能でしょうか。(FB、Line、twitter、pocketの順に変更したいと思っています。)
お忙しい中恐縮ではございますが、何卒よろしくお願いいたします。

回答を見る
佐藤 2019/03/04

サルワカ様、素敵なテーマをありがとうございます。

こちらの記事を参照し、モバイル用フッター固定メニューでシェアボタンの表示はできたのですが、ボタンを押してもボタンの色が変わるのみでシェアが表示されません。

そもそも、カスタマイザーのフッター固定メニューの設定で「シェアボタンを使用する」という項目が見当たりません。

リンク先URL、jQueryのエラー確認済みです。
何かエラーの原因として、分かりましたらご教授いただけるととてもありがたいです。
よろしくお願いいたします。

回答を見る
森田 2019/03/01

サルワカ様、SANGOのおかげでブログ更新を愉しく続けております

モバイルフッター固定メニューの設定を指示どおり進めました

しかしながら、設定した「シェア/フォロー/メニュー/トップ」のボタンを押すと「ページを開けません。発生したエラー:“URLを表示できません”」と表示されてしまいます。

どこに原因があるか、ご教示いただけますでしょうか
お手数ながらよろしくお願いいたします

回答を見る
えーす 2018/11/27

素敵なテーマありがとうございます。

スマホから見た時に以下が表示されません。
(設定したときは反映されますが時間が経つと消えます)
・モバイル用フッター固定メニュー
・メニュー
・ナビゲーションラベル

こちらで見落としあるかもしれませんがおわかりの点あれば教えていただきたいです。

回答を見る
しんご 2018/10/25

使いやすいテーマ、ありがとうございます。
モバイル用フッター固定メニューのawesomeアイコンのサイズを変更することはできるのでしょうか?  fa-4x とかでやっても効かないのですが。
教えて頂けると助かります

回答を見る
匿名希望 2018/10/23

シェアボタンを非表示にしていますが、グレーの背景が残ってしまっているので、そちらも非表示または白背景にしたいのですが、どのように行えばよろしいでしょうか。

回答を見る
こっこ 2018/09/19

サルワカ様素敵なテーマ有難うございます。
デザインが気に入って初めてのwpのテーマとして使わせて頂く事にしました。

モバイル固定フッターメニューで上手く行かない事があったので質問させてください。
現在wpテーマはsango 子テーマはPORIPUを利用しています。

とりあえず固定フッターメニューがどのように表示されるか確認する為、手順通りにカスタムリンクを設定しました。

ホーム シェア フォロー メニュー は見本通りにアイコンとテキストが表示されましたが、トップのアイコンが □ のように表示されてしまっています。

自分なりに調べたのですが、わかりません。PORIPUがFont Awesome 5対応だからでしょうか?Font Awesome 5だと、見本の曲がった矢印のアイコンが有料になっているからでしょうか?

ただ、PORIPUがFont Awesome 5を読み込んでいて、見本と同じアイコンが有料だから、□のように表示されていると仮説を立てて、別のFont Awesome 5フリーアイコンのコードを使ってみたのですが、今度は、アイコンとテキストが改行されず並んで表示されていしまいます。

どうしたらいいのかわからないので、解決策を教えて頂けないでしょうか?

回答を見る
コナン 2018/09/18

初めまして。とても素敵なテーマでいつも記事の更新が楽しみです。ありがとうございます。
カテゴリごとに表示するメニューを切り替えることはできないでしょうか?
例えば
カテゴリ【ドイツ】ではドイツのホテルランキング・おすすめのドイツ語スクール
カテゴリ【フランス】ではフランスのホテルランキング・おすすめのフランス語スクール
などが表示されるようにフッダーメニューやヘッダーメニューを切り替えるなどです。

そのような方法はできないでしょうか?

回答を見る
メルシー 2018/09/15

お世話になっております。
私の何かの設定ミスや見落としであるとは思うのですが、フッターメニューをスマホで選択した際に、スマホ用ナビドロワーが表示されてしまいます。(フッターメニューとモバイルフッターメニューはそれぞれ設定しています。)
PCでは問題なく、フッターメニューからリンク先が表示されます。
もし想定出来る原因が分かれば教えて頂ければと思います、よろしくお願い致します。

回答を見る
うい 2018/08/24

サルワカさま

はじめまして。いつもお世話になっております。

ひとつ質問なのですが、モバイルフッター固定メニューを表示させると、詳細設定内の「スマホ/タブレットではサイドバーを非表示にする」にチェックを入れても効かなくなる仕様でしょうか?

モバイル環境では、フッター固定メニューがあれば新着記事下に表示されるサイドバーの要素は不要かなと思い、非表示にしたいと思ったのですが、フッター固定メニューが表示させているともれなくサイドバーも表示されてしまうようです。

仕様であれば諦めますので、ご教示いただけますと幸いです。宜しくお願いいたします。

回答を見る
81 2018/07/22

モバイル用フッター固定メニューを使いたくて取り付けたところ、モバイルでシェアボタン表示されクリックできることこまできました。
リンク先の表示が5つ表示され内、3つが「□の中に×」という表示になっています。
TwitterやFacebookのマークを正しく表示したいのですが、原因がわからず・・・
という具合です。 
また。シェアのリンク先の選択など自分でできるものでしょうか?

SANGOは初心者の私でもHPを作る楽しさを教えてくれました。
私が初心者のため見落としていることが原因かもしれませんが
アドバイスお願いいたします。

回答を見る
フクロウ 2018/06/11

はじめまして、このたび初めて有料テーマを使用させていただきました。
これまでとは違いカスタマイズが豊富でとても楽しく使用させていただいております。

さて、「モバイル用フッター固定メニュー」の作成で各ボタンの作成~表示まではできましたが、フォローボタンとシェアボタンは表示はあるもののなにもアクションができません。
表記の手順やチェックはしてみましたが改善されませんでした。
アドバイスいただけると幸いです。

回答を見る
ムラサキ 2018/06/04

サルワカ さま
 いつもお世話になっています。SANGOのおかげでブログ制作が楽しくなりました。

 質問は、記事下に表示されるSNSのボタンについてです。
 このシェアボタンを全て表示させなくすることはできるのでしょうか?

 用意ができたら、ブログのトップページにインスタなどのシェアボタンを埋めこみ、記事下にはシェアボタンが表示されないようにしたいです。

 既出の質問でしたら申し訳ありません。
 ご教示のほどよろしくお願いします。

回答を見る
はぎ 2018/05/02

大変素晴らしいテーマのご提供ありがとうございます。先日購入させて頂いたWP初心者です。
モバイル用固定フッターメニューの背景色について質問させて頂きます。
選択した背景色を少し透過させたいのですが、カスタマイズの色設定からは不可能でしょうか?
お手隙のときにご教示頂けたら幸いです。宜しくお願い致します。

回答を見る
宮本 2018/05/01

本当に素敵なテーマをありがとうございます。大変重宝させて頂いております。
痒い所に手が届く親切なアップデートや改善方法の情報提供も、いつも嬉しく思っております。

僕はウェブ初心者で、これが変な質問だったら申し訳ないのですが

【質問】
モバイル用フッター固定メニューの『フォロー』のボタンから、
インスタグラムアカウントへのリンクを表示させる事は、可能でしょうか。

この記事の方法で、モバイル用フッター固定メニューのフォローボタンから、Twitterアカウントへのリンクは表示させる事が出来ました。
最近して下さったアップデートで、フォローボックスにインスタグラムアカウントのリンクを表示させる事が出来るようになりました。

このインスタグラムアカウントへのリンクを、モバイル用フッター固定メニューでも、表示させたいのです。

既出の質問でしたら、申し訳ございません。
いつも誠にありがとうございます!

回答を見る
ひまわり 2018/04/30

サルワカさま

こんにちは。素晴らしいテーマの作成、そしてまた素敵なアップデートをどうもありがとうございます。ブログの更新がさらに楽しくなりました。

今回は上記の質問にあります、
>フッター固定メニューの「フォロー」の中身を変えるにはどのファイルを修正したらいいのでしょうか?
の質問と少々似ているのですが、改めて質問させてください。

Q.フッターのフォローボタンの一番左端「Follow」をYouTubeに、一番右端の「feedly」をインスタグラムに変更したいです。上記の質問の回答を見ながら子テーマを使って自分でやって見たのですが、うまく反映されませんでした。
もしご迷惑でなければ、footer.phpの構造と変更方法を教えていただくことは可能でしょうか。
お忙しい中大変失礼いたします。どうぞよろしくお願いします。

回答を見る
あっきー 2018/04/04

お世話になります。
こちらのモバイル用フッター固定メニュー表示幅が広くなってしまいcopyrightの部分が半分隠れたり、シェアの表示も幅が広くなった分、隠れてしまうという現象がおきています。解決方法を教えてください。

回答を見る
ハラッコ 2018/03/25

お世話になっております。
ブログ作成ではSANGOを愛用しておりますが、
アフィリ用のLPではカラフルというのを薦められ買ってみましたがどうも性に合いません。
LP制作でもSANGOを使用したいのですが、ただ一点、
スクロールに追従する、それぞれの固定ページで独立したボタンが欲しいのです。
コーディングは出来ないので手も足も出ません。
何か良い方法はないでしょうか?
これが出来れば、LP制作でも最強のテーマとなると思います。
テストページはこんな感じです。
https://tokimeki-shop.info/shop/button

回答を見る
CM 2018/03/06

メニュー作成の注意書きに
※ 「https://」や「http://」の部分は削除してください。
とありますが、指示通りにしてメニューを保存すると、自動でhttp://など挿入されてしまいます。
これは問題ありませんか?

回答を見る
でるた 2018/02/19

お世話になっております。
モバイル用フッター固定メニューを設定したのですが、スマホでチェックすると、動作が不安定なのです。クリックしても反応したり、しなかったり。
ページのフッターまでスクロールすれば、さすがに反応しやすくなるようですが。
どうすればいいでしょうか?

回答を見る
だいすけ 2018/02/11

素晴らしいテーマをありがとうございます。マテリアルデザインを勉強するキッカケにもなり、すごく良い買い物でした。

今回はこちらのモバイル用フッター固定メニューに「メニュー」を導入し、出てくるナビゲーションドロワー内に「目次(TOC+)」を表示させました。

できれば目次をタップした時にナビゲーションドロワーが閉じるように設定したいのですが、何か良い方法はありますでしょうか?

例)各見出しの li a に をつけるなど⇦この方法だと記事内の目次をタップするたびにドロワーが出てしまう気もしますが……。

回答を見る
カエル 2018/02/10

SANGOを作ってくださって、ありがとうございます!!
サルワカさんのおかげで、楽しいブログ生活を送れています!(^^)

●リンク文字列の所で、アイコンが変更できず困っています。

【FontAwesomeアイコン一覧】から使いたいアイコンを選ぶ
   ↓
アイコンのコードをコピペ

してるんですが、アイコンが変更されません。。。
(入力例以外のアイコンコードにすると、アイコンが表示されずテキストのみの表示となります)

・テーマのバージョンは最新版です
・キャッシュも削除して確認しました
・ネットでも検索しましたが答えが分からず…

どのようにしたらよろしいでしょうか?
教えていただけますと幸いです(^^)

回答を見る
グース 2018/02/06

ver1.3.3を使っているのですが、
#sng_shareを入力してもシェアボタンが表示されずグレーの表示が出るだけという状況です。
プラグインを全て停止して試したのですが、結果は変わりませんでした。
どこかほかに確認するかしょなどありましたらご教示いただけないでしょうか?

回答を見る
ヨリメグ 2018/01/25

まさにその通りでした!
プラグインを一度停止したらきちんと表示されました。
素早いお返事ありがとうございました!

回答を見る
ヨリメグ 2018/01/25

ステキなテーマ、ありがとうございます。

モバイル用フッター固定メニューですが、スマホなどでWPにログインしている状態だと表示されるのですが、ログインしていないと表示されません。ハンバーガーメニューも設定済みですが、こちらも同様です。設定方法を何度も確認しましたが、原因がわからず困っています。

回答を見る
hiroyuki 2018/01/14

初めまして先日sangoのテーマを取り入れた、ワードプレス初心者です。
記事一覧のサムネイル画像=アイキャッチと言う認識でよかったですか?

以下のコードがスタイルシートにあるので自動的にサムネのサイズに合わせて表示されるものだと思っていたのですが、なぜか画像が切られていたり、空白が出来るような表示になっていますがサムネのカスタマイズはどこかで出来ますでしょうか?
色々と初心者的な質問で申し訳ありません…(_ _)

* 画像/埋め込みコンテンツ
*/
img {
max-width: 100%;
height: auto;
border: 0;
vertical-align: middle;
}

回答を見る
まるこ 2018/01/09

お世話になっております。
モバイルフッター用の固定メニューを作成したところ、記号と文字がぴったり上下に重なるのではなく、少しずつずれて表示されてしまいました。こちらを解消する方法はありますでしょうか?

回答を見る
キリン 2018/01/08

お世話になります。先日他テーマからSANGOに移行しました。上記コメントでも述べているハンバーガーメニューへのウィジェットの追加について、よく仕組みがわからなく、スマホでもメニューが効かない状態です。何をどうしたら良いのか・・・?など初心者にもわかりやすくご教示願えますか?

回答を見る
はな 2017/11/23

先ほど、Ver 1.3.1にアップデートしました。すると、モバイルフッター固定メニューの、#sng_menuだけが、押しても開かなくなってしまい、使えなくなってしまいました。アップデート前は使えていたのですが…。

回答を見る
last 2017/10/28

ハンバーガーメニューのスクロール時に後ろのBODYタグの中身がスクロールされる場合があるのですが、メニュー部分のみスクロールさせることはできますか?

回答を見る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です