WordPressスマホ固定フッター(フロート)メニューをカスタマイズで表示させる方法!コピペ可のCSSコードも!
テンプレートの機能にはないけど、WordPressサイトをスマートフォンで開いたときにフッターに固定メニュー（フロートメニュー）を表示させたい！
そんなあなたに、超PC音痴の私が、自作でできるカンタンなカスタマイズ方法を【コピペできるCSS＆HTMLコード】とともにお教えします♪
Contents
WordPressスマホ固定フッター(フロート)メニューをカスタマイズで表示させました!
こんにちは～♪凛（＠Rin_LBLL）です★
本日は、システム＆PC超絶音痴のわたしが七転八倒しながらなんとか完了させた…
「スマホの固定（フロート）フッター」の自作方法、参考サイトや実際のコード
をドドンと公開します(´艸｀*)✨
これを読めば…
私が半日以上かけて完成させた方法がサクッと数分で完了します♪
回り道なしでフッターメニューをパパっと完成させちゃってください！
WordPressスマホ固定フッター(フロート)メニューとは？メリットも！
じゃあ早速カスタマイズ方法を…と進みたいところですが！
そもそも、スマホの固定フッターメニューって何？
なんで表示させる必要があるの？
…と疑問に思っている方のために、簡単にご説明しますね♪
スマホの固定フッターメニューって？
このピンクの太線で囲んだ部分が、今回自作したフッターメニューです♪
これはスクロールしてもずっとページの一番下に「固定」で表示されます(*´▽｀*)✨
スマホの固定フッターメニューのメリットは？
スマホの固定フッターには、自分で指定した特定のメニューを表示させることができます。
指定したページへのリンク、検索窓、ハンバーガーメニュー（開くといくつかのページのリンクが表示される）など、配置は自由です♪
記事数が増えてくると、ついつい古い記事は新しい記事の下に埋もれがち…。
でも、スマホの固定フッターメニューがあれば、閲覧してもらいたいページへぐいっと読者さんを誘導することができちゃいます(/ω＼*)
検索窓やハンバーガーメニューを設置すれば、読者さんの満足度や使い勝手も向上させることができますね★
サイトアフィリエイトでも使える手法ですね(´艸｀*)✨
直接商品ページに案内したり、力を入れたキラーページに案内することで…ぐぐっと成約率が高まります♪
なるほどね！
情報発信サイトだけじゃなくて、アフィリエイトサイトにも使えるなら覚えておいて損はないね♪
WordPressスマホ固定フッター(フロート)メニューの作成・カスタマイズ手順！
今回のカスタマイズで、一番お世話になったサイトがこちらっ！
▶スマートフォンページのフッターに固定メニューを作成してみました｜アフィリエイトで稼ぐ方法を全部話そうと思う
本当に参考にさせていただきました！
こんなコードを自力で書けるなんて…神以外のなにものでもない…（崇拝
ありがとうございます～（TωT）！！
これから親テーマを編集することになりますので、かならずバックアップをとっておいてくださいね！！
わたしは「BackWPup」というプラグインでバックアップデータをPCに保存してからスタートしました★
また、後ほどおはなししますが…
上記のサイトでは、スマホフッターに表示させる「メール」や「ハート」「星」、などの記号アイコンを「icomoon」からダウンロードしています。
ただ、私のサイトではアイコンの読み込みに関しては他の方法をとっていますので、若干コードが異なります。
そして…わたしの利用しているテンプレートは▶ハミングバードのため、他のテンプレートでは手順や表示が異なる場合がありますので、ご了承ください（＞＜。
こちらをもとに…
まずは、テンプレートの子テーマの「追加CSS」に下記のコードを記載します。
/*--------------------------------
モーダルウィンドウ
---------------------------------*/
.modal-window {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
opacity: 0;
line-height: 1.3;
display: none9;
}
.modal-window:target {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
.is-active.modal-window {
display: block9;
}
.modal-window:target {
display: block9;
}
.modal-window .modal-inner {
position: absolute;
top: 100px;
left: 5%;
z-index: 20;
padding:5%;
margin:0 auto;
width: 80%;
overflow-x: hidden;
border-radius: 6px;
background: #fff;
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
.modal-window .modal-close {
display: block;
text-indent: -100px;
overflow: hidden;
}
.modal-window .modal-close:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: #333;
-moz-opacity: 0.7;
opacity: 0.7;
}
.modal-window .modal-close:after {
content: '\00d7';
position: absolute;
top: 70px;
right:15%;
z-index: 20;
margin:0 auto;
background: #fff;
border-radius: 2px;
padding: 10px 10px;
text-decoration: none;
text-indent: 0;
}
.modal-window {
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}
/*--------------------------------
スマホのフッターメニュー
---------------------------------*/
ul.footer_menu {
margin: 0 auto;
padding: 12px 0;
width: 100%;
overflow: hidden;
display: table;
table-layout: fixed;
text-align: center;
width: 100%;
}
ul.footer_menu li {
margin: 0;
padding: 0;
display: table-cell;
vertical-align:middle;
list-style-type: none;
font-size: 13px;
line-height: 15px;
}
ul.footer_menu li a i{
font-size: 24px;
}
ul.footer_menu li a {
border: none;
display: block;
color: #fff;
text-align: center;
text-decoration: none;
}
.footer_menu {
position: fixed;
bottom: 0;
left:0;
background: #000;
z-index: 9999999999;
-moz-opacity: 0.9;
opacity: 0.9;
}
/*--------------------------------
SNSの部分
---------------------------------*/
.modal-window .modal-inner.sns{
margin:0 auto;
text-align:center;
}
.modal-inner ul {
list-style:none;
}
.modal-inner li {
list-style:none;
float:left;
width:25%;
margin:3%;
}
.modal-inner li a {
font-size:150%;
position:relative;
display:block;
padding:10px;
color:#fff;
border-radius:6px;
text-align:center;
text-decoration: none;
}
.modal-inner li a:hover {
box-shadow:none;
}
.share li a {display : block;
padding : 10px 5px;
color : #fff;
font-size : 14px;
text-decoration : none;
text-align : center;}
.share li a:hover {opacity :0.8;
color : #fff;}
.share li a:visited{ color: #fff;}
.tweet a{background-color : #55acee;}
.facebook a{background-color : #315096;}
.googleplus a{background-color : #dd4b39;}
.hatena a{background-color : #008fde;}
.line a{background-color: #00c300;}
.pocket a{background-color :#f03e51;}
.rss a {background-color: #ff8c00;}
.feedly a {background-color: #6cc655;}
.share-sm {margin:0;}
.share-sm ul:after {content : "";
display : block;
clear : both;}
/*--------------------------------
メニューの部分
---------------------------------*/
.mod li{
float:none;
display:block;
width:100%;}
.mod li a {
text-align: left; /* メニューを左寄せ */
font-weight: bold; /* メニューを太字に */
background: #000; /* メニューの背景色 */
margin: 2%;
font-size: 14px; /* メニュー文字サイズ */
}
/*--------------------------------
スマホフッターフロートメニューアイコン
---------------------------------*/
@charset "UTF-8";
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?71374117');
src: url('../font/fontello.eot?71374117#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?71374117') format('woff2'),
url('../font/fontello.woff?71374117') format('woff'),
url('../font/fontello.ttf?71374117') format('truetype'),
url('../font/fontello.svg?71374117#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?71374117#fontello') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-th-list:before { content: '\2261'; } /* '≡' */
.icon-star-empty:before { content: '\2606'; } /* '★' */
.icon-mail:before { content: '\2709'; } /* '✉' */
.icon-heart:before { content: '\2764'; } /* '♡' */
.icon-search:before { content: '♬'; } /* '\1f50d' */
※今回はフッターメニューに「SNSシェアボタン」を私は入れていませんが、今後カスタマイズする可能性もあるため、上記の「SNSの部分」と記述されたコードには入れたままにしています
つづいて…
WordPressダッシュボード＞外観＞テーマの編集＞右上の「編集するテーマを選択」から親テーマを選択＞「テーマフッター」を選択＞コードの中の</body>の直前に下記のコードをコピペ＆貼り付け＞「ファイルを更新」ボタンをクリックして完了！
<?php if(wp_is_mobile()) { ?>
<ul class="footer_menu">
<li><a href="#modal-p01"><span class="dashicons dashicons-menu"></span><br>メニュー</a></li>
<li><a href="■URL1"><span class="dashicons dashicons-email" style="font-size:16px"></span><br>■左から2番目</a></li>
<li><a href="■URL2"><span class="dashicons dashicons-heart" style="font-size:16px"></span><br>■左から3番目</a></li>
<li><a href="■URL3"><span class="dashicons dashicons-star-filled" style="font-size:16px"></span><br>■左から4番目</a></li>
<li><a href="#modal-p05"><span class="dashicons dashicons-search" style="font-size:16px"></span><br>検索</a></li>
</ul>
<?php } else { ?> <?php } ?>
<!--modal-p01の中身-->
<div class="modal-window" id="modal-p01">
<div class="modal-inner">
<ul class="mod">
<li><a href="■メニューURL1">■メニュー１■</a></li>
<li><a href="■メニューURL2">■メニュー２■</a></li>
<li><a href="■メニューURL3">■メニュー３■</a></li>
<li><a href="■メニューURL4">■メニュー４■</a></li>
<li><a href="■メニューURL5">■メニュー５■</a></li>
<li><a href="■メニューURL6">■メニュー６■</a></li>
<li><a href="■メニューURL7">■メニュー７■</a></li>
</ul>
</div>
<a href="#!" class="modal-close">×</a>
</div>
<!--modal-p05の中身-->
<div class="modal-window" id="modal-p05">
<div class="modal-inner">
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url('/'); ?>">
<div>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>
</div>
<a href="#!" class="modal-close">×</a>
</div>
このコードでは、フッターメニューの5つの項目のうち、
■一番左が「メニュー」
■一番右が「検索」
というところは決めてしまっていますが…
そのほかは自由に設定が可能です(´艸｀*)✨
<li><a href="■URL1"><span class="dashicons dashicons-email" style="font-size:16px"></span><br>■左から2番目</a></li> <li><a href="■URL2"><span class="dashicons dashicons-heart" style="font-size:16px"></span><br>■左から3番目</a></li> <li><a href="■URL3"><span class="dashicons dashicons-star-filled" style="font-size:16px"></span><br>■左から4番目</a></li>
こちらの最初の「■URL1」～「■URL3」には好きなURLを、「■左から2番目」～「■左から4番目」にはお好きなメニュー名をそれぞれ入力してください♪
※「■」も削除して入力してくださいね＾＾*
私の場合、フッターメニューの表示名は…
「■左から2番目」は「メルマガ」
「■左から3番目」は「外注化」
「■左から4番目」は「Adsense」
としているので参考にしてくださいね＾＾*
そして、一番左のハンバーガーメニューに表示させるページは…
<li><a href="■メニューURL1">■メニュー１■</a></li> <li><a href="■メニューURL2">■メニュー２■</a></li> <li><a href="■メニューURL3">■メニュー３■</a></li> <li><a href="■メニューURL4">■メニュー４■</a></li> <li><a href="■メニューURL5">■メニュー５■</a></li> <li><a href="■メニューURL6">■メニュー６■</a></li> <li><a href="■メニューURL7">■メニュー７■</a></li>
こちらの「■メニューURL1」～「■メニューURL7」と「■メニュー１■」～「■メニュー7■」も同様にお好きなURLとメニュー名を入れてくださいね♪
※7つもいらない場合は、必要ない箇所を削除してOK！削除するのは、それぞれの行の<li>~</li>です＾＾*
ちなみに私の場合は、メニューの中身はこんな感じにしています(*’ω’*)b
こちらの画像の下にある「三本線のメニュー」「メール」「ハート」「星」のマークのアイコンの表示方法については、このページを参考にさせていただきました(´艸｀*)✨
▶WordPressでアイコンフォントを導入する方法｜Web Shufu WordPressブログ運営日誌
図解でとってもわかりやすかったです(/ω＼*)
本当にありがとうございます！！
わたしが使っているアイコンと異なるアイコンを利用したい場合は、上記のサイトにもありますが…
▶コチラのサイトから…
好きなアイコンを選択＞「Copy HTML」でコードを表示＞コードの”○○”の中の○○の部分をコピー！
<li><a href="#modal-p01"><span class="dashicons dashicons-menu"></span><br>メニュー</a></li> <li><a href="■URL1"><span class="dashicons dashicons-email" style="font-size:16px"></span><br>■左から2番目</a></li> <li><a href="■URL2"><span class="dashicons dashicons-heart" style="font-size:16px"></span><br>■左から3番目</a></li> <li><a href="■URL3"><span class="dashicons dashicons-star-filled" style="font-size:16px"></span><br>■左から4番目</a></li> <li><a href="#modal-p05"><span class="dashicons dashicons-search" style="font-size:16px"></span><br>検索</a></li>
この中の、
<span class="dashicons dashicons-email" style="font-size:16px">
“○○”で囲まれた「dashicons dashicons-email」の部分を、先ほどコピーしてきたアイコンのコードに変更！
ここでアイコンを変更しない場合は上記のわたしが利用したアイコンと同じ並びになります♪
※左から「ハンバーガーメニュー」⇒「メール」⇒「ハート」⇒「星」⇒「検索」のマークですね＾＾*
これで完了です★
本当にお疲れ様でした～(/ω＼*)
「一部のiPhoneでスマホフッターが表示されない」という事例が報告されております！
解決策がわかり次第、追記させていただきますっ（＞＜
こうやったら解決したよ♪という声も大募集中です！
カスタマイズに強く心優しき読者さんのアドバイスを心よりお待ちしております（TωT）
わたしがお世話になった2つのサイトもあわせて読んで、自分のお気に入りのフッターメニューを作ってみてくださいね♪
自分でフッターメニューを表示させられたとき、ものすごい達成感を得られること間違いなし♪です！
少しでも役に立った！と感じたら…応援ぽち♪おねがいします(´艸｀*)✨
あと、自分で書いておいて本当に恐縮なのですが…
私が実際に利用しているコードを改変してのカスタマイズに関するご質問はお答えできない可能性が高いです…(TωT)うう
そもそもが、とーーーってもニガテな分野なので、何卒ご了承くださいませ…(笑)
でも、ここに書かれている方法で大のPC音痴が実際にフッターメニューが完成したことは事実♪(笑)
「フッターメニュー表示させたいけどテンプレートに機能がついていなくて諦めてる…(。´･ω･)」そんな方はぜひチャレンジしてみてね！
▼ぽちっと応援♪おねがいします～★▼
いつも応援ありがとうございます♪
◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆
凛のメルマガに登録すると、上記のようなアフィリエイトお役立ち情報が届きます(^^♪
無料プレゼントは「凛が144万円稼ぐまでの5か月間の報酬・行動・思考」すべてをまとめたサイト！大好評なので、お見逃しなくっ★
凛の無料メルマガ講座に登録してくださった方に大好評♡
月144万円を5か月目で達成するまでの
◆月ごとの報酬画面
◆アクセス(PV)推移
◆作業記録や凛の思考
をまとめた特設サイト！
「Rin's Secret Base」の秘密パスワード
…を、もれなく全員にプレゼントします！
この凛の5か月間の行動の軌跡を辿るだけで、楽しみながら「おうちで収入を得る方法」が圧倒的かつ具体的！！にわかっちゃいます♪
- ◆「やりたいこと」より「やらなければいけないこと」優先の生活を抜け出したい！
- ◆もはや会社も「100％の安定」を保証できない時代…会社に頼らず、自力で稼ぐ力を養いたい！
- ◆ママ業と仕事を両立させて、もっともっと輝きたい！
そんな方は必見♡
この機会に
『人や会社に流されず、自力で稼ぐ方法』
を知ってください(*´▽｀*)ﾉ
＜無料プレゼント＆最新情報GETは２STEPで完了★＞
- ①「メールアドレス」「お名前」の2点を入力！
- ②「送信」ボタンを押して完了！
プレゼントは登録後すぐにGETできます♪
完成するまで、本当に大変だった…（TωT）
でも、この記事の内容をそっくりそのまま実践すれば完成はすぐですよ～＾＾♪