nvtrlab / Pixabay

こんにちは。

最近、本業の忙しさでパソコンをなかなか触れないサラリーマンの慎仁です。

 

今回の記事は『賢威7』の記事です。

 

スマホで私自身のサイトを見るたびに、ずっと実施したいと思っていたこと。

 

スマホ用の固定フッターの実装!

 

html、cssの修正が伴いましたが、

実際に出来たものがこれです。

 

footer-menu-sp

 

 

 

 

 

 

 

 

 

このスマホ用固定フッターは、

スクロールすると画面から消える記事タイトル、グローバルメニューと違い、

常に画面下部に表示されているものです。

 

今回は、スマホでの直帰率を下げるための

スマホ用固定フッターの実装方法

について、お話しします。

 

スマホ用固定フッターを実装したかった理由とは・・・

 

そもそも、

なんで私がスマホ用の固定フッターを実装したいと思っていたか。

 

理由は、他の記事へのアクセスを容易にするためです。

 

ページの一番上には、記事タイトルやグローバルメニューがありますので、

他の記事を読みたいとき、すぐにアクセス可能です。

 

しかし、

一旦記事を読み始めると、ページトップか、サイドバー領域まで下がらないと他の記事へのアクセスが出来ません。

 

もし、記事の途中で、他の記事が読みたいと思った時、

 

「すぐにアクセスできないなら、もう見るの止めよっと」

 

となってしまい、ブログからの離脱につながってしまいます。

 

ブログからの即時離脱を回避するため、

記事のどの部分を読んでいても、トップページやホームに戻るようなメニューバーを実装したかった。

 

それが、

スマホ用固定フッターの実装方法

を実装したかった理由です。

 

スマホ用固定フッターを実装してみよう

前提条件

まず、私のブログ環境について、お話しします。

下記、前提条件と同等である前提、これから実装方法を説明していきます。

  1. 賢威7WordPress・コーポレート版 BLUEのテンプレート使用
  2. 賢威7子テーマ使用
  3. ”footer.php”を子テーマへ実装済み

 

但し、別のテンプレートでも同等だと思っています。

子テーマ使用せずであれば、3も不要ですので、

賢威7のWordPress版で有れば、実装可能でしょう。

 

固定フッター用のフローティング要素を追加する

まずはフローティング要素を追加します。

 

今回の修正で、以下のように固定フッター用のフローティング要素が追加されます。

footer-capture2

 

 

 

 

 

 

 

 

 

また、トップページへのリンクボタンも削除しています。

修正するファイルは、”footer.php””rwd.css”です。

 

修正する前には、上記2ファイルのバックアップは取っておいてくださいね。

 

また、修正後の確認は、自身のスマホで確認してください。

私もスマホ片手に、

ファイルを修正しては、スマホを確認。

また修正した後、スマホを確認。

この繰り返しをしていました。

 

”footer.php”

”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-menu-sp

修正するファイルは、先ほどと同様、”footer.php””rwd.css”です。

早速修正内容を記載していきます。

”footer.php”

”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の知識としては、まだ不足しているため、

別の良い方法があれば、コメント、問い合わせ頂けるとありがたいです。

↓↓↓

お問い合わせ

長い文章を最後まで読んで頂きありがとうございました。
ぽちっとして頂けるとまたがんばれます。
↓↓↓

にほんブログ村 小遣いブログ サラリーマンのお小遣い稼ぎへ