PR PR

Bloggerで(のみ?)レスポンシブデザインのメリット・デメリット?

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク

この記事は2014年8月9日の1年以上前に書かれたものです。現在は状況が異なる可能性がありますのでご注意ください。

記事内に広告が含まれています。

昨今、
と言ってもここ数年ですが、
レスポンシブデザインのススメ的な動向になってきています。

もちろん、
スマートフォン(スマホ)などの端末も、
多様化してきているのでわかります。


Bloggerにおいてですが、

スポンサーリンク

スポンサーリンク

私は7月5日にレスポンシブデザインに変更し(てみ)ました。

Bloggerにてレスポンシブデザインほぼ完成!!

はじめは、
PCでもウィンドウのサイズを変更すると、
名の如く、
レスポンシブにブログの表示幅が変わったのに感動しました。

そして、

何か達成感というか嬉しさがありました。

約1ヶ月の間に、
元のデザインに近づけるが如く、
CSSなどカスタマイズしてきました。
Bloggerレスポンシブデザイン後CSSカスタマイズ備忘録

ほぼ元のデザイン風味になったので、
レスポンシブデザインの醍醐味でもある
PCサイトと同様の表示を、

スマート端末(スマホ・タブレットetc)でもさせようと鑑みました。

そして、
Bloggerのテンプレート欄にある

携帯端末では現在のテンプレートのモバイル バージョンを表示する。
 はい。携帯端末でモバイル テンプレートを表示する。
 いいえ。携帯端末で PC テンプレートを表示する。

を、

  • いいえ。携帯端末でPCテンプレートを表示する。

に設定を変更しました。

しかし…。

PCでの表示でもそれなりのページ表示速度である為、

携帯端末では、
LTEなど高速回線であれば然程問題無いと思われますが遅い…。

そんな気がします。

いや、
そんな気がしますではなく、
PCと同じテンプレートを読み込む訳ですから、
確実に遅くなっていると…。

そして、

レスポンシブデザインにしたのでURL末尾につく、

?m=1

が、
以下のように、

(Blogger名).blogspot.com/

?m=1
が、

なくなるのかと思っていました。

そして、
PC表示板では、
URL末尾に、

?m=0

が、
付きましたがこちらも、

以下のように
(Blogger名).blogspot.com/

となり、

URLは統一されるものだと思っていました。

ですが、
スマホで確認してみると…。

URL末尾に、
?m=1がついているじゃありませんかw(゚ー゚;)wワオッ!!

さすがに、
「ウェブバージョンを表示する」
という項目はなくなってはいましたが…。

これは予想外…。

というか無知なだけだったのかしら(´;ェ;`)ウゥ・・・。

加えて、
上記のテンプレートの設定にて、

  • いいえ。携帯端末で PC テンプレートを表示する。

に設定すると、
スマホなど携帯端末においては、
画面が小さい為、若干見にくい…。

スマホなどに慣れている方は、
拡大表示などでスマートに対応できると思いますが…。

また、
PCと同様のHTMLすべてを読み込み表示幅を、
端末に合わせて表示するだけなので、
やはり重いのではないかなぁ。
と思われます。

それなら、
素直に、

  • はい。携帯端末でモバイル テンプレートを表示する。

にして、

携帯端末でも表示したいガジェット(ウィジェット)に、

mobile='yes'

を付与した方が、
今のところ、

ユーザビリティに富んでいるのではないかと考えました。

(間違いなどありましたらご指摘頂けると幸いです。)

まとめ

よって、
数十分…。
数時間…。
程度のレスポンシブデザイン(PC表示)にて、

設定は

  • いいえ。携帯端末で PC テンプレートを表示する。

(カスタマイズ)

に変更(戻して)しての運用継続となりました。

追記)

ただ、
各端末にてどのように表示されるか確認できるサイトがありました。

これは、
便利かと思います。
Responsive Design Testing

  • 240 x 320 (small phone)
  • 320 x 480 (iPhone)
  • 480 x 640 (small tablet)
  • 768 x 1024 (iPad - Portrait)
  • 1024 x 768 (iPad - Landscape)

のサイズにて、
URLを入力してEnter押下で表示のされ方を確認できます。

レスポンシブデザインにしたけれど、
すべての端末なんて持ってないよぉ。

という方には重宝するサイトだと思います。

※私も含め…。

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.

コメント

  1. 匿名 より:

    ちょうど同じ問題にぶつかったところでした。blogger特有の問題なのか、コピペしてきたテンプレートの問題なのか、うーん・・・

  2. io より:

    コメントありがとうございます。
    おそらく…。Blogger特有?なのではないでしょうか…。
    マイッちゃいますね*^(☆。x)
    なんとか解決策があると良いのですが…。

スポンサーリンク
タイトルとURLをコピーしました