WordPressスマホ固定フッター(フロート)メニューの表示方法!コピペ可のCSSコードも!

WordPressスマホフッターの固定フロートメニュー表示方法!コピペ可のCSSコードも!

WordPressスマホ固定フッター(フロート)メニューをカスタマイズで表示させる方法!コピペ可のCSSコードも!

テンプレートの機能にはないけど、WordPressサイトをスマートフォンで開いたときにフッターに固定メニュー(フロートメニュー)を表示させたい!

そんなあなたに、超PC音痴の私が、自作でできるカンタンなカスタマイズ方法を【コピペできるCSS&HTMLコード】とともにお教えします♪

WordPressスマホ固定フッター(フロート)メニューをカスタマイズで表示させました!

WordPressスマホフッターの固定フロートメニュー表示方法!コピペ可のCSSコードも!

 

こんにちは~♪凛(@Rin_LBLL)です★

 

本日は、システム&PC超絶音痴のわたしが七転八倒しながらなんとか完了させた…

「スマホの固定(フロート)フッター」の自作方法、参考サイトや実際のコード

をドドンと公開します(´艸`*)✨

 

これを読めば…

私が半日以上かけて完成させた方法がサクッと数分で完了します♪

回り道なしでフッターメニューをパパっと完成させちゃってください!

 

凛(りん)

完成するまで、本当に大変だった…(TωT)

でも、この記事の内容をそっくりそのまま実践すれば完成はすぐですよ~^^♪

WordPressスマホ固定フッター(フロート)メニューとは?メリットも!

じゃあ早速カスタマイズ方法を…と進みたいところですが!

 

こまリス

そもそも、スマホの固定フッターメニューって何?

なんで表示させる必要があるの?

 

…と疑問に思っている方のために、簡単にご説明しますね♪

 

スマホの固定フッターメニューって?

 


このピンクの太線で囲んだ部分が、今回自作したフッターメニューです♪

これはスクロールしてもずっとページの一番下に「固定」で表示されます(*´▽`*)✨

 

スマホの固定フッターメニューのメリットは?

 

スマホの固定フッターには、自分で指定した特定のメニューを表示させることができます。

指定したページへのリンク、検索窓、ハンバーガーメニュー(開くといくつかのページのリンクが表示される)など、配置は自由です♪

 

 

記事数が増えてくると、ついつい古い記事は新しい記事の下に埋もれがち…。

でも、スマホの固定フッターメニューがあれば、閲覧してもらいたいページへぐいっと読者さんを誘導することができちゃいます(/ω\*)

検索窓やハンバーガーメニューを設置すれば、読者さんの満足度や使い勝手も向上させることができますね★

 

 

サイトアフィリエイトでも使える手法ですね(´艸`*)✨

直接商品ページに案内したり、力を入れたキラーページに案内することで…ぐぐっと成約率が高まります♪

 

さぼっくま

なるほどね!

情報発信サイトだけじゃなくて、アフィリエイトサイトにも使えるなら覚えておいて損はないね♪

WordPressスマホ固定フッター(フロート)メニューの作成・カスタマイズ手順!

 

今回のカスタマイズで、一番お世話になったサイトがこちらっ!

▶スマートフォンページのフッターに固定メニューを作成してみました|アフィリエイトで稼ぐ方法を全部話そうと思う

 

本当に参考にさせていただきました!

こんなコードを自力で書けるなんて…神以外のなにものでもない…(崇拝

ありがとうございます~(TωT)!!

 

注意

これから親テーマを編集することになりますので、かならずバックアップをとっておいてくださいね!!

わたしは「BackWPup」というプラグインでバックアップデータをPCに保存してからスタートしました★

 

また、後ほどおはなししますが…

上記のサイトでは、スマホフッターに表示させる「メール」や「ハート」「星」、などの記号アイコンを「icomoon」からダウンロードしています。

ただ、私のサイトではアイコンの読み込みに関しては他の方法をとっていますので、若干コードが異なります。

 

そして…わたしの利用しているテンプレートは▶ハミングバードのため、他のテンプレートでは手順や表示が異なる場合がありますので、ご了承ください(><。

 

こちらをもとに…

まずは、テンプレートの子テーマの「追加CSS」に下記のコードを記載します。

※今回はフッターメニューに「SNSシェアボタン」を私は入れていませんが、今後カスタマイズする可能性もあるため、上記の「SNSの部分」と記述されたコードには入れたままにしています

 

つづいて…

WordPressダッシュボード>外観>テーマの編集>右上の「編集するテーマを選択」から親テーマを選択>「テーマフッター」を選択>コードの中の</body>の直前に下記のコードをコピペ&貼り付け>「ファイルを更新」ボタンをクリックして完了!

 

 

このコードでは、フッターメニューの5つの項目のうち、

■一番左が「メニュー」

■一番右が「検索」

というところは決めてしまっていますが…

そのほかは自由に設定が可能です(´艸`*)✨

 

 

こちらの最初の「■URL1」~「■URL3」には好きなURLを、「■左から2番目」~「■左から4番目」にはお好きなメニュー名をそれぞれ入力してください♪

※「■」も削除して入力してくださいね^^*

 

私の場合、フッターメニューの表示名は…

「■左から2番目」は「メルマガ」

「■左から3番目」は「外注化」

「■左から4番目」は「Adsense」

としているので参考にしてくださいね^^*

 

そして、一番左のハンバーガーメニューに表示させるページは…

 

こちらの「■メニューURL1」~「■メニューURL7」と「■メニュー1■」~「■メニュー7■」も同様にお好きなURLとメニュー名を入れてくださいね♪

※7つもいらない場合は、必要ない箇所を削除してOK!削除するのは、それぞれの行の<li>~</li>です^^*

 

ちなみに私の場合は、メニューの中身はこんな感じにしています(*’ω’*)b

 

 

こちらの画像の下にある「三本線のメニュー」「メール」「ハート」「星」のマークのアイコンの表示方法については、このページを参考にさせていただきました(´艸`*)✨

 

▶WordPressでアイコンフォントを導入する方法|Web Shufu WordPressブログ運営日誌

 

図解でとってもわかりやすかったです(/ω\*)

本当にありがとうございます!!

 

わたしが使っているアイコンと異なるアイコンを利用したい場合は、上記のサイトにもありますが…

 

▶コチラのサイトから

好きなアイコンを選択>「Copy HTML」でコードを表示>コードの”○○”の中の○○の部分をコピー!

 

 

この中の、

 

“○○”で囲まれた「dashicons dashicons-email」の部分を、先ほどコピーしてきたアイコンのコードに変更!

 

ここでアイコンを変更しない場合は上記のわたしが利用したアイコンと同じ並びになります♪

※左から「ハンバーガーメニュー」⇒「メール」⇒「ハート」⇒「星」⇒「検索」のマークですね^^*

 

これで完了です★

本当にお疲れ様でした~(/ω\*)

 

注意

「一部のiPhoneでスマホフッターが表示されない」という事例が報告されております!

解決策がわかり次第、追記させていただきますっ(><

こうやったら解決したよ♪という声も大募集中です!

カスタマイズに強く心優しき読者さんのアドバイスを心よりお待ちしております(TωT)

 

凛(りん)

わたしがお世話になった2つのサイトもあわせて読んで、自分のお気に入りのフッターメニューを作ってみてくださいね♪

 

自分でフッターメニューを表示させられたとき、ものすごい達成感を得られること間違いなし♪です!

少しでも役に立った!と感じたら…応援ぽち♪おねがいします(´艸`*)✨

 

あと、自分で書いておいて本当に恐縮なのですが…

私が実際に利用しているコードを改変してのカスタマイズに関するご質問はお答えできない可能性が高いです…(TωT)うう

そもそもが、とーーーってもニガテな分野なので、何卒ご了承くださいませ…(笑)

 

こまリス

でも、ここに書かれている方法で大のPC音痴が実際にフッターメニューが完成したことは事実♪(笑)

 

「フッターメニュー表示させたいけどテンプレートに機能がついていなくて諦めてる…(。´・ω・)」そんな方はぜひチャレンジしてみてね!

さぼっくま
バックアップは忘れずに!ね!
主婦・凛が3ヶ月で100万稼ぎ、ブログで理想の人生を手に入れた方法をこっそり教える無料メルマガ♪ 

 

凛の無料メルマガ講座に登録してくださった方に大好評♡

 

 

月144万円を5か月目で達成するまでの

◆月ごとの報酬画面

◆アクセス(PV)推移

◆作業記録や凛の思考

をまとめた特設サイト!

 
 

「Rin's Secret Base」の秘密パスワード

…を、もれなく全員にプレゼントします!

 

こまリス

この凛の5か月間の行動の軌跡を辿るだけで、楽しみながら「おうちで収入を得る方法」が圧倒的かつ具体的!!にわかっちゃいます♪

  • 「やりたいこと」より「やらなければいけないこと」優先の生活を抜け出したい!
  • もはや会社も「100%の安定」を保証できない時代…会社に頼らず、自力で稼ぐ力を養いたい!
  • ママ業と仕事を両立させて、もっともっと輝きたい!

 

そんな方は必見♡

凛(りん)

この機会に

『人や会社に流されず、自力で稼ぐ方法』

を知ってください(*´▽`*)ノ

 

 

<無料プレゼント&最新情報GETは2STEPで完了★>

  1. ①「お名前」「メールアドレス」の2点を入力!
  2. ②「送信」ボタンを押して完了!

プレゼントは登録後すぐにGETできます♪



*お名前
*メールアドレス

 

さぼっくま
スマホでも手軽に読めるので、速攻で凛のノウハウを自分のものにしちゃってください(*・ω<*)♡