スマホページで最下部にお知らせなどを固定表示させる方法【コピペ対応】

投稿日：2019年4月12日更新日：2021年3月3日

スマホでサイトを閲覧すると出てくる、最下部の案内を自サイトで表示させたいときの方法です。

クライアントサイトでのケース、WordPressのテーマOnepress使用の場合の方法を解説します。

Web365とは

Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。

Web365について詳しく知りたい方は「Web365とは」ご覧ください。

この記事でわかること

style.cssとfooter.phpを編集します。
- footer.phpの編集
  - 案内表示を、少しスクロールしたときに表示させたい
- style.cssの編集
最下部の案内表示の完成イメージ

style.cssとfooter.phpを編集します。

メニューの「外観」の「テーマ編集」の「footer.php」「style.css」とにソースを追加します。

footer.phpの編集

phpとhtmlを組み合わせたソースを追加します。

ここでは、スマホの場合に特定のページの案内を表示させたいとして、その特定ページでは、ここでは、特定ページが投稿ページとして、固定ページのみで表示させる仕様を採用してます。

“<?php　wp_footer():?>”の下あたりに下記ソースを貼ります。

<!-- fied_フッターCTA表示ページ -->

<?php if(wp_is_mobile()) : ?>
	<?php if (is_page(特定ページのスラッグ)) : ?>
		<a href="特定ページURL">
			<div id="footerFloatingMenu">
			<i class="fa fa fa-book "></i> セミナーのお知らせ
		</div>
</a>
	<?php endif ?>
<?php endif ?>

ソースの意味は、
もしモバイルサイズの表示で、
固定ページなら、
特定ページにリンクを貼った、セミナーのお知らせのhtmlソースを表示
といった意味です。

案内表示を、少しスクロールしたときに表示させたい

次に同じくfooter.phpに先程のソースの下、</body>の上あたりに、下記のソース、動きが出せるjQueryを追加します。

<!-- fixed_フッターCTA表示場所 -->
<script>
jQuery(function() {
    var topBtn = jQuery('#footerFloatingMenu');
    topBtn.hide();
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 200) { // 200pxで表示
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
});
</script>

ソースの意味は

先のhtmlのソースにあるクラスID「footerFloatingMenu」をtopBtnという変数名として、

topBtn ははじめは隠しておく、
ブラウザのウィンドウがスクロールされたらしてほしいことがある、
それは、もし200pxスクロールされたら、topBtn をゆっくり表示させて、
200px未満の場合はゆっくり非表示にさせて、
という意味です。

style.cssの編集

htmlソースの表示は上記で出来たので、背景や横幅、文字上下の余白など装飾をします。

styel.cssの最下部に下記ソースを貼ります。

/***** fixed_フッターCTA *****/

#footerFloatingMenu {
    display: block;
    background-color: #F08080;
    width: 100%;
    padding: 5% 0 5% 0;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999;
    text-align: center;
　　color: white;
　　font-weight: bold;
 　 padding: 0 auto;
}

ソースの意味は、

背景ピンクで、
横幅いっぱい、
内側の余白は上下5%くらい、
最下部に固定表示、
他のどんな要素よりも階層は手前に表示させる、
テキストは真ん中に表示、かつ太字
といった感じです。

最下部の案内表示の完成イメージ

下記の写真のようになりました。

上記のソースで、変えたい場合の注意点は、冒頭の<?phpの部分はスペル間違えると、ページ自体にエラーが出て表示されなくなるかもしれないので、スペルチェックしながら、変更してみてください。

もし、不備不明ありましたらお気軽にご連絡ください。

Web制作+Webマーケティングの個別講座開講中

Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております

・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方

どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。

外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。

Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています

・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方

是非Web365までご相談ください。

【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供

Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています

・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方

Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています

・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行（Googleアナリティクス、eコマース、ヒートマップClarityなど）

まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。