スマホサイトに固定フッターを実装する方法【スマホ最適化の重要性がわかる動画も】

Graph With Stacks Of Coins
訪問別PV向上のためにブログデザインをいじっています。今回はその対策としてスマホサイトに固定フッターを組み込んでみました。あるブログでは直帰率の改善にもつながったと報告があるので期待が持てます。
記事にはコードも載せておりますので、「これはいい!」と思ったら導入してみてください。

スマホの固定フッターとは?その効果は?

固定フッターとはこういうやつです。
スマホの補訂フッターを実装する方法  mini

こちらの記事によると、スマホサイトに固定フッターを導入してブログの直帰率が改善したそうです。

メニューをアプリっぽくフッターに固定してみたら、直帰率が10%ほど改善しました。

直帰率の改善にウフフ!スマホサイトのメニューをアプリっぽくしてみたら直帰率の改善にウフフ!スマホサイトのメニューをアプリっぽくしてみたら

このように固定フッターを効果的に使う例は多いようで、コリスのウェブページに固定表示させるエレメントの効果的な使い方にもいくつか例が取り上げられていました。こちらも参考にして自分のサイトに導入すべきかを検討してください。

ウェブページに固定表示させるエレメントの効果的な使い方 | コリスウェブページに固定表示させるエレメントの効果的な使い方 | コリス

スポンサーリンク

固定フッターを実装するコード

毎回言っていますが、改造前のコードはしっかりバックアップをとっておいてくださいね。Gitを使うと便利です。
コードは以下の通り。

<div id="snsbox">
<div class="sns">
<ul id="footer_menu" style="width: 320px;">
  <li><?php previous_post_link('%link', 'PREV', TRUE, ''); ?></li>
  <li><?php next_post_link('%link', 'NEXT', TRUE, ''); ?></li>
  <li><a id="menu" href="#header-in">TOPへ</a></li>
  <li><a href="リンク先URL">ブログ飯</a></li>
</ul>
</div><!-- .sns -->
</div><!-- #snsbox -->
.sns {
bottom: 0px;
position: fixed;
z-index: 9998;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ccc;
padding-left: 16px;
margin-left: -10px;
background-color: rgb(255, 255, 255);
}
.sns li {
	margin: 5px 0;
	float: left;
	width: 76px;
}
.sns li a{
color: #424242;
text-decoration: none;
font-size: 13px;
}
.sns h3 {
	margin-left: 7px;
	z-index: 9999;
	padding: 0;
	color: #dddddd;
	line-height: 120%;
	font-size: 15px;
	font-weight: bold;
}
#container #wrap #wrap-in #main #snsbox03 .sns03 .snsb {
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin-right: -5px;
	margin-left: -5px;
}

以上です。classなどはそれぞれ書き換えてください。

スポンサーリンク

スマホ最適化のメリットがわからないなら

最後に。いまいちスマホ最適化の重要性に納得できないあなたへ。Yahoo!が作成したこちらの動画をご覧下さい。スマホ最適化の大切さを実感するはずです。

ご理解いただけたでしょうか?これからブログへのスマホでのアクセスは増加していくばかりです。この機会にスマホ最適化に着手していき、デザイン面からもユーザーに愛されるブログに育てていきましょう。

それでは!

簡単にスマホ最適化してくれるサービスも

実装が大変そう!と思う方にはこちらのduda mobileがオススメ。

dudaはPCサイトをスマホサイトに一発変換してくれるサービスなのです。
dudaサイトからURLを入力するだけでスマホサイトをシミュレーションできるサービスもありますので、まずはそちらを試してみてください!

いつもシェア感謝です!今回もぜひ

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!

SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。