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

公開日: : 最終更新日:2015/08/10 WordPressテーマのカスタマイズ, ブログについて

このエントリーをはてなブックマークに追加

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を入力するだけでスマホサイトをシミュレーションできるサービスもありますので、まずはそちらを試してみてください!

仕事で悩む人から人気の記事

筆者Twitterアカウント

フォローいただければ、最新記事や、ブログで稼ぐ、アクセスを集める方法などをタイムラインにお届けします。

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

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

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!