「モバイル ユーザビリティ」の問題

baserCMSの皆さま へ
umekatsu.com のホームページを立ち上げた者です。

baserCMS 4.1.3
レンタルサーバー名:ロリポップ!

スマートURLの利用: [ON / OFF]
「分からない」

設置フォルダ: [ドキュメントルート / サブフォルダ]
「たぶんドキュメントルート ?」

利用しているデータベース: [CSV / SQLite / MySQL / PostgreSQL]
「mysql」

PHPスキル(自己評価): [ A / B / C / D / E / 全くわからない]
「全くわからない」

私の現在のテーマは
「 baserCMSサンプルテーマ ( bc_sample ) バージョン:1.0.0 」

(1)
2019/07/17
Google Search Console Team からメールが来ました。「モバイル ユーザビリティ」の問題です。
以下のエラーが通達されました。

>このページはモバイル フレンドリーではありません
>このページは、モバイルデバイスでは使いにくい可能性があります
>次の 3 件の問題を修正してください

>クリック可能な要素同士が近すぎます
>ビューポートが「デバイスの幅」に収まるよう設定されていません
>コンテンツの幅が画面の幅を超えています

>ステータス: エラー

下記のページを見ました。

baserCMS ユーザーマニュアル
スマートフォン、モバイルサイトの対応・非対応の設定について

ページに、下記の指示がありました。

>① ログイン画面右上の「システムナビ」をクリックします。
>② baserCMSコアの中の「システム設定」をクリックします。ここには
>③オプションをクリックして開きます。

ここまでは問題ありません。しかし、ここから先はマニュアルと、私の管理画面が一致しません。

>モバイル 対応しない 対応する
>スマートフォン 対応しない 対応する

私の管理画面には、上記の項目が存在しませんでした。
マニュアルの不備でしょうか?

(2)
私は管理画面を見て、以下の項目を見つけました。

> システム設定 > サイト基本設定

>デバイス・言語設定
> (チェックあり)サブサイトでデバイス設定を利用する
> (チェックなし)サブサイトで言語設定を利用する

上記が関係ありそうなので、以下に変更しました。

> (チェックなし)サブサイトでデバイス設定を利用する

設定を保存しました。

(3)
私は管理画面を見て、以下の項目を見つけました。

> システム設定 > サブサイト管理 > サブサイト編集

>メインサイト 「パソコン」 (チェックあり) エイリアスを利用してメインサイトと自動連携する

上記が関係ありそうなので、以下に変更しました。

>メインサイト 「パソコン」 (チェックなし) エイリアスを利用してメインサイトと自動連携する

設定を保存しました。

(4)
2019/07/19
Google Search Console Team からメールが来ました。「モバイル ユーザビリティ」の問題です。
以下のエラーが通達されました。

> テキストが小さすぎて読めません
> ビューポートが設定されていません
> クリック可能な要素同士が近すぎます

前回 2019/07/17 とは、エラーの内容が変わりました。
前回は以下です。

>クリック可能な要素同士が近すぎます
>ビューポートが「デバイスの幅」に収まるよう設定されていません
>コンテンツの幅が画面の幅を超えています

(5)
2019/07/20
http://umekatsu.com のホームページは現在、稼働中です。googleでキーワード検索すれば、検索ランキングにもヒットする状態です。表示も可能です。
つまり、PCでの表示は良好のようです。スマートフォンでの表示が不良なようです。

対策を教えてください。

こんにちは!

まず、「baserCMS ユーザーマニュアル」ですが、情報が古くなっているため、最新の情報については「baserCMS公式ガイド」というWikiをご参照した方がいいかと思います。
http://wiki.basercms.net/メインページ

また、モバイル対応ができていない問題ですが、サイト基本設定やサブサイトの設定がうまくいっていないことが考えられます。
「baserCMS デモサイト」では、ご利用になっているbc_sampleテーマでモバイル設定ができている状態ですので、コンテンツの設定も含めて、そちらを参考に設定してみてはいかがでしょうか。
http://trial.basercms.net

なお、デモサイトは管理画面テーマがadmin-thirdになっているため、まずは「管理画面設定」から標準テーマに変えると分かりやすいかと思います。
http://trial.basercms.net/admin/site_configs/form

サブサイト編集 - スマートフォン
http://trial.basercms.net/admin/sites/edit/2

tommy6073 さまへ
umekatsu.com のホームページを立ち上げた者です。

アドバイスをありがとうございます。おかげで90%ぐらいは解決しました。

(1)
私は 「baserCMS デモサイト」 の管理画面を見て、以下の項目を見つけました。

> システム設定 > サブサイト管理 > サブサイト編集

>メインサイト 「パソコン」 (チェックあり) エイリアスを利用してメインサイトと自動連携する

>デバイス・言語
>[デバイス] スマートフォン ▼
>[アクセス設定]
> (チェックなし) メインサイトと同一URLでアクセス
> (チェックあり) メインサイトから自動的にリダイレクト (チェックあり) 全てのリンクをサブサイト用に変換する

一方、私の管理画面は 以下でした。

>[デバイス] 指定しない ▼

そして以下の項目が存在しませんでした。

>[アクセス設定]
> (チェックなし) メインサイトと同一URLでアクセス
> (チェックあり) メインサイトから自動的にリダイレクト (チェックあり) 全てのリンクをサブサイト用に変換する

両者が一致していないのが、不備に見えました。
ところが、以下の操作を行ったところ、それまで存在しなかった項目が出現しました。

>[デバイス] 指定しない ▼

>[デバイス] スマートフォン ▼

(出現した項目)↓
>[アクセス設定]
> (チェックなし) メインサイトと同一URLでアクセス
> (チェックあり) メインサイトから自動的にリダイレクト (チェックあり) 全てのリンクをサブサイト用に変換する

その後は「baserCMS デモサイト」の設定と、私の管理画面の設定を一致させることができました。設定を保存しました。
これで「モバイル ユーザビリティ」の問題は90%解決したようです

(2)
2019/07/26
Google Search Console Team に修正を確認しました。
ほとんどのエラーは解決しました。しかし、以下のエラーが残りました。

>クリック可能な要素同士が近すぎます

以下は、Google Search Console Team からのメールです。

>恐れ入りますが、一部のページで、この問題が依然として修正されていないことが確認されました。
>また、審査の過程におきまして、この問題が修正されているページが 1 ページあることを確認しましたので、併せてご報告いたします。

文面から判断すると、この問題が修正されたページと、修正されていないページとが混在しているようです。
申し訳ありませんが、また対策を教えてください。

問題のページはおそらくこのページかと思います。
http://umekatsu.com/s/太古の超巨大植物/

リストのアイテムが密着していることが原因かと思いますのでCSSで要素間の幅を広げてみてください。

「いいね!」 1