気になる備忘録

VPSやWordPressの設定記録、ゲームや趣味から時事評論まで気になる事を書き残す

WordPress

スマホ用デザインの難しさ

wordpress-logo-001

投稿日:

久しぶりにブログのカスタマイズをしてみたんだけど、その際、スマホ用のデザインを確認してみたら色々と大変な状況になってた。

スポンサードリンク

記事がはみ出す

自分の使っているスマホは、これ
sh07e_5

NTTドコモ AQUOS PHONE si SH-07E
キャリア NTTドコモ
製造 シャープ
発売日 2013年6月21日
概要
OS Android 4.2
CPU Qualcomm
Snapdragon 600
APQ8064T 1.7GHz
(クアッドコア)
サイズ 126 × 59 × 10.7(最厚部11) mm
質量 約131 g
連続通話時間 約630分(3G)
約610分(GSM)
連続待受時間 約460時間(3G)
約400時間(LTE)
約400時間(GSM)
充電時間 約170分
バッテリー 2,100mAh
内部メモリ RAM:2GB
ROM:32GB
外部メモリ microSD
(2GBまで・ドコモ発表)
microSDHC
(32GBまで・ドコモ発表)
microSDXC
(64GBまで・ドコモ発表)

なんだけど、すでに4年前の機種。
アップデートは2回くらいあったけど、androidのバージョンは最初のまま。

当然ながら、元から入ってるブラウザも古いものなんだけど その古いブラウザでこのブログみて見たら 恐ろしいほど表示が崩れてた 😯

なんというか・・・CSSがうまく反映されてなかったり、画像がうまく縮小されてなかったりでトップページからすでにぐちゃぐちゃ。
hen_Screenshot_2017-06-20-02-27-22

これを丁寧に直す知識はない。
ブラウザが古いせいであってくれ!と「chrome」を入れて見てみると
hen2_Screenshot_2017-06-20-02-35-26

よかった、一応まともに表示されるようだ。
しかし、表のあるページはサイズ指定してるとはみ出すみたい。
hen3_Screenshot_2017-06-20-02-41-51

今までまったく意識してなかったんだけど、スマホ表示を考えるなら 上のような表の場合は縦長な形式で作るべきなんだろうけど、なかなか難しいんだよねぇ。

だがしかし、
アクセス解析をみてみると、
toukei20170620
のように、すでにモバイル端末が70%と多数を占めているんだよね。

PCで見てる人って少数派なのね・・・
使いやすいように、右側にウィジェットでカテゴリーやタブなどを並べる配置にしてあるのがもしかしたらあまり役にたってないのかも?とちょっと不安になる。

ちなみにPCで表示するとこうなってます。
20170620_pc_ss001

使用端末で特に多いのはやはり「iPhone」で、モバイル端末の50%以上を占めている。
もしかしたら「iPhone」なら解像度が高いので、PCタイプで表示されているのかなぁとも思ってるんですが、どうなんだろ?
一番アクセスが多いのが「iPhone」なのに、確認する手段がないんだよね。

まとめ

結局なにが言いたかったかというと、
今回のカスタマイズで、モバイルのみ表示される部分にも追加を加えたんだけど、どうやってもモバイル用デザインでは、PC表示のように使い勝手の良い形にはできなかったので、

モバイル端末でみていてページがひどく崩れてる人!いたら、「chrome」を入れてみてください!

モバイル端末で表などがみづらい場合、「PC表示」でみてください!

スポンサードリンク

広告

広告

-WordPress
-, , ,


comment

メールアドレスが公開されることはありません。

関連記事

wordpress-logo-001

WordPressで記事が表示されない状態に陥った話

4月15日の夕方頃から、WordPressが謎の動作不良になってしまい 6時間近く悪戦苦闘してました。 ひたすら、検索、検索、検索 しまくって、結局当てはまる解決策にたどり着けず 最後の手段でとってお …

wordpress-logo-001

WordPressのテーマをStinger8に

前のテーマ「First」は、シンプルで結構良かったんだけど カスタマイズしていくうちに思った変更ができなくなってきて、ちょっと手詰まり感が出てきてたので WordPressの定番テーマといわれてるST …

wordpress-logo-001

ブログ表示に障害発生中⇒解決

表示できず、サーバーに負荷が掛かるのを回避する為に 表示可能なテーマでの仮表示中です。 その為、デザインや色々と崩れてます。 5月11日 14:20 頃、無事回復しました。 やはり、プラグインのアプデ …

wordpress-logo-002

子テーマを利用してみる

タグとCSSとの関連性がだいぶ判ってきたので、もうすこし大胆にデザインをいじってみたくなってきた。 そこで、デザインをいじる際にWordPressで推奨されている子テーマを作成してのカスタマイズに挑戦 …

no image

ダメだ

パーマリンクの設定を変えると、ページが表示できなくなる・・・ mod_rewrite 問題は対処済み AllowOverride All も対処済み .htaccess の記入も問題ない うーん・・・ …

検索

ランキング参加中

管理人のシルビアです。
広島県在住。
熱しやすく冷めやすい慎重派。
興味のある事はトコトン調べてから行動。始める前に冷める事も・・・