Pukiwikiページで「モバイル ユーザビリティ上の問題が検出されました」

日付:
Pukiwkiで作成したページに対しGoogle Webマスターから以下の連絡がきた。対応方法を記す。

xxx のウェブマスター様
Google のシステムは、貴サイトの 20 ページをテストし、そのうちの 30% に重大なモバイル ユーザビリティ上の問題を検出しました。この 6 ページの問題の影響で、モバイル ユーザーは貴サイトを十分に表示して楽しむことができません。これらのページは Google 検索でモバイル フレンドリーとは見なされないため、スマートフォン ユーザーにはそのように表示、ランク付けされます。

条件

  • pukiwiki 1.4.7使用
  • 180 Style wiki氏提供の自作Skinを狸おやじカスタマイズ版を使用

対応

(1) 180wiki.skin.phpを編集し、下記を<head>の直後に挿入。
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

(2) 180wiki.css を編集し、wrapper, wrap_sidebar, wrap_contentの定義を下記のように変更

変更後
@media (max-width: 480px)
{
   div#wrapper
   {
      display:table;
      table-layout:fixed;
      width:100%;
      text-align: left;
   }
   div#wrap_sidebar
   {
       display:table-footer-group;
       width:100%;
   }
   div#wrap_content
   {
       display:table-row-group;
       width:100%;
   }
}

@media (min-width: 1000px)
{
  div#wrapper {
 width: 1000px;
 margin: 0 auto;
 text-align: left;
  }

  div#wrap_content{
 float:left;
 width: 635px;
  }

  div#wrap_sidebar{
 float:right;
 width: 365px;
  }
}
div#footer{
 clear:both;
}

変更前
div#wrapper {
 width: 1000px;
 margin: 0 auto;
 text-align: left;
}

div#wrap_content{
 float:left;
 width: 635px;
}

div#wrap_sidebar{
 float:right;
 width: 365px;
}
div#footer{
 clear:both;
}

(3) 再度180wiki.css を編集し、headerの定義を下記のように変更

変更後(width行を削除)
#header{
 height: 150px;
 text-align: left;
 font-size: 30px;
 font-weight: bold;
 color: #444444;
}

変更前
#header{
 height: 150px;
 width: 1000px;
 text-align: left;
 font-size: 30px;
 font-weight: bold;
 color: #444444;
}

参考


以上


コメント

コメントを投稿