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 件のコメント:
コメントを投稿