BLOG最適化

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

パソコンスマホタブレットのイラスト画像

 

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

 

ひしはり
ひしはり
ブログ記事のスマホ画面での表示崩れって
どうやって直せばいいの?

本記事では
このような疑問にお答えします。

 

本記事の内容

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

 

今では「スマートフォン
(以下スマホ)」の普及により、
多くの人がブログやSNSをはじめとする
情報をパソコンやタブレットよりも
スマホで見るようになっています。

そんな今の時代に
ブログを運営していく上で
スマホ画面の見やすさは
とても重要になっています。

本記事を読めば、
スマホ画面での表示崩れを
「viewport設定」を行うことで
ブログ初心者の方でもかんたんに
改善することができますよ!

読者にとって
見やすいスマホ画面に改善して
さらなるアクセスアップに
つなげましょう!

 

この記事を書いている人

この記事を書いている私はブログ歴3年目

現在は本業のサラリーマンの傍ら副業ブロガーとして活動しています。

Twitter(ひしはり人生再構築ブロガー)のフォロワーは2100人ほど。

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

スマホを手に持つ画像

 

ブログ立ち上げ当初から
パソコン画面では、
ちゃんとブログ画面が
表示されているのに
スマホ画面で見ると、
なぜかチグハグな感じに
なっていました。

ブログ画面が
スマホではうまく表示されない
そんな問題を今日は
解決して行きたいと思います。

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

 

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

 

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

 

ところがアイキャッチ画像を
外してみても
解消されません(汗)

 

ひしはり
ひしはり
どういうこと?

 

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

そこでいろいろネットで調べて
にたどり着いたのが、
「viewport (ビューポート)
の設定」です。

「viewport(ビューポート)」とは?

 

「viewport(ビューポート)」とは、
ソフトウェアの「表示領域」などの
意味合いで使われる言葉です。

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

「Viewport設定」は「WordPress」の「header.php」から

 

この「viewport設定」
「WordPress」
「header.php
(テーマヘッダー)」から
設定することができます。

「WordPress」
管理画面の左メニューから
「外観」「テーマエディター」
クリックします。

この「viewport設定」のコードを
「WordPress」
「header.php
(テーマヘッダー)」
「</head>タグ」の上に追記します。

ズラズラとならぶ文字列の中から
「</head>タグ」
かんたんに見つける方法は、
Windowsなら「Ctrl+F」
Macなら「command+F」
「検索フォーム」が出て来ます。

 

検索フォームの画像

 

そこに「/head」と入力すれば、
ページ内の/headだけ
色が変わりますので、
すぐに見つけることができます。

 

headタグの画像

 

 

【Google推奨のコード記述例】

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

 

スマホ画面の幅には
いろいろなサイズがありますので、
設定はそれぞれに
適さないといけません。

その部分に対応しているのが
「width=device-width」の部分です。

それぞれの端末の幅の値を取得して
その値をもとに設定してくれます。

 

【Google非推奨のコード記述例】

<head>
<meta name="viewport" content="width=500">
</head>

(こちらはあくまでも
応急措置としてのパターンです)

 

私の場合は応急措置の方で対応しました。

「width(幅)」
「420」から「10」ずつ広くして行き、
アドセンス広告が正常に
表示されるまで試して行きました。

 

viewport 設定の画像

 

すると「500」に来たときに
アドセンス広告が
正常に表示されましたので、
今回はこれで良しと
することにしました(笑)

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

 

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

 

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

 

まとめ

 

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

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

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

 

ひしはり
ひしはり
頭が破裂しそうとはこのことですよ(笑)

 

2日間もこればっかりに
ずっと向き合って
結果、7割って。(笑)

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

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

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

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

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

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

といったことで
私は歩を先へ進めます(笑)

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

関連記事