ブログのデザインが思うようにならない（泣） 少しずつ改善してますが、、対応できないとこがでてくるかも。。

私のブログでは一時期を堺に、エントリーの最初に画像を表示するようにしています。最初にエントリー内容を想起させるような画像を選ぶようにしています。この画像選びに数十分とかかることもありますがｗ　基本的にはエントリーを書き終えた後に画像を選ぶようにしています。そんなトップの画像(このエントリーでは丸いデザインにwebdesignと書かれた↑の画像)が、Android標準ブラウザによって表示がずれてしまうという現象を最近見つけました…。色々変更したのですが修正しきれていません。
※追記
トップ画像など画像が表示されるようになりました！！　3時間もかかったよ。。原因はまとめに追記しました。

普段の更新はPCから

普段私は、ブログの編集や更新をパソコンからしています。今の若い人たちはスマホ世代でパソコンよりもスマホの方が入力が早いようですが、私はもう10年以上もパソコンをほぼ毎日のように使っているのでパソコンの方が格段に入力スピードが早いです。自慢ですが、1分間に250文字位入力することが出来ます！　ただ、エントリーを書くときは考えながら書くことが多いのでもっともっと時間がかかるんですけどね…(1エントリー当たり約3時間～約6時間)。
基本的には上に書いたような環境ですが、ふとネタが思い浮かべばスマホでささっとメモを取ります。極力早く入力したい私は、スマホに変えた時にフリック入力を頑張って使えるようにしましたｗ　IMEはgoogle日本語入力を使い、編集というかメモはWordpressのアプリを使っています。

そのメモでとりあえず浮かんだことを殴り書き。要点を書き込んで行きます。それを元に見なおして肉付けをしていくような形です。メモのストックは現在12個ある状態ですｗ

さてPCで使っているブラウザですが、主に2つです。それはChromeとFirefoxです。どちらか1つに決めているわけではありません。悪い考え方ですが、どちらかが急に開発停止になってしまってもすぐに乗り換えることが出来るようにと2つ使っています。アドオンと呼ばれる追加機能も同じようにいれてあるので特に使用感は変わりません。
そして、PC購入時に必ずあるInternetExplorerは使わずｗ　理由は遅いことと、家のノートパソコンにはWindowsではなくLinuxが入っているからです。LinuxではInternetExplorerは基本的には使えませんからね。。

なので、このブログの閲覧推奨ブラウザは、ChromeとFirefoxです(出来ればパソコン…)。

ちょっとスマホで自分のサイトを見てみようかな。

それはふとしたことがきっかけでした。出先で、自分の書いたメモが必要となったのです。
…ブログに書いたっけ？　それともwikiに書いたっけ？　と思い出せず、まずwikiから見ました。
私は、完全に自分のメモとしてwikiを使っています。自分でwikiを作ると便利ですよ！ちなみにここが私専用のwikiです。 このサイトは、スマホに最適化してあるので出先でも使いやすいです。編集作業はもっぱらパソコンですけどｗ

と、自分が知りたい情報が書いてなかったので自分のブログで確認しました。結果書いてあったのですが…


デザインが崩れてる！！



特に、エントリー上部の画像が完全に横にはみ出してしまっているのです。

UserAgent変更のみでの確認では見つけられなかった(今は解決済み！)

すみません、ちょっとだけ技術的な話になるのですが。。。
インターネットに接続するときには、接続する側(クライアント)が接続される側(サーバー)に対して色々な情報を送るのですが、その中の1つにUserAgent(UA)という仕組みがあります。ざっくり言うと、クライアントがサーバーに対して、「私、スマホの○○って機種でアクセスしてるよ！」という情報が入ったものです。
なぜそのような情報を送るのかというと、サーバー側ではパソコンでアクセスされた場合、スマホでアクセスされた場合など、それぞれに最適化されたページを表示するためです。この機能が働いていなければすごくサイトが見づらくなります。

つまりサーバー側で、クライアントにあった見せ方をするページを表示してあげるために必要な情報がUAなのです。
このUAはブラウザで変更することが出来ます(ChromeとFilrefoxでしか確認してません)。
なので、UAをあえてAndroidにしたり、iPhone(safari)にしてみて、描画がおかしくないかの確認は実はしていたのです。

確認していたにも関わらず、実際に端末で見たらデザインが崩れていたのです。。

修正を試みるも、、、断念(今は解決済み！)

デザインが自由に作れることがメリットのWordpressですが、スタイルシート(CSS)をしっかりとわかっていないとカスタマイズ出来ません。
私は、あまりCSSを仕事で使うことが無いので表面的にしか知らないので調べながら勧めたのですが、、、治りませんでした。。
どうも、Androidの標準ブラウザの場合は、バージョンや端末によって微妙に異なる動作をするらしくこのような動きになったんじゃないのかなと思いました(言い訳)。

けど、似たようなテンプレートを使っているサイトは多分表示されるんですよね(他のサイト見てないから不明だけど…ｗ)。
本当は確実に原因を突き止めて修正したいところですが、どうも私のスペック不足のようですorz。
ある箇所を修正すると別の箇所に不具合が～～～の連続でした。

なので、、、出来ればスマホで見るときは是非是非是非、ChromeかFirefoxを使ってくれるとありがたいです。
そして、、、iPhoneもっていないから動作確認できないというｗ
多分描画崩れが起きてるだろうな…orz

まとめ

アクセス履歴を確認してみると、私のブログへは、InternetExplorerとSafariでのアクセスが多いようです。
Safariは多分iPhoneだと勝手に思っていますが、、、すみません！！

多分見づらいですよね。

本当は治したいのですが、どうしても治らないので、出来るだけ役に立てるような良質なエントリーを書いていこうと思っています！
原因はCSSのコメントの書き方でした…。しょうもないｗ　コメントの書き方を間違えていて、画像読み込み箇所のタグが読まれていないことが原因でした。

↓↓↓ブログランキングに参加しています。m(_ _)m ↓↓↓