ブログで稼ぐための必見記事

スマホ画面の表示崩れを解決する「viewport 設定」

こんにちは。
必死に張り切る ひしはり です。

今日は、パソコンでのブログ画面が、
スマホでは、うまく表示されない
問題について書いて行きたいと思います。

 

スマホを手に持つ画像

 

スマホ画面の表示崩れはどうすれば改善出来るのか?

 

ブログ立ち上げ当初から、
パソコン画面では、
ちゃんと表示されるのに
スマホ画面で見ると、
なぜかチグハグな感じになっていましたので、
ここらで一発気合を入れて修正に挑戦する事にしました。

 

「style.css」の追記だけでは不十分

 

一応、スマホ表示を最適化出来るコードを
ネットで調べて「style.css」に追記は
していたのですが、なんともしっくり
来ないんですよね。

中途半端に反映されてるみたいな感じ
とでも言うんでしょうか。

Webデザインに凝りたい訳では、
ないのですが、検索手段の1つとして
スマホ(モバイル)は、かなり大きなシェアを
占めていますので、
重要度は、どうしても高くなります。

まず、原因と思われるあらゆる事を
調べ倒して、あらゆる対応策を
試してみましたが、
いっこうに上手くいきません。

パソコンとスマホの分岐コードや
「このCSSを書き込んだら上手く行きますよ」
ネットで紹介されているものは、
すべて試しましたが、
ダメなんですね。

この間の週末が、
仕事が2連休でしたので、
家族の用事の時間以外は、
早朝から夜中まで作業していましたが、
どうにもなりません。

 

ずっと気になっていた2つの改善点

 

細かい部分では、
改善出来た所はあります。

例えば、スマホ画面の時に
左上にメニューのアイコンが、
表示されるのですが、
さらにその上にぴょこんと
「ツイート」ボタンが出てしまっていたんですね。

これは、完全にCSSのコードの
問題なんだろうなという所までは、
わかるのですが、その先がわかりません。

そこで「style.css」や各種「php」「ツイート」
記載がある部分を順に消して行き
その部分を反映しているCSSを突き止め
削除する事に成功しました。

ずっと不細工だと思っていたので、
まさに「目の上のたんこぶ」が取れた感じで
やっとスッキリしました。

あとスマホ画面でメニューアイコンと
検索ボタンの設置位置が、
微妙に中途半端だったので、
それもなんとか時間をかけて
修正する事が出来ました。

 

「最大の問題」アドセンスはみ出しとレイアウトのバランス

 

一番の問題はアドセンス広告の右端が、
途中で切れてしまっている事と
トップページのバランスが、
アイキャッチ画像との兼ね合いだと
思いますが、右に寄り過ぎてしまっている事でした。

 

viewport 設定の画像

 

スマホスクリーンショットの画像

 

ところが、アイキャッチ画像を外してみても
解消されませんでした。

それにアイキャッチ画像は、
外したくなかったので、
なんとかうまい具合にバランス良く
出来ないものかと色々試しましたが、
見事にどれも効果がありません。

苦肉の策として
最終的に辿り着いたのが、
「viewport (ビューポート)の設定」です。

 

viewport とは?

 

viewport とは、ソフトウェアの表示領域などの
意味合いで使われる言葉です。

例えば、スマホ画面での
表示する広さや範囲、領域の事を
いいます。

このviewport 設定を
WordPressの「header.php(テーマヘッダー)」
追記してwidth(幅)を420から10づつ
広くして行き、アドセンス広告が正常に
表示されるまで試して行きました。

 

viewport 設定の画像

 

すると、500に来た時に
アドセンス広告が正常に表示されましたので
今回は、これで良しとする事にしました。

若干、記事の文字サイズなどが
小さくなってしまっていますが、
以前よりは、断然に見やすくなりましたので
とりあえずは、O.Kです。

 

スクリーンショットの画像

 

スクリーンショットの画像

 

まとめ

 

まる2日以上この問題とがっつり
向き合いましたが、完全解決には
至りませんでした。

解決法として記事で紹介されている
あらゆる方法がすべて反映されなかったので、
何かしらの強制的な制御がかかっているのは
わかるのですが、それが何かを突き止めるのは、
今の私では知識不足で無理でした。

とにかく先へ進まないといけないので
今回は、苦渋の決断ですが、
7割くらいの完成度のままスマホ画面の事は、
一旦終了とする事にしました。

頭が破裂しそうとは、この事ですよ。
2日間もこればっかりにずっと向き合って
結果、7割って。(笑)

まあ、でも気になっていた所で
改善出来た所もあったので
良しとしましょう。

ポジティブシンキングです!

多くの成功者の人たちが
口を揃えて「100%を目指すな!」
「60%や70%で前へ進め!」
言われています。

中には、「30%で突き進め!」
言われる人もおられます。

それでいいんでしょうね。

そこで立ち止まって、
100%を目指して
達成出来ずに挫折してビジネス自体を
あきらめるより、
少々荒削りでも先へ先へと歩を進める事が
出来る人が成功していくんでしょうね。

といった事で私は、歩を先へ進めます。

後ろ髪引かれつつも
これでいいんだと自分に言い聞かせ
先へ先へと必死に張り切る ひしはり でした。
今日は、ここまで。

関連記事