気になる備忘録

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-002

ツイートをサイドバーに表示してみる

プラグインが必要だと思って後回しにしてたけど、実はtwitter公式サイトでウィジェットのコードを発行するだけでよかった模様。 機能追加などで作成方法がよく変わるみたいなので、意味があるかどうか不明だ …

wordpress-logo-002

プラグインを2つ追加

1.ソースコード等を記事上に表示するプラグイン 昨日の、ファイルアップロード制限を上げる記事を書く際に 他のブログでよく見るコマンドとか設定ファイルの内容を表示する [crayon-5ba580bcb …

wordpress-logo-002

子テーマを利用してみる

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

no image

色々デザインを変えてみた

↑記事タイトルをこんな感じに ↓見出しをこんな感じに スポンサードリンク h2タグ見出し h3タグ見出し サイドウィジェットをこんな感じに。 デザインサイトを見てたら、グラデーション見本のページにたど …

wordpress-logo-002

新しい改行方を覚えた!

文章入力レベルが1上がった!! (今のレベルは不明です) スポンサードリンク 目次1 WordPressの文章改行には2種類ある1.1 Enterのみの改行(段落)1.2 Shift+Enterでの改 …

検索

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