新しいブログが完成して、少々油断しておりました。昨日、写真仲間からご指摘を頂いて気付いたのですが、ブログを見てくれる方の環境って様々。Mac・Windows・スマートフォン・iPhone・iPad・タブレット端末などなど。メーカーもバージョンも考え方も違うわけですから、同じに表示されるはずがないのです。
あらゆる端末でチェック
Macから作っているので、Apple製品には強いかと思っていたんですが、やはり少々違うようですね。あとタブレット系は、縦と横が瞬時に切り替えができますので、その辺りも見逃したくはありません。
- Mac・・・基準となるので正常。
- iPhone5・・・右サイドバーがなくなり、記事の下に表示される。
- iPad2・・・横では正常。縦は上記iPhone5と同様。
- Windows/7・・・正常。
- Windows/Vista・・・文字色、配置などがややおかしい。
- GALAXY Note・・・上記iPhone5と同様。
※ Internet Explorerのバージョンは不明ということで(/∇＼*) Internet Explorerはやたらとバージョンアップがされるイメージもありますし、サポートが終了というニュースも聞きますので、古い物は諦めようと思うわけです。ただ、印象としてある程度は同様に見えるものだなぁと関心いたしました。
違いを検証
それぞれを比べてみると大きくわけて2つに分類されることが分かりました。
- 制作基準と同様の、正しい表示。（PC系）
- 右サイドバーが右ではなく、記事の下に表示される。（タブレット系）
タブレットは画面が小さいですから、それによって横幅になるべく情報を納めたいということでしょう。縦のスクロールに盛込んだというわけですね。ここで問題なのが、右サイドバーに表示させたウィジェットのテキスト配置。
見栄えを考えてセンタリングを使っていましたが、記事の下に表示された場合もセンタリングがかかり、不自然に見えてしまいますので、解除いたしました。
表示対策のプラグインも試しましたが、ただ並べるだけになったり、別でカスタマイズしなくてはいけないようなので、一番簡単である下記の方法を採用しました。
ノンレスポンシブ
『外観』→『カスタマイズ』→『レイアウト』の中にある『ノンレスポンシブ』にチェック。
聞きなれない言葉ですが、要はどこに表示させる時でも同じにしましょうということ。
これによってタブレットでも同様の見え方を実現できます。
- 利点はデザインがそのままで美しいこと。今後カスタマイズしても楽チン。
- 欠点は液晶の大きさに関わらず全体が表示されるため、小さくなってしまう。
※ アファリエイトとなどの外部リンクは、別途設定が必要です。
でもね、指2本でギュイーンと拡大表示できるわけですからイイじゃないですかぁ。
『スマホ使ってます』みたいな感じでカッコいいし(/∇＼*)
そんなわけで、とりあえず解決したと思っております。また何かしらの問題は起きるでしょうね。でもそれが、楽しみだったりします＼(^o^)／