サイトをモバイル対応にする

  • 投稿日:
  • カテゴリ:

やっと重い腰を上げて、今さらながらモバイル対応にしました。

ヘッダに
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="(max-width: 480px)" href="<$MTBlogURL$>mobile.css">

インデックステンプレートを作成
「スタイルシート(モバイル)」という名前で作成

#container {
width:100%;
}

#header {
width:100%;
}

#header-inner {
width:100%;
}

#header-content {
padding:0;
padding:5%;
margin:0;
width:90%;
}

#header-name, #header-description {
width:100%;
}

#content {
width:100%;
}

#content-inner {
width:100%;
}


.layout-wt #alpha {
width:100%;
}

#alpha-inner {
padding-left: 5%;
padding-right: 5%;
width:90%;
}

.asset {
width: 100%;
padding:0;
}

#beta, #gamma {
display: none;
}

#footer-inner {
padding:0;
width: 90%;
}

#footer-content {
margin:0;
}

#footer {
margin:0;
}

.widget, .widget-content {
margin:0;
}

img {
max-width: 100%;
height: auto;
}

リンクソース

  • 記事用リンクソース:
  • Wiki用リンクソース(PukiWiki):
  • Wiki用リンクソース(MediaWiki):
  • SNS投稿用: