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

vanillaice (Akira)

vanillaice (Akira)

FC2ブログは数多ある公式・共有テンプレートから気に入ったものを無料で選択・利用できるようになっています。

テンプレート配布ページ

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

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

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

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


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


違います。

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

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

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

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

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

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

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

気に入ったPCテンプレを見つけた(レスポンシブって書いてあるけど意味知らないし調べない)

スマホで見た時もこのテンプレを表示させたい

スマホ版編集画面を開いてレスポンシブテンプレのhtmlとCSSをごっそりコピペ

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

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

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

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

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

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

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

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

まとめ

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

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

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

関連記事

Comments 5

There are no comments yet.

さっちぃ  

テンプレ配布ページが化石

こんばんは。
少なくともAkiraさんのページにお邪魔してる方々はレスポンシブのことを理解していると思ってるんですが、そういうことをするユーザーさんもいらっしゃるんですねぇ。

そもそも、FCのテンプレ配布ページが化石状態になってるのが悪い。
携帯用なんて役に立たないものを未だに表示してますから。
レスポンシブ用・パソコン用・スマホ用にしとけば良いやん。
って思います。
そうすれば、レスポンシブは独立?した別物だって分かってくれるかも?

タブレットで閲覧してる身にとっての、レスポンシブじゃない場合の見辛さときたら…
最初に表示されるのはパソコン向け(文字が小さい)→スマホ版表示をポチッ→スマホ版のトップページが出現→記事のタイトルをポチッ→パソコン向け画面に戻る→文字が小さくて見えない→苛々MAXで画面閉じ。

皆さん、レスポンシブにして?お願い。
毎回、そう思います。

2018/04/10 (Tue) 19:34 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To さっちぃさん

さっちぃさん、こんばんは ('0')/

レスポンシブはPC版の外に出した方が良いと思いますね (´・ω・`)
PC/ スマホ/ レスポンシブ
の3項目の方が親切かと。
携帯版は2020年以降は廃止ってことで良いですよね(たぶん)

タブレットは何故かどこのサービスでも置き去りですね。なんでだろ? (´・ω・`)
スマホはプライベートでもタブレットはパブリックというか業務で使用されていることが多いと思うのだけれど。
公式レスポンシブテンプレも実際はタブレット無視のアダプティブですが、知らずに利用している方も居るんでしょうね。
タブレット無視の風潮はどこから来ているのか。謎 (´・ェ・`)
携帯はガラケーで、タブレットは持ってる、という層が意外と多いってことを知らないのかしら。

FC2ブログは「良いところまで来てるけど惜しい!」という感じです。
ちょっと前に導入された「管理人コメントを見分ける変数」にしても、何故「コメントを」という縛りにしたのか(笑)
コメントだけしか使えないじゃないかー ( ̄∀ ̄;)
これが広汎なら記事編集ボタン表示は管理人だけ、とかいろんなことができるのに。
そして変数を作るなら真偽両方(boolean, true or false)を作って欲しいです。
「管理人コメントの場合」と同時に「管理人コメントではない場合」
後者が無いんですよね。これが有ると無いとでは大違い。製作者の苦労が大違い(笑)

2018/04/10 (Tue) 22:28 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/04/11 (Wed) 12:56 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To 内緒さん

コメント投稿欄に明記してある注意書きをお読みください。

2018/04/11 (Wed) 18:01 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/04/12 (Thu) 12:25 | EDIT | REPLY |