Booking関連TablePress関連WordPressのSEO対策WordPressのPHPMenuSidebarPrevNextSearchホーム>WordPressカスタマイズフローティングメニューをフッターに表示するWordPressサイトのフッターにメニューを表示したいという要望をよく聞きます。このフッターメニューは単なる本文下の「フッター」ではなく、画面の一番下に固定で表示される「フローティングメニュー」のことを指していることが多いです。フッターに固定表示されるフローティングメニューのイメージここでは、フッターに連絡先画像やアイコンを使ったフローティングメニューを表示する方法を紹介します。管理画面でフッター固定メニューをメンテナンスできます。Awesome版スポンサーリンクフッターに「お問い合わせはこちら」を表示フッターに次のような連絡先画像を固定で表示したいこともあります。次のようなHTMLをフッター(footer.php)の適当な場所、たとえばwp_footer()とbodyタグの間に入力すれば、画面の一番下に表示されるようになります。src="http://...略.../contact.png"></a></div>リンク先や画像パスは修正してください。合わせて画面の一番下に固定して表示するため、次のCSSをテーマ(子テーマ)のstyle.cssなどに入力します。99%;}表示結果は次のようになります。常に画面の一番下に固定で連絡先画像が表示されるようになります。表示されるフローティングメニューある程度スクロールしてから表示する画面表示の直後ではなく、ある程度スクロールしてからフローティングメニューを表示したい場合は、次のようなjQueryをfooter.phpなどに入力(上記のHTMLの下あたりに)します。});});</script>このコードは以下のサイトを参考にさせていただきました。上記のフローティングメニューをPCでは表示せずタブレットやスマホのみで表示したい場合は、表示するdivタグ全体をifブロックで囲みます。?>wp_is_mobileによって「モバイルの場合はdivタグを表示する」になります。「モバイル」にはスマホ・タブレット・携帯が含まれます。スマホのみで表示する場合スマホのみで表示したい場合はCSSで「画面の幅が大きいときは消す」を指定する方法があります。Call」にするには、パーツ1を次のように変更します。?></div>実際に使うときは「tel:0399999999」の電話番号(0399999999)を修正してください。Callとして機能します。アイコンを使ったフローティングメニューフローティングメニューのdivには1つの画像を表示するだけでなく、メニュー項目をレイアウトしてフッターメニューとしても機能させることもできます。以下は4項目のメニューを作成した例です。src="http://...略.../search.png"></a></div>アイコンの色に合わせてメニューの背景色を指定すれば、フッターメニューらしく見えるでしょう。あまりに大きな面積だったり色や動きによっては不快に思うユーザーもいるので注意が必要です。center;}表示結果は次のようになります。アイコンを使ったフッターメニューアイコンは以下のサイトからダウンロードさせていただきました。ありがとうございます。Awesomeを使ったフッターメニューも紹介しておきます。fa-search"></i></a></div>使いたいアイコンは次のサイトから選んでください。AwesomeアイコンCSSの例は次のようになります。10px;}表示結果は次のようになります。Awesomeを使ったフッターメニューまとめこのようにフッターに画像やメニューを表示してCSSやjQueryで制御することで、フッターに固定するフローティングメニューを作成できます。テーマによっては「外観」-「メニュー」からフッターメニューを設定できない場合もあるでしょうから、このように表示場所を柔軟に指定できるフローティングメニューを設置する方法を覚えておけば役立ちます。あとは試行錯誤していきましょう。Pro」の紹介WordPressでお困りのときはご相談を細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が対応します。最短で本日中に問題解決できます見積もり無料・料金は終了後の後払いです銀座教室・スカイプ・出張またはメールで対応しますWordPress個別サポートについて詳しくはこちらトラブル解決でお急ぎのときはお急ぎのときはWordPressメールサポートで対応します。Proのライセンスを持つユーザー向けのプラグインです。この記事の執筆時点では次のようなブロックが使用可能です。2019年11月30日WordPressでホームページを作成する手順を紹介します。WordPress初心者の方でも迷わないようにすべての手順について画面を掲載しています。短時間でホームページのたたき台を作っていきます。「最近、ホームページのアクセスが減ってるかも?」が気になるとき、対策が必要になりますが、どのページのアクセスが減っているのか、増えているのかチェックできた方が効率的に対処できるはずです。「WordPressの表示速度が遅い」とか「ダッシュボードの動きが重苦しい」など、WordPressの高速化でお悩みの方もいるかと思います。遅いサイトは検索順位や集客にも影響するので死活問題です。2019年9月13日ご存じのようにBizVektorがアップデート終了とのことで、新たに使えるテーマを探している方も多いと思います。ver.7対応)WordPressでホームページを作成する手順を紹介します。