パソコンを便利に！！

Bloggerのテーマ（いわゆるデザインやテンプレート）は、Bloggerの管理ページで選べる公式のものでは、現在、大きく１１種類あります。
この１１種類の中に、色・画像・フォントなどの違うパターンがそれぞれ何種類かあって、全部で４８種類となっています。

テーマを選ぶときに、できればレスポンシブ・ウェブ・デザインのものを選びたいところですが、その中のどれかが分かりにくいので、確認してみました。
確認する方法は、実際にテーマを選んで適用してみないとわかりません。

Bloggerのテーマ１１種類のうち、レスポンシブのものとそうでないもの

１）Contempo（コンテンポ）→ レスポンシブ
　contemporaryと類似の意味なら、「現代」・「モダン」みたいな意味でしょうか。



２）Soho（ソーホー）→ レスポンシブ
　おそらくロンドン中心部の地名。おしゃれなレストラン街のイメージでしょうか。



３）Emporio（エンポリオ）→ レスポンシブ
　イタリア語で、古代の商業や文化の中心地。または人名かも。



４）Notable（ノータブル）→ レスポンシブ（一番おすすめ）
　意味は、「注目すべき」・「優れた」・「重要な」。


　このテーマだけは、ブラウザの表示エリアの幅によって文字の大きさも変わります。
　表示エリアの幅が広いとき文字サイズが小さいままだと、１行の文字数が多くなって文章が読みにくくなりますが、それがありません。
　ただし、解像度の高いワイド画面いっぱいに表示したときに、妙に文字が大きく感じるので、好みの問題もあるかもしれません。


５）シンプル → 非レスポンシブ



６）動的ビュー → 半レスポンシブ


　モバイル用のデザインが別になっているので、レスポンシブではないと言えますが、PC用のデザインは表示画面の幅によって収縮し、表示エリアに収まるようになっています。


７）画像ウィンドウ → 非レスポンシブ



８）Awesome Inc.（オウサム・インク） → 非レスポンシブ
　意味はオウサムという名前の会社なので、そこが作ったテーマということでしょう。



９）ウォーターマーク → 非レスポンシブ



１０）エスィリアル → 非レスポンシブ



１１）旅行 → 非レスポンシブ



上から４つがレスポンシブ・ウェブ・デザインということになります。

Bloggerのテーマがレスポンシブかどうか確認する方法

Bloggerのテーマを選んで、そのテーマを「ブログに適用」します。
そのあとで、テーマのページの上のところを見ます。
下の画像のように、モバイルの下に歯車アイコンが付いていたら、レスポンシブデザインではありません。
レスポンシブデザインの場合は、パソコンもモバイルも一つのデザインでカスタマイズするので、歯車アイコンがないのです。

レスポンシブ・ウェブ・デザインとは

パソコン・タブレット・スマートホンなど、表示画面の解像度が違ってもちゃんと見やすく表示できるデザインのことです。
例えば、このブログ「パソコンを便利に！！」は、レスポンシブ・ウェブ・デザインではありません。
パソコン用とモバイル用のテーマに対応しているので、スマートホンで表示するとパソコン用とは別のデザインでちゃんと表示されますが、パソコンでブラウザの幅を狭くしていくと、表示エリアに収まらずはみ出してしまいます。

右サイドバーも隠れて、記事の右側も一部隠れています。


横スクロールバーを使えば見ることはできますが、かなり不便です。

それに対して、レスポンシブ・ウェブ・デザインの場合は、モバイル用のテーマがなく、一つのテーマで様々なデバイスの表示に対応しています。

画面の幅を狭くしていっても、その幅に合わせて文章が折り返して表示されるので、横スクロールバーを使わなくても、そのまま文章が読めます。


右サイドバーは表示されなくなりますが、上部にハンバーガーアイコンが現れて、それをクリックするとサイドバーが右から出てきます。

レスポンシブ・ウェブ・デザインで作ったブログを実際に見てみたい人は、こちらを参考に見てみてください。

　建築積算研究室

Bloggerのテーマ中の４）Notable を使ったブログで、私が書いているものです。
記事の内容は仕事関係のものなのでつまらないですが、記事内に画像として貼った表も表示エリアの幅によって収縮するので、ブラウザの幅を狭くして表示がどうなるか試してみてください。