
こんにちは。
最近、本業の忙しさでパソコンをなかなか触れないサラリーマンの慎仁です。
今回の記事は『賢威7』の記事です。
スマホで私自身のサイトを見るたびに、ずっと実施したいと思っていたこと。
スマホ用の固定フッターの実装!
html、cssの修正が伴いましたが、
実際に出来たものがこれです。
このスマホ用固定フッターは、
スクロールすると画面から消える記事タイトル、グローバルメニューと違い、
常に画面下部に表示されているものです。
今回は、スマホでの直帰率を下げるための
スマホ用固定フッターの実装方法
について、お話しします。
Contents
スマホ用固定フッターを実装したかった理由とは・・・
そもそも、
なんで私がスマホ用の固定フッターを実装したいと思っていたか。
理由は、他の記事へのアクセスを容易にするためです。
ページの一番上には、記事タイトルやグローバルメニューがありますので、
他の記事を読みたいとき、すぐにアクセス可能です。
しかし、
一旦記事を読み始めると、ページトップか、サイドバー領域まで下がらないと他の記事へのアクセスが出来ません。
もし、記事の途中で、他の記事が読みたいと思った時、
「すぐにアクセスできないなら、もう見るの止めよっと」
となってしまい、ブログからの離脱につながってしまいます。
ブログからの即時離脱を回避するため、
記事のどの部分を読んでいても、トップページやホームに戻るようなメニューバーを実装したかった。
それが、
スマホ用固定フッターの実装方法
を実装したかった理由です。
スマホ用固定フッターを実装してみよう
前提条件
まず、私のブログ環境について、お話しします。
下記、前提条件と同等である前提、これから実装方法を説明していきます。
- 賢威7WordPress・コーポレート版 BLUEのテンプレート使用
- 賢威7子テーマ使用
- ”footer.php”を子テーマへ実装済み
但し、別のテンプレートでも同等だと思っています。
子テーマ使用せずであれば、3も不要ですので、
賢威7のWordPress版で有れば、実装可能でしょう。
固定フッター用のフローティング要素を追加する
まずはフローティング要素を追加します。
今回の修正で、以下のように固定フッター用のフローティング要素が追加されます。
また、トップページへのリンクボタンも削除しています。
修正するファイルは、”footer.php”と”rwd.css”です。
修正する前には、上記2ファイルのバックアップは取っておいてくださいね。
また、修正後の確認は、自身のスマホで確認してください。
私もスマホ片手に、
ファイルを修正しては、スマホを確認。
また修正した後、スマホを確認。
この繰り返しをしていました。
”footer.php”内の変更前の部分を、変更後のように修正してください。
そして、今回の修正は、
変更前の”ページトップ”記述は削除してしまう点、ご注意を。
・変更前
<!--▼ページトップ--> <a href="#top"><img class="over" src="<?php echo esc_url(get_template_directory_uri()); ?>/images/common/page-top_off.png" width="80" height="80" alt="<?php _e('To the top', 'keni'); ?>"></a> <!--▲ページトップ-->
・変更後
<!--▼スマホフッターメニュー--> <?php if (wp_is_mobile()) : ?> <div id="sample"> スマホフッターメニュー 実装中 </div> <?php else: ?> <?php endif; ?> <!--▲スマホフッターメニュー-->
”rwd.css”
この修正で、追加するフローティング要素のビジュアルを形作っていきます。
背景色(background)、幅(width)、高さ(height)、フローティング下部スキマ量(bottom)を自由に設定できます。
スマホを見ながら、いろいろと値を変更してみてください。
・変更前
@charset "UTF-8"; /*子テーマ用「rwd.css」*/
・変更後
@charset "UTF-8"; /*子テーマ用「rwd.css」*/ /* ▼スマホフッターメニュー */ @media only screen and (max-width : 640px){ #sample { position: fixed; background:#3770AD; width:100%; height: 65px; bottom: 0px; } } /* ▲スマホフッターメニュー */
固定フッターにメニューボタンを実装する
フローティング要素を追加出来たら、最後にメニューボタンを実装していきます。
修正後、以下のようなスマホ用固定フッターが完成します。
修正するファイルは、先ほどと同様、”footer.php”と”rwd.css”です。 早速修正内容を記載していきます。
”footer.php”内の変更前の部分を、変更後のように修正してください。
この修正で、フッターのメニューボタン数、ボタンの用途(リンク先)、使用アイコンを決めます。
アイコンは下記サイトのアイコンを使用しています。
Font Awesome Icons
・変更前
<!--▼スマホフッターメニュー--> <?php if (wp_is_mobile()) : ?> <div id="sample"> スマホフッターメニュー 実装中 </div> <?php else: ?> <?php endif; ?> <!--▲スマホフッターメニュー-->
・変更後
<!--▼スマホフッターメニュー--> <?php if (wp_is_mobile()) : ?> <div id="sample"> <!--スマホフッターメニュー 実装中--> <div id="footer-menu-sp"> <ul> <a href="https://shinjin01.com/"> <li><span><i class="fa fa-home" aria-hidden="true"></i></span> ホーム </li> </a> <a href="#top"> <li><span><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i></span> トップ </li> </a> </ul> </div> </div> <?php else: ?> <?php endif; ?> <!--▲スマホフッターメニュー-->
”rwd.css”
この修正で、追加するメニューボタンのビジュアルを形作っていきます。
フローティング要素同様、ボタンの背景色(background)、幅(width)、高さ(height)など、自由に設定できます。
スマホを見ながら、いろいろと値を変更してみてください。
・変更前
/* ▼スマホフッターメニュー */ @media only screen and (max-width : 640px){ #sample { ・・・ } } /* ▲スマホフッターメニュー */
・変更後
/* ▼スマホフッターメニュー */ @media only screen and (max-width : 640px){ #sample { ・・・ } } @media only screen and (max-width : 640px){ #footer-menu-sp ul { list-style-type: none; /*箇条書きのポッチを消す*/ text-align:center; /*左右中央寄せは親要素に対して指定*/ margin-left: 0px; } #footer-menu-sp ul li { display: inline-block;/*inline-blockにします*/ width: 120px;/*幅も指定できる*/ height: 50px;/*高さも指定できる*/ /*padding: 10px 0;/*余白も指定できる*/ /*margin: 10px 0;/*余白も指定できる*/ vertical-align: middle;/*縦の表示位置も指定できる*/ background: #3770AD; /*font-weight: bold;/*文字を太字に*/ color:white; /*文字色を白に*/ } } /* ▲スマホフッターメニュー */
まとめ
今回は、スマホ用固定フッターとして、
ホーム、トップページへの2ボタンを実装しました。
追加ボタンの実装、ビジュアルの変更等、
実装したい内容がまだ残っています。
追加の際は、改めて記事にします。
私自身、テンプレート修正の記事は、初めてでした。
html、cssの知識としては、まだ不足しているため、
別の良い方法があれば、コメント、問い合わせ頂けるとありがたいです。
↓↓↓

長い文章を最後まで読んで頂きありがとうございました。
ぽちっとして頂けるとまたがんばれます。
↓↓↓
![]() |
![]() |
スポンサードリンク