わたしがやっているFC2スマホ版テンプレートの色々なカスタマイズ方法

スマホ版FC2

このブログはFC2の無料ブログサービスを使っています。FC2は自由度が高く、スマホ用のテンプレートもHTML、CSS共にカスタムできるということなので、色々いじってみました。

わたしのスマホテンプレカスタムの記録と、FC2のカスタマイズの方法をご紹介していきますね。

FC2スマホテンプレ ビフォー・アフター

まだまだカスタマイズしきれていない所が多々あるのですが、とりあえず形は作りました。そして、こんな感じにスマホのテンプレが変身しました。

スマホテンプレートビフォー・アフター

FC2スマホテンプレートをつくるのに参考にさせて貰ったのが、公式テンプレートの「basic_blue」です。

basic_blue テンプレートはXHTMLでつくられていたので、勉強がてらにHTML5化しました。後は不必要なものを消したり、追加したりしています。具体的に何をやったのかを紹介しますね。

スマホ版FC2ブログカスタム 目次

  1. 必須広告を移動、不要な広告を削除
  2. トップページとその他のページのヘッダを分ける
  3. ブログメニューをドロップダウンで表示
  4. スマホ版FC2に追加されたページと削除されたページ

必須広告を移動、不要な広告を削除

FC2ブログのスマートフォンテンプレートで表示される広告のカスタム方法のご紹介です。この方法はグレーゾーン、またはブラックな方法という事を頭に入れて下さい。 FC2の規約を確認して最悪アカウント削除というリスクも把握した上で、自己責任で行って下さい。

FC2のスマホテンプレートで、必須の広告を表示させるタグは、<%ad><%ad2>です。このタグは、テンプレート内に必ず入れておかなければいけないのですが、移動させることは可能です。

わたしは、ブログの説明文の下にある<%ad>をフッター内の<%ad2>の上に移動させました。

画面下部に固定されている広告は削除することが可能です。</body>直前にある<%ad_overlay>を削除することで、ページをスクロールしてもストーカーの如く、つきまとってくる広告から解放されることでしょう。

スマホ版FC2ブログカスタム 目次へ

トップページとその他のページのヘッダを分ける

スマートフォンは、PCに比べてファーストビュー(最初に表示される領域)が小さいです。その限られたファーストビューを生かすために、トップページに表示される内容とその他のページに表示される内容を分けました。

トップページとその他のページの比較

トップページにのみ、ブログタイトルと簡単な説明文、ブログロゴを表示させ、その他のページは削除しました。

これで訪問してくださった方へ、少しでもスクロール(フリック)の負担を減らすことができると思います。そして、少しでも興味を持ってトップページを見てくださった方へ、ブログタイトルと、ブログの内容をアピールしています。

トップページとその他のページを分けるのには、FC2の独自タグ(変数)の<!--index_area--><!--not_index_area-->を使っています。

<!--index_area-->
	ここにトップページに表示させたいコンテンツを書く
<!--/index_area-->

<!--not_index_area-->
	ここにトップページ以外に表示させたいコンテンツを書く
<!--/not_index_area-->

スマホ版FC2ブログカスタム 目次へ

ブログメニューをドロップダウンで表示

ヘッダのメニューボタンをクリック(タップ)したらドロップダウンでびろーんとスライドし、カテゴリメニューの一覧が表示するようにしてみました。

ドロップダウンメニュー

PCのように、ヘッダーナビを使ってブログの内容を伝えることができないので、ここでどんな記事が書かれているか把握してもらおう、という考えです。

ただ、わたしのブログはカテゴリが多く、画面上に「閉じる」ボタンがスクロールしないと見えない状態なので、今後カテゴリ一覧ページなどのリンクに変更するかもしれませんが・・。

ドロップダウンメニューの実装方法

jQuery を使ってドロップダウンメニューを作っているので、まずは HTMLの<head>内に jQuery を読み込ませます。


わたしは Google CDN から jQuery ファイルをお借りしていますが、FC2ブログでは js ファイルもアップロードできるので、jQuery のサイトからダウンロードしたものを使う方が良いかもしれません。

jQuery 本体を読み込ませた後に、ドロップダウン用の jQuery を書いていきます。

<script type="text/javascript">
    $(function(){
        $('.menu, .close').click(function () {
            $('#slide-menu').slideToggle();
        });
    });
</script>

.menu.closeをクリックした時に、#slide-menuを、表示している時はスライドで非表示に、非表示の場合は表示してくれます。

わたしが実際に使っているものとは違いますが、こんな感じにHTMLを書いていきます。

<div><a class="menu">メニュー</a></div>
<ul id="#slide-menu">
    <!--category-->
    <li><a href="<%url>?cat=<%category_number><%tail_url>"><%category_name></a></li>
    <!--/category-->
    <li><a class="close">閉じる</a></li>
</ul>

そして、ページを開いた時は#slide-menuを非表示にしておきたいので、CSSを書いておきます。

#slide-menu {
	display: none;
}

あとは、スタイルを整えてあげるだけでOKです。ドロップダウンメニュー用のjQueryは、直接HTMLに書くことも可能ですが、外部jsファイルとして読み込ませることを推奨します。

スマホ版FC2ブログカスタム 目次へ

スマホ版FC2に追加されたページと削除されたページ

ユーザータグ一覧ページが無い

スマホ用のテンプレで、<!--tag_list-->内に<%topentry_tag_list_name>を書くことで、タグ名は表示されるのですが、スマホ版のFC2にはユーザータグ一覧ページは無いもようです。

ユーザータグ一覧ページへのリンクは強制的にトップページへ飛ばされます。ですので、記事内にユーザータグ一覧ページへのリンクは書かないように気をつけましょう。ユーザータグメインで記事分けするのも危険ですね・・。

検索結果一覧ページが無い

はい、検索結果一覧ページも無いです。わたしのブログは記事数が少ないのですが、記事数が多いブログだったら検索フォームはあった方が良いですよね。Google カスタム検索で代用することは可能だと思います。

コメント、トラックバックが別ページ化

PCでは個別記事ページに表示されていた、コメント投稿フォーム(<!--form_area-->)、コメント一覧(<!--comment_area-->)、トラックバック一覧(<!--trackback_area-->)が、それぞれ個別のページ化しました。

コメント、トラックバックページへのリンクボタン

個別記事ページに、各ページへのリンクをつけることと、<title>を細かく分岐させている方は、ぞれぞれのページのタイトルも追加させましょう。

スマホ版FC2ブログカスタム 目次へ

ブログカスタマイズはコツコツと

ブログをカスタマイズするのは、わたしにとって楽しい作業なのですが、夢中になりすぎてアレもコレもと取り入れてしまいがちです・・。

それは本当にブログを見てくださる方にとって必要な機能とデザインなのか?という事をちょっと立ち止まって考えてみるのも必要ですよね。

そして、カスタマイズに夢中になりすぎてブログ記事が書けていない!なんて事にならない様にこれからはコツコツ少しづつ、ブログを改善するためにカスタムしていこうと思います。

Pagetop
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。