ブログ wordpress

【WordPress】STINGER5は7インチタブレットにも優しい

投稿日:2014年11月6日 更新日:

photo credit: Chema Concellon via photopin cc

ブログのテーマをSTINGER5に変えました。レスポンシブデザインというものです。レスポンシブデザインは6インチ以下のスマホやPCやMacでブログを読み書きしている人が気づきにくい問題を克服してくれます。私のようなハンパ者にはありがたいです。



レスポンシブはハンパ者にやさしい

ブログ開設一周年を期にテーマを変えることにしたのですが、実は前々からレスポンシブに変えたくしょうがないぞコンチクショー!という気持ちでした。

その理由は、レスポンシブでないとレイアウトが崩れる場合があるからです。

そんなブログを見たことないですか?

私はあります。

私が普段使っている端末はNEXUS7という7インチのタブレットです。

7インチというサイズは、PCでもないスマホでもないある意味中途ハンパなサイズです。

ジュースじゃないコーラじゃないドクターペッパーのようなハンパさです。

7インチのタブレットは、スマホ用のサイトならある程度問題なく閲覧できます。PC用のサイトでもある程度問題なく閲覧できます。

問題はどっちつかずなサイトです。

どっちつかずってなんだよ?って感じですが、カスタマイズされたテーマのブログで、たまにレイアウトが崩れたものを見かけます。これがどっちつかずなサイトです。

つまりハンパ者(7インチ)には最適化されないサイトですね。

レイアウトが崩れる理由

これは想像ですが、レイアウトが崩れる理由はデバイスの違いを識別する分岐条件に問題があるためだと思います。

ケース1

例えばメインカラムの中に広告を入れている場合。PCでは幅が広いバナー広告を表示させて、スマホの時はレクタングルに切り替えるケースです。

広告とメインカラムのそれぞれの幅の切り替え条件が少しでも異なっていると、ハンパ者には広告はPC用の幅(広い)で記事はスマホ用の幅(狭い)だったりします。

全体の幅は広告に最適化されて記事が小さくなったりします。

ケース2

タブレットで見たとき、PC用の表示になってしまうサイトは多いです。そのままでは文字が小さいので拡大させたりします。このときメインカラムの拡大と合わせて追尾するボックスも拡大されるときがあります。というか普通そうですね。

ただ大きくなるだけなら問題ありませんが、ウィンドウ幅に収まるように設定している場合、画面中央でメインカラムとボックスが重なり合います

これ、最悪の場合大きくなったボックスがメインカラムの上に重なって記事が読めません

追尾して来るのでどうやっても読めません。

PC用のサイズに縮小すれば見えますが老眼なので読めません!

レスポンシブで解決

レスポンシブデザインならブラウザのサイズを基準にしてレイアウトを組み替えてくれます。(ということで合ってるハズです。詳しくはありません。)

切り替えの基準がデバイスではなくブラウザの幅。ここがミソです。

「スマホだったら」とか「PCだったら」というデバイスを基準にした条件分岐ではないので(中途半端な)タブレットでも最適なレイアウトで表示してくれます。

私は自分自身がタブレットユーザーなので、このブログも安心して表示できるレスポンシブデザインのSTINGER5に変えました。タブレットを使ってなかったら気付かなかった問題だと思います。

さいごに

レスポンシブデザインはPCでもウィンドウの幅を狭くするだけでスマホ用(というか小さいディスプレイ用)のレイアウトの確認ができていいですね。

それではまた。

この記事が気に入ったら下のボタンでシェア!

-ブログ, wordpress

執筆者:

関連記事

黒いブロガー

あなたが知っている有名なブロガーは、黒いブロガーかもしれない。 ブログというサービスが生まれる前からネットを使っていた年寄りの戯言なので軽く読み流してもらいたい。

ブログを楽しむための目標のたてかたを考えてみた

ブログの目標設定について考えてみました。 ブログに目標なんて必要ないかもしれませんが、遊び感覚で目標をたててもいいかもしれません。

ブロガーイベントに行きたいけど行かない理由

ブロガーの中にはブロガーイベントを楽しみにしている人っていますよね。ブロガー同士が集まって親交を深めたり、新しい知り合いができたり、ブロガーフェスティバルなどでは著名なブロガーの公演が聞けたり、とても …

副業の所得が年20万円以下のブロガーに必要な住民税の申告の仕方

ああ、なんかちょっとさびしいタイトルになってしまったけど気にするのはやめましょう。 ブログで収入を得ている人は「確定申告が必要か」ということを調べると思います。そして副業での所得が20万円以下なら確定 …

スマホ用のブラウザでHTMLのソースコードを表示する方法

ブログの運営をしているとHTMLのソースを見たくなるときがあります。自分のブログに限らず、他人のブログでもデザインなどが気になるとソースを参考に見てみたいです。 そんなとき、外出先などでパソコンが無い …

ケンちです。約20年ほど写真業界にいました。いまはIT系企業で主にITとは関係ない仕事をしている普通の人です。Twitterによく出没しています。