今頃なんですが、FlavorDesignのサイトをレスポンシブ化しました。

http://flavor-design.biz

自分のサイトって、真っ先にやれよという感じなんですが、
結局後回しにして、ここまで…汗

…といっても、作り直す余裕はなくて、既存のサイトに、モバイル用のCSSを追加しただけです。
手抜きすぎますが、タブレット用は、PC用と同じものを見せることにしました。

style.cssをコピーして、mobile.cssを作り、
検索置換で、横幅を100%にしたり、フロートを解除したりしてから、表示を調整。

当時、グローバルナビを背景画像でだしてあったので、そこが面倒でしたが、
カスタムメニューを使って、テキストに変更。
jQueryプラグイン「MeanMenu」を使って、スマホ用折りたたみメニューを。

下記メモです。

<?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; ?>
<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"/>
||||| 0 I Like It! |||||

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Post Navigation