ほぼ週刊★平民貴族

心豊かに生きることをテーマにした雑誌ブログ。主に映画と歴史と書籍について書いています。

ブログの難しさ

広告

Googleサーチコンソールを導入したところ

モバイルユーザビリティにエラーの表示が

つまりパソコン用からスマホ用に変換する上で以下の4つの問題が起きてるようだ。

①クリック可能な要素同士が近すぎる

②コンテンツの幅が画面の幅を超えている

③ビューポートが設定されていない

④テキストが小さすぎて読めない

もちろんサーチコンソールではこの問題を放置することで何がどうなるかは教えてくれない上、対処法も教えてはくれません。

どこから手をつけて良いかとても途方にくれてしまう。

それでも対処しようと今回色々とやってみました。

まずは③から

ビューポート(viewport)とは、表示サイズのことです。 ビューポートは、meta要素で値を指定することで変更できます。

と調べて出てきた。

ビューポートを設定すれば②も解消するのではと思い早速取りかかることにしました。


取り組みその①
某サイトに書いてある方法を試す
「設定」→「詳細設定」→「headに要素を追加」に飛び以下のコードをコピペ

そして設定を保存しました。

結果:前より悪くなる。
コンテンツの幅が画面を越えるってこういうことかな?という状態。

また新たな問題が

PC画面では存在していた筈のグローバルメニューがモバイル版になると消失。

元々トラブルの原因が不明な上、更に原因不明なトラブルが起きる形になる。


取り組み②デザインを変更する
ブログのデザインをよりモバイルとの互換性を持ったデザインに変更する。


結果:画面幅は固定化されるが、グローバルメニューが消失。

モバイル版もPC版のヘッダに貼ってあるHTMLが反映されるようにしてある。

なのに何故かモバイル版には反映されず。

謎が深まる。


ブログはもっと楽しく出来るものだと思ってましたが

どうやらそうでもないみたいです。