2015年6月13日

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;
} 

参考


以上


0 件のコメント:

コメントを投稿

ラベル

Android Android-x86 apache Backup Blog CentOS DDNS Debian DIY DTM Eclipse Excel Fedora Firefox Google Chrome Hyper-V java Kreetingkard KVM Linux Linux Mint Linuxコマンド例 Linuxシステム管理 Linux管理 Minecraft Minecraft: Wii U Edition Nintendo 3DS nmap O'REILLY Office KB openssl OpenStack openSUSE openSUSE 12 Parted Magic patch(1) PC DIY PC自作 pgrep(1) PHP Picasa pmap(1) PMMP Postfix postgresql printer ps(1) pukiwiki QEMU RHEL rhel5 rhel6 samba sar(1) savscan(1) savupdate(1) Scientific Linux 6 security SELinux SEO showrgb(1) Slackware Linux SLES smbclient(1) smbstatus(1) snmpd(8) squid startx(1) stat(1) strace(1) SUSE syslogd(8) tac(1) tee(1) testdisk Thunderbird timezone tomcat touch(1) tr(1) trouble shooting tuning ubuntu uname(1) USB tethering USBブート USBメモリ vi(1) vim(1) virtualbox VMWare VMWare Player vmware server VMware Tools VNC Web Services Wii U Windows wordpress x window XAMPP イベント・祭り インターネット おもちゃ屋 カツカレー ギフト クリーニング店 ゲーム ゴミ コンビニ サンプルコード スプラトゥーン2 スポーツ スポット スマホ ソースコード その他 ダーツ ツールTIPS つぶやき ディスク設定 デジタルDIY デジタルガジェット デスクトップ設定 ドラッグストア トラブル トラブルシューティング ニュース ネットワーク設定 バス観光 バックアップ・リストア ビリヤード ブログパーツ プログラミング ブログ作成 ペット用品店 ホームセンター マンションギャラリー メダリーフ リモートアクセス設定 リラクゼーション レジストリ 為替 映画館 英語勉強メモ 横浜市 横浜市交通局 横浜矢向周辺 横濱たちばな亭 屋台 屋内プレイランド 屋内遊園地 温泉 花火 画像 海水浴場 外食 街猫 学校 楽天ウェブサービス 鎌倉 交通 公園 公共施設 国内x86サーバ 災害 雑貨店 参考文献 散髪 使い方 子供教室 死因 寺社 車関連 習い事 住居メンテナンス 出前 情報 食料品店 尻手駅前 新横浜 新横浜駅 新規出店情報 新築 新鶴見公園 新鶴見人道橋 神社 辛スナック 水族館 川崎 川崎駅 川崎駅周辺 川崎市南部市場 川崎大師 卓球 段葛 中古屋 中山ビル 釣り施設 鶴岡八幡宮 鶴見 鶴見神社 電気店 電車 統計 動物園 南武線 日枝神社 買い物 買物 博物館等 八景島シーパラダイス 美容・サロン 百貨店 病院 風呂 複合商業施設 保育園 本屋 漫画 漫画喫茶 矢向 遊園地