attention admin about comments trackbacks you may also like

FC2ブログのこんなレスポンシブテンプレートには気をつけましょう

2018年05月19日
レスポンシブ
0
FC2ブログ レスポンシブテンプレート white_card_resp

FC2ブロガーさんで、FC2公式の「white_card_resp」というテンプレートをお使いの方は多いんでしょうか? ブログ管理画面の「公式テンプレート追加(PC用)」にある下図のテンプレートなんですが。

white_card_respテンプレート

ダウンロード数を見ると「追加数: 2492 (2018/05/19現在)」とかなり多いんですが、このテンプレートにはちょっと問題があるんです。

レスポンシブ対応テンプレートです」と明記はされているものの、このテンプレート設定にて、 レスポンシブプレビューが出来る Am I Responsive で表示確認してみると「タブレット画面サイズでは表示に問題が起きる」ことが分かるんです。

レスポンシブ対応確認

ほら、ご覧のように左側のタブレット画面内の弊ブログの右側(サイドバー部分)が途中からチョン切れてしまっており、これではサイドバーメニューが利用出来ません(爆)

まぁ、画面下に一応は横スクロールバーが現れますから、それを操作すれば右のサイドバーの表示と操作は可能ではありますが、これではレスポンシブテンプレートとは言えません (^_^; アハハ…

もしあなたが「FC2公式 white_card_resp」テンプレートを現在お使いでタブレットそのものをお持ちでなかったら Am I Responsive にアクセスして表示される画面下のURL欄にブログURLを記入して表示確認してみて下さいね。

このようにタブレット画面サイズで「ブログ表示が見切れる(チョン切れる)」のはテンプレートの「レスポンシブWebデザインに対する設計の不備がある」からでして、この問題は同テンプレートのリリース当初より一部FC2ブロガーさん達(筆者も含め)から指摘はされているんですけど、それでも筆者は「笑えるくらい酷い(笑)から、きっとそのうちにテンプレートのアップデートでもされるんじゃ?」とアップデートを期待しつつ様子見して来たんですけど、一向にその気配もありませんから困ったものです (^_^; アハハ…

いえ、筆者的にはなにも困ってはいない(使わないから(爆))んですけど、このような状況を知らないで「レスポンシブテンプレートに替えたも~ん♪ o(^o^)oウキウキ♪」と喜んで利用しているFC2ブロガーさんのことを思うと気の毒になりますけどね~、他人事ではありますが (^^ゞポリポリ


レスポンシブWebデザインの概念に反する!

レスポンシブWebデザイン(レスポンシブテンプレート)とは、閲覧デバイス(フィーチャーフォンは対象外)のどんな画面幅にも最適にフィットして表示出来ることを言うのでして「一部の画面サイズではちょっと不都合が生じます」なんてのはレスポンシブテンプレートとは言えない!と言うことなんです。

FC2公式の white_card_resp テンプレートが引き起こしているこの問題の原因は、まさにレスポンシブWebデザインに対する設計が大雑把であることなんです。

ブレイクポイントの設定が1つしかない!

レスポンシブテンプレート設計(設定)に於いては、スマートフォンやタブレットやパソコン等の閲覧デバイス機器の画面サイズ(横サイズ)によって表示を切り分けるためのブレイクポイントというものがあって、それをテンプレート設計のCSSに書き込む必要があるんですがFC2公式の white_card_resp の場合には

@media screen and (max-width: 600px) { /* 設定内容は省略 */

この一種類のブレイクポイント設定しかされておりません。 つまりは画面幅 600px 以下はスマートフォンで、それ以上はパソコン(タブレット含んだつもりになっているんでしょうか?(笑))ですと言う設定なんです。

これ! なんでやねん!! って感じですよ!

優良なレスポンシブテンプレートデザイナーさんでしたら

設定数値は単なる参考値です
@media screen and (max-width: 1090px) { /* 設定内容は省略 */
@media screen and (max-width: 850px) { /* 設定内容は省略 */
@media screen and (max-width: 800px) { /* 設定内容は省略 */
@media screen and (max-width: 420px) { /* 設定内容は省略 */

このような細やかな設定を行って各種デバイス機器の画面幅に対応しますから white_card_resp の設定が如何に大雑把で荒っぽいものかが分かります(爆)

こんなことからタブレットサイズの画面(小型パソコンも含む)ではブログ画面の右側が見切れてしまうことが起きる訳でして、上図の小さなタブレット画面の中身を大きな画面にしたものが下図になります(笑)

見切れたブログ画面

タブレットサイズ画面に現れる横スクロールバーを操作しないとサイドバーメニュー欄が利用出来ない不都合さ!

こんなのイヤだぁぁ! カスタマイズしてブレイクポイントを増やして使う気にもなれない(笑)

これじゃレスポンシブテンプレートではなくてレスポンシブテンプレートモドキですよ!


ブログのスマホ表示速度分析は PSI が強力です!
Google PageSpeed Insights

ブログのPC表示速度分析は GTmetrix が強力です!
GTmetrix

検索からの方はトップページへもどうぞ


関連する記事
ぼっちん
Author: ぼっちん
記事に関わらないコメントでもOKですからね~ ^^

コメント(0)

There are no comments yet.