FC2ブログでレスポンシブテンプレートを正しく使う方法

説明文の中に レスポンシブ という文言の付いているテンプレートが最近ではたくさんありますよね。
何故それが説明内に書いてあるかというと 非常に大事な特徴だから 書いてあります。
伝える必要の無いものであれば最初から書いてない。

レスポンシブの意味を知らなくてもスルーして見た目だけで選ぶ人も居ますし、なんとかくわかっていても 実際にどう活用したら良いかわからない という方も。
本記事では後者の方々へ向けて、レスポンシブテンプレートを選んだ後にどう使うかを、よく見かける間違った使用例を交えながら説明します。
レスポンシブとか意味わかんなーい (´・ω・｀) な方はもう自分でお調べになって
What(レスポンシブとは何ぞ) と Why(何故レスポンシブを使うのか) の説明は今回はしません。

まず最初にやることは「スマートフォン版非表示」設定

これをやらなければ何の意味もない。
これね、FC2運営さんも最初から「レスポンシブ設定」という機能名称にした方が良かったと思います (´・ω・｀)
公式・共有を問わず、製作者は自身のテンプレを説明するのに「レスポンシブ」というキーワードを必ず使うわけじゃないですか。
だったら同じ語句にしておいた方がわかりやすい、とは思わなかったんでしょうか。

「スマートフォン版の表示設定」を「無効」にするとスマートフォンの人が私のブログを見られなくなるのですか？

違います。

この勘違いをする方が非常に多いのですが、スマートフォン版の表示設定「無効」、つまりスマホ版非表示設定は
スマートフォン専用テンプレートを使わない
という設定です。
何故なら

• パソコン版テンプレート --- パソコン専用
• スマホ版テンプレート --- スマホ専用
• レスポンシブテンプレート --- パソコン・スマホ共通

レスポンシブはスマホ専用版が要らないわけなんです。
要らないから表示させない、それが「スマホ版非表示」です。
「スマホ専用」という言葉を言い換えると「スマホでしか使えない」という意味ですよね。
レスポンシブは特定のデバイス専用ではなく あらゆるデバイスで利用できるように考慮されたデザイン なのですから、わざわざスマホ版を使う必要がありません。

まずこれがレスポンシブテンプレートを使う上での原点ですね。
ここが理解できていないと以降の章で記す間違った使い方をしてしまうことがあります。

スマホ版テンプレート編集でレスポンシブのhtml, CSSをコピペするのは間違い

これは一番やったらアカンやつ。
しかし結構見かけます(笑)

これはあれだよね。レスポンシブを理解していないということだよね。
たぶん感覚的には

気に入ったPCテンプレを見つけた(レスポンシブって書いてあるけど意味知らないし調べない)
↓
スマホで見た時もこのテンプレを表示させたい
↓
スマホ版編集画面を開いてレスポンシブテンプレのhtmlとCSSをごっそりコピペ

で、実際にスマホで確認してみるとレイアウトがグチャグチャで「何故だーーー！！！ ｡(ﾟうｪ´ﾟ)ﾟ｡」ってなる。

レスポンシブテンプレは便宜上(？)、PC版テンプレートにカテゴライズされています。
これもホントは分けた方が良いんじゃなぁい？運営さん (´・ω・｀)
専用版ではないのだから別項目にした方が良いと思うんだけどなぁ。

パソコン版とスマホ版はそもそもページ構成・独自変数などが全く違います。
PCには有ってスマホでは無いページ種(逆もまた真なり)、スマホでしか使えない独自変数なども多数あります。
システムが違うのですから、コピペしただけで機能するはずがない。

結局「スマホ版」が何をやっているかというと、ページにアクセスが有った時にまずデバイスを見分けます(UA判定)
UAがスマートフォンだった場合にはリダイレクトで以てスマホ版を表示させる、というシステムになってます。
レスポンシブの場合はそのリダイレクト処理が不要なので振り分けを行わずに済むわけです。
振り分けを行わせないためにするのが先に記した「スマホ版非表示」設定だということですね。

このパターンに当てはまる方の解決策はスマホ版を非表示にすることです。
というか全てのパターンに於いての解決策がこれです。

見た目を近づけるべくスマホ版CSSをカスタマイズするのは間違い

んなことしなくても （￣∀￣；）
スマホ版非表示でPCと同じ見た目になります、つか同じものが表示されますので無駄な努力をする必要はありません。

同じ見た目と言ってもカラム編成は違いますよ。
パソコンでは2カラムでもスマホでは基本的にシングルカラムになります。
じゃないとまともに閲覧できないでしょう (´・ω・｀)
この質問も非常に多いですね。
「スマホだとカラム落ちします…。」みたいな。
カラム落ちではなくカラムの再編成をしている のですよ。
スマホ読者さんが見やすいようにそうしているのです。

まとめ

全ての解決策 スマートフォン版の表示設定を 無効 にする
設定ページ

押さえるポイント レスポンシブテンプレートはパソコン・スマホ共通版である

一番大事なのは 専用でなく共通(汎用)であるという点 です。
ここが理解できるとすべき作業もスマホ版非表示の意味も自ずとわかってきます。
そして「スマホ版非表示」というヘンテコな機能名称にうろたえないことです(笑)
設定画面に
レスポンシブ設定(スマホ版を非表示にしてテンプレートを全デバイス共通化します)
とか書いてあると親切なのにね。