はてな初心者も、これで解決！サーチコンソール モバイルユーザビリティエラー対処法

初心者はてなブロガ－が、新しいgoogle search consoleのモバイル　ユーザビリティ　エラーを修正してみる

サーチコンソール　モバイルユーザビリティ　エラー

先日、新しいサーチコンソールを開いてみると、拡張の所にモバイルユーザビリティがエラーと表示！

初心者はてなブロガ－としては、何の事やらでまたまた先人に頼る事でネット検索です。

沢山の記事が出ています。

やはり多くの皆さんが経験済の症例だという事です。

私のエラー表示は、下記の通りです。

初心者はてなブロガ－には、さっぱり意味がわかりません。

ネット検索してみると、多くの皆さんが経験されているエラーとほぼ同じです。

「ビューポートが設定されていません」の修正

まず最初に、ＣＳＳコードを貼る前に「設定」から「詳細設定」の下の方にスクロールして、「headに要素を追加」部分に下記をコピペしておいてください。

<meta name=viewport content="width=device-width, initial-scale=1">

貼りつけ後、設定を保存。

※私の場合は、レスポンシブデザインでないため、念のために下記で説明する「デザイン」から「スマホマーク」の「ヘッダ」で、ＣＳＳ編集の中にもコピペしました。実際正しいのかどうかは不明です。

 「テキストが小さすぎて読めません」の修正（文字フォントサイズ）

まず、最初の「テキストが小さすぎて読めません」の部分を調べました。

自分の、スマホでサイトを確認してみると、確かに字が小さすぎて読みづらい感じがします。

実は、私のはてなブログのテンプレートテーマはDUDEを使っており、レスポンシブデザイン対応ではない事が影響している可能性があり、フォントサイズの変更が必要だとわかりました。

※調べているうちにわかりましたが、現在ではDUDEもレスポンシブデザインに出来るようになってるみたいです。

フォントサイズについては、下記記事を参考にさせて頂きました。

nukio0803.hatenablog.com

しかしながら、DUDEのスマホ表示のフォントサイズ変更は、「デザイン」の「スマホマーク」でＣＳＳを触らなければなりません。

スマホ用のＣＳＳ編集方法は下記を参照。

tsukuruiroiro.hatenablog.com

次にダッシュボードの「ヘッダ」の「記事下」にＣＳＳコードを入れて編集していく流れです。

ＣＳＳコードは以下のとおりです。

<style type="text/css">

/*この中にCSSを記述 */

</style>

私は、<style type="text/css">○○○××○○○</style>こんな感じでデザインを施してきたのですが、文字のフォントサイズ変更についてはさっぱりでわかりませんでした。

調べてみたところ、間に入れるフォントサイズ変更コードは下記のとおりです。

.entry-content p {font-size: 17px;}

グーグルが推奨しているスマホのフォントサイズは、16pxとか17px・17.6pxと、いくつか出ていたので、私は17pxで設定しました。

保存して確認してみると、大きくなって見やすくなりました。

「テキストが小さすぎて読めません」の修正（目次フォントサイズ）

しかし、まだ文字が小さくて見づらい部分が有ります。

目次部分です。

ここが、なかなか検索しても出てこなくて苦労しました。

素人なので、応用が利かず時間がかかってしまうのが毎回の悩みです。

ようやく見つけたコードが下記です。

.table-of-contents li{

font-size:120%;

}

上記を、先ほどと同じようにＣＳＳ編集の間にコピペです。

通常font-size:100%になっているのですが、レスポンシブデザインではないので自動調整されません。

私の場合は、120％に変更してみました。

見やすくなりました。

フォントサイズの修正は完了です。

グローバルメニューのフォントサイズの修正

「デザイン」から「スマホマーク」→「ヘッダ」→「記事下」部分のグローバルメニューＣＳＳコード内のfont-size: 17pxに変更。

文字も大きくなり、操作しやすくなりました。

モバイルユーザビリティエラーの修正のまとめ

やってみると、意外と簡単な作業でした。

これによって、「クリック可能な要素同士が近すぎます」と「ビューポートが設定されていません」も同時に解決されました。

モバイルフレンドリーテストを行なった結果、以下のように表示されました。

無事終了です。

50代初心者はてなブロガ－でも、試行錯誤で対処する事が出来ました。

カッコいいテーマのテンプレートと思ってデザインしてきましたが、レスポンシブ仕様では無かったので、苦労はしましたが勉強にはなりました。

ひとつ疑問に思う事が有るのですが、他の方のブログを拝見しているとスマホで2カラム表示になっていて、非常に字が小さく見づらいものも有るのですが、モバイルユーザビリティエラーではないのかな？

参考になれば幸いです。

おわり

※本サイトのＣＳＳコード使用で、設定変更後に不具合が生じた場合は責任は負いかねますのでご承知おきください。