今頃なんですが、FlavorDesignのサイトをレスポンシブ化しました。
自分のサイトって、真っ先にやれよという感じなんですが、
結局後回しにして、ここまで…汗
…といっても、作り直す余裕はなくて、既存のサイトに、モバイル用のCSSを追加しただけです。
手抜きすぎますが、タブレット用は、PC用と同じものを見せることにしました。
style.cssをコピーして、mobile.cssを作り、
検索置換で、横幅を100%にしたり、フロートを解除したりしてから、表示を調整。
当時、グローバルナビを背景画像でだしてあったので、そこが面倒でしたが、
カスタムメニューを使って、テキストに変更。
jQueryプラグイン「MeanMenu」を使って、スマホ用折りたたみメニューを。
下記メモです。
[html]
<?php if (is_mymobile()):?>
<!– ↓スマートフォン用のviewport –>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!– ↑スマートフォン用のviewport –>
<?php else: ?>
<!– ↓スマートフォン以外のviewport –>
<meta content="width=1024" name="viewport">
<!– ↑スマートフォン以外のviewport –>
<?php endif; ?>
[/html]
[html]
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( ‘stylesheet_url’ ); ?>" />
<link media="only screen and (min-width: 0px) and (max-width: 480px)" href="<?php bloginfo( ‘stylesheet_directory’ ); ?>/mobile.css" type="text/css" rel="stylesheet"/>
[/html]
