" />

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

2016年5月 1日 | Modefy | コメント (0)

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

ヘッダに
<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;
}

[263 Viewd (RSS: 55)] [Edit]
記事情報
  • 投稿日:
  • 更新日:
リンクソース
■記事用リンクソース:

■Wiki用リンクソース(PukiWiki):

■Wiki用リンクソース(MediaWiki):

■短縮URL:
コメントの追加









名前、アドレスをブラウザに記憶させますか?


※投稿には、名前とメールアドレスが必要です。
※メールアドレスは、表示されません。
※コメントにはタグは使えません。
※コメント中のURLは自動的にクリッカブルに変換します。





画像の中に見える文字を入力してください。



同カテゴリの人気記事
マイブログアンテナ
Feeds
EarlGrey Tearoom
メアド
counter
Powered by Movable Type