【ブログ初心者必読!】ビューポートが設定されていませんの対処法【はてなブログ】

f:id:amazon_roba:20201013010827j:plain

この記事は "ビューポートが設定されていませんの対処法"についてお話していきます。この記事は約5分ほどで読み終えることができます。ビューポートが設定されていませんのエラーはこれを読んで解決すべし!

Google consoleのモバイルユーザビリティでエラー!?

ブログを初めて数日、

一流ブロガーになるためには最低50記事は必要といわれ、

1日1記事のペースで書いております。

また、各記事の分析もブログのクリック率をあげるためには欠かせません!

はてなブログではアクセス解析という機能があるため、

そこでどの記事が人気でどれがいまいちなのか分析できるため、

非常に便利ですよね。

他にブログをはてなブログ以外のユーザーにも読んでもらうために、

google consoleも絶対必須です!

google consoleには、検索パフォーマンスという機能があり、

どのくらい記事が読まれているか、

また、どのくらいの表示頻度なのかまで、

細かい分析ができるので、ぜひ有効活用してください。

さて、記事を数枚書き上げ、googleにインデックス登録をした直後、

f:id:amazon_roba:20201016012542p:plain 

Google consoleのモバイルユーザービリティでエラー!!!!』

『エラーが3つも出ている!!!!』

『モバイル?でもレスポンシブルデザインにしたよ。。。なんで。。。』

『訳が分からないよ。。。』

HTML初心者でコピペばかりしていた自分には何言っているのか、

さっぱりわかりません。

レスポンシブルデザインなのになぜでしょうか。。 

とりあえずひとつずつということで、

ビューポートが設定されていません

の項目から解決していくことにしました。

今回のブログははてなブログのユーザー向けにビューポート設定方法について、

詳しく書いておきます!

2. ビューポートが設定されていませんの対処法

ステップ.1 ダッシュボードの設定を開き詳細設定のタブをクリック

f:id:amazon_roba:20201016014921p:plain

設定画面を開くと真ん中のタブに詳細設定はあります。

ここをいじることでビューポートの設定ができるようになります。 

ステップ.2 下までスクロールし”headに要素を追加”にビューポートを追加

f:id:amazon_roba:20201016015858p:plain

この部分に下記のコードを入れていきます。

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

 

ここに入れる最適なコードを自分なりに調べた際、

Takumi Kimura様の記事を参考にさせていただきました。

他にもさまざまなコードがウェブ上にあがっておりますが、

個人的にこのコードが一番フィットしていると思います。

本当にありがとうございます。

qiita.com

他にもさまざまなビューポートのコードがありますので、

自分のブログのスタイルにあったものを選ぶことをおすすめします。

 

結果ビューポートのエラーはなくなりました!

最後まで読んでいただき本当にありがとうございます。 

【ついでに。。。】

あと、Bingウェブマスターツール・googleconsoleへの登録方法についても書きました!ぜひぜひチェックしてください。

amazon-roba.hatenablog.com

amazon-roba.hatenablog.com