!ホームSANGOのカスタマイズ装飾・ショートコードの使い方モバイル用フッター固定メニューの設定方法2019年12月18日SANGOは「ver1.3」のアップデート以降、スマホ/タブレット用のフッター固定メニューが利用できるようになりました(パソコンでは表示されません)。このページでは、その設定方法を解説します。手順1:メニューを作成するまずはメニューの作成を行いましょう。外観⇒メニューメニューページの上側にある「新規メニューを作成」をクリックします。手順2:メニュー名を決めるメニュー名を入力します。分かりやすく「モバイルフッター固定メニュー」などとすると良いでしょう。手順3:カスタムリンクでメニューを追加していく次に「ホーム」、「ホームシェア」などのメニュー項目を追加していきます。「カスタムリンク」から追加していくようにしましょう。リンク先のURLまず、リンク先のURLは以下のように入力します。使いたい項目だけ追加すればOKです。#から始まる文字列を入力するときは「https://」や「http://」の部分は削除してください。電話ボタン⇒tel:123456789と入力(数字を電話番号に)検索ボタン⇒#sng_searchと入力その他のページ⇒そのページのURL「シェアボタン」「フォローボタン」「トップへ戻るボタン」などは、このURLを入力し間違えると、うまく機能しないので、ご注意ください。シェアボタン用のメニューは、投稿ページとトップページでのみ表示されます。Ver1.8で追加されたため、これ以下のバージョンでは利用できません。リンク文字列(ナビゲーションラベル)次にリンク文字列(アイコン+テキスト)です。アイコンはFontAwesomeを利用しています。好きなアイコンを選んで使いましょう。具体的には、以下のように入力します。fa-home"></i>ホーム水色の部分がアイコンのコードで、「ホーム」という文字はアイコンのすぐ下に表示されます。改行は自動で入るので、コードとテキストを詰めて並べればOKです。アイコンコードの探し方SANGOのバージョンや設定により使用可能なFontAwesomeのアイコンが異なります。v1.7以上をご利用の場合、あらかじめFontAwesome5が有効になっています(詳しくはこちら)。v1.6以下をご利用の場合には、FontAwesome4.7しか使用できません。FontAwesome4.7のアイコン一覧アイコンコードをコピペそれぞれ、上のボタンのリンク先からアイコンの一覧を見ることができます。使いたいアイコンをクリックすると、詳細ページが開きます。アイコンのコードが記載されているので、こちらをそのままコピペすればOKです。(上の画像はFontAwesome4.7の場合です。左から現れるナビドロワー(ハンバーガーメニューで設定したもの)を項目に含めたい場合には、リンク文字列を以下のように囲む必要があります。fa-list-ul"></i>メニュー</label>↑このようにlabelタグで囲むことで、タップしたときにメニューが横から表示されるようになります。分からなければ、上の記入例をそのままコピペして頂ければと思います。ハンバーガーメニュー連携を使用するためには、ウィジェットでナビドロワー(ハンバーガーメニュー)を設定しておく必要があります。手順4:表示させたい項目を全て追加する↑このように使いたいメニュー項目を全て追加しましょう。参考までに入力例をまとめておきます。下にスクロールし「モバイル用フッター固定メニュー」にチェックを入れて、保存します。保存を忘れないように!手順6:カスタマイザーで設定をする次にカスタマイザーで設定を行います。「シェア」「フォロー」を使う場合はチェック「シェア」や「フォロー」のメニューを使う場合には、こちらにチェックを入れましょう。チェックを入れないと、メニューをタップしても反応しません。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の読み込み方を変える」ようなプラグイン(主に高速化関係のものだと思います)を入れていないかチェックしてみてください。プラグインの設定を変えるだけでも正しく動くようになるかもしれません。2019/11/06モバイルフッター固定メニューにオリジナル画像のアイコンを使用したい最近SANGOを購入させていただきました。質問で申し訳ないのですが、モバイルフッターコテイメニューの1つにオリジナルの画像(アイコン)を使用することができないかなと考えております。SANGOを使っているであろうサイトで、アイコンがオリジナルのものになっているのを見つけたので。お時間ありましたらご教授ください。2019/10/14スマホだと上手く機能しないものがある。シェアボタンが機能しないことがあります。原因がわかれば教えていただきたいです。2019/09/28google広告のコンバージョンタグ(onclick)をメニューに設置したいお世話になっております。SANGOテーマを愛用させて頂いています。google広告の公式ページによると、コードに直接onclick属性を追加するとの記載があります。下記URLがその該当ページになります。「シェアボタン機能を使用する」にチェックを入れ、その他の設定もできているかなと思うのですが、動きません。リンクはおそらくきちんと設定できていると思います。2019/08/28フッターメニューについてお世話になってます。いつもSANGO愛用させていただいています。固定フッターメニューではなく、通常表示されるフッターについての質問だったのですが、サルワカさんのようにフッターメニューをボックスデザインにしたいです。お忙しいとは存じますが、よろしくお願い致します。2019/07/18特定の記事のみでフッター固定メニューを表示したいお世話になっております。フッター固定メニューを特定の投稿ページのみで表示させたいのですが、ご教授いただけますと助かります。雑記ブログを作っていますので、特定のカテゴリに属する投稿ページでは○○のフッター固定メニュー、また別のカテゴリに属する投稿ページでは☓☓のフッター固定メニューと動作させたいのです。四苦八苦しておりうまくいきません。2019/06/23フッター固定メニューの「メニュー」を押しても反応がないお世話になります。説明どうりに設定し、スマホで確認しました。メニューだけ何の反応も起こりません。丸一日費やしていますが、頭がこんがらがって訳がわからなくなっています。2019/06/04スマホフッターと記事の間にグレー背景が入るPC画面では出ないのですが、スマホだけフッターと記事の間にグレー背景が入ってしまうので、消したいです。カスタマイズのカラーのところにも変更できる箇所が無かったので、解決策を教えていただけますと幸いです。2019/04/11モバイル用フッタ―の問い合わせ先をメールにしたいSANGOを購入させていただいたばかりの者です。かわいいテーマに出会えてうれしいです。モバイル用フッターに問い合わせ先のアイコンを設定したのですが、リンク先URLを例にある電話ではなく、メールアドレスにしたいです。fa-twitter」になっているすてきなテーマをありがとうございます。fa-twitter」になってしまっていてアイコンが表示されません。fa-twitter」になったと思いますが、変更のやり方がわかりません。2019/03/28Feedlyマークの部分をYouTubeのマークに変更可能ですか?お世話になっております。サルワカ様のおかげで自分でWPを作ることができ、大変感謝しております。可能であれば方法を教えて頂きたいのですが、現在「モバイルフッター固定メニュー」に「フォロー」を追加しモバイルでも正常に表示されております。初めまして、素敵なテーマをありがとうございます。シェアボタンを削除したいのですが、全て削除するのではなく「はてぶ」のみ削除をすることは可能でしょうか。シェアボタンの順序を変更することは可能でしょうか。(FB、Line、twitter、pocketの順に変更したいと思っています。お忙しい中恐縮ではございますが、何卒よろしくお願いいたします。2019/03/04モバイルフッター固定メニューのシェアボタンが表示されないサルワカ様、素敵なテーマをありがとうございます。こちらの記事を参照し、モバイル用フッター固定メニューでシェアボタンの表示はできたのですが、ボタンを押してもボタンの色が変わるのみでシェアが表示されません。そもそも、カスタマイザーのフッター固定メニューの設定で「シェアボタンを使用する」という項目が見当たりません。リンク先URL、jQueryのエラー確認済みです。2019/03/01モバイルフッター固定メニューを設定したが、ボタンを押すと「ページを開けません。設定した「シェア/フォロー/メニュー/トップ」のボタンを押すと「ページを開けません。発生したエラー:“URLを表示できません”」と表示されてしまいます。2018/11/27スマホから見た時にメニューなどが表示されない素敵なテーマありがとうございます。スマホから見た時に以下が表示されません。こちらで見落としあるかもしれませんがおわかりの点あれば教えていただきたいです。2018/10/25モバイル用フッター固定メニューのアイコンサイズを変えたい使いやすいテーマ、ありがとうございます。やっても効かないのですが。2018/10/23シェアボタンを非表示にしたいシェアボタンを非表示にしていますが、グレーの背景が残ってしまっているので、そちらも非表示または白背景にしたいのですが、どのように行えばよろしいでしょうか。2018/09/19サルワカ様素敵なテーマ有難うございます。デザインが気に入って初めてのwpのテーマとして使わせて頂く事にしました。モバイル固定フッターメニューで上手く行かない事があったので質問させてください。子テーマはPORIPUを利用しています。固定フッターメニューがどのように表示されるか確認する為、手順通りにカスタムリンクを設定しました。2018/09/18カテゴリごとに表示するメニューを切り替えたい初めまして。素敵なテーマでいつも記事の更新が楽しみです。ありがとうございます。表示されるようにフッダーメニューやヘッダーメニューを切り替えるなどです。2018/09/15フッターメニューで設定していないスマホ用ナビドロワーが表示されてしまうお世話になっております。私の何かの設定ミスや見落としであるとは思うのですが、フッターメニューをスマホで選択した際に、スマホ用ナビドロワーが表示されてしまいます。(フッターメニューとモバイルフッターメニューはそれぞれ設定しています。PCでは問題なく、フッターメニューからリンク先が表示されます。想定出来る原因が分かれば教えて頂ければと思います、よろしくお願い致します。いつもお世話になっております。2018/07/22モバイル用フッター固定メニューを使いたくて取り付けたところ、モバイルでシェアボタン表示されクリックできることこまできました。リンク先の表示が5つ表示され内、3つが「□の中に×」という表示になっています。