アクセスアップ HOME > ブログカスタマイズ > fc2 スマホ カスタマイズ

fc2 スマホ カスタマイズ

最近ではスマートフォンの急激な普及率に伴い、このブログアクセスアップでもスマホからのアクセスが全体のアクセスの4割に迫る勢いです。

せっかく見に来てくれるから、見やすさや使いやすさ、すまほサイトの回遊率アップなどを目的とした、fc2のスマホテンプレートをカスタマイズします。

スマホ ユーザビリティを向上してblog pvをアップしましょう。

fc2 スマホ ブログのテンプレートカスタマイズになりますが、wordpressや他社ブログでも参考になると思います。

スマホのソーシャルボタンや関連記事


スマホ テンプレート


まず、fc2blogの管理画面で、
テンプレートの設定 / スマートフォン用 / テンプレートの管理をクリック

スマートフォンのテンプレート管理をクリック


fc2スマホのテンプレートのカスタマイズが可能です。

ぼくが使っているテンプレートはbasic_black なんで、他のテンプレートの場合はいじくり方が変わると思いますが参考程度に。

テンプレを触ってると、cssを適用しない基本的なhtml表記の表示が読みやすいんで、一からテンプレ作るか、既存のテンプレートをカスタマイズするか悩みましたが時間が無いんで、簡単カスタマイズで。
html5も勉強してないしね。

自分用スマートフォンテンプレートは時間があるときに制作することにします。

fc2blog customizeで利用するテンプレート中に使える変数一覧


トップページのタイトル


テンプレのままだと、トップページのタイトルが 「- アクセスアップ」 と表示されるので必要の無い横棒は出ないようにします。

変更前


<title><%sub_title> - <%blog_name></title>

タイトルで表示される変数
クリックで拡大

変更後


<!--index_area--><title><%blog_name></title><!--/index_area-->
<!--not_index_area--><title><%sub_title> - <%blog_name></title><!--/not_index_area-->

トップページはタイトルのみ表示に変更


ソーシャルボタン


今回はaddthisを使用

アドディスに登録してコードを取得。
英語のサイトですが、簡単なんでそれほど悩まないと思います。

addthisのコードを取得したら、記事の下に挿入します。

sp_template_2.gif

<%topentry_more>
の下にaddthisのコードを挿入します。

addthis コード挿入位置

記事を読んだ直後にfacebookでいいねしてもらったり、twitterやはてブなど、ほとんどのソーシャルボタンをカバーできます。

ソーシャルボタンと関連記事をカバーするzenbackのブログパーツなんかもありますが、zenbackはやめたばかりなんで除外。
ただでも縦長なスマホサイトがさらに縦長になるのも今ひとつかな。


関連する記事


せっかくアクセスしてくれた方に、もっと記事を読んでもらえるようソーシャルブックマークの下に関連記事を表示します。

刺激的で魅惑なタイトルをつけてれば、グンと回遊率がアップします。
内容が伴うように注意が必要ですけどww

関連する記事 挿入位置

fc2ブログ 関連する記事の表示方法

関連記事の詳細は上記リンクから確認してください。

細かな説明はいらないと思うんで、答え行きます。
スマートフォン表示で見にくい場合は、pcサイトで確認してください。

html


css


上記cssの挿入位置はスタイルシート内であれば適用できますが、わかりやすいように一番下に記入すれば良いと思います。

関連記事 スタイルシート


html も css もそのまま入れれば使えますが、答えではないんで参考程度にどうぞ。


ここからは、ブログの目的や表示の好みで特に必要の無い項目です。
日記サイトなんかでは必要ないかな。


見出しやリストの修飾


記事内で文章の切り替わりや説明をわかりやすくするために、見出しやリストを使用している場合は、スマホサイトでも視認性をあげるためにスタイルシートで整えましょう。

見出し リスト

css


その他にも番号リストやよく使うタグがある場合は、stylesheetで見やすくしておけばユーザーに親切です。


で、カスタマイズが終了したら、iphoneやandroid等お手持ちのスマートフォンで表示の確認。

スマホがない場合はパソコンでスマホサイトを見るでどうぞ。


ぼくもちょっと考えてるんやけどfc2スマホの広告がサイトのイメージに合わない、とか、邪魔とか思いません?

少し費用はかかりますがブログfc2blog proにバージョンアップするとスマホの広告は完全オフになります。

無料のfc2ブログでも、
  • 教育
  • 福祉
  • fc2blogのお役立ち
に該当するブログなら広告が免除できるかも知れないんで、思い当たる人は確認してください。

ブログ広告表示免除について


さわり出すときりが無いテンプレートですが、簡単にこの程度カスタマイズしておくだけでも
  • 読みやすくなったんで、離脱率が減る
  • 共有ボタンで共有してくれる可能性があるんで、口コミで記事が広がるかも知れない
  • 読み終わった後に興味を引きそうな関連記事が表示されてるので、回遊率が上がる
とアクセスアップやpv数アップの可能性が広がるんでオススメ



あわせて読みたい ブログカスタマイズ カテゴリーのトピックス

COMMENTS

COMMENT FORM

TRACKBACK


この記事にトラックバックする(FC2blogユーザー)

人気ページランキング
最近のエントリ
迷惑メール対策
アクセスアップ
blogカスタマイズ