ちゃんとブログ。

みんビズが採用しているJimdoでは、標準でスマートフォンへの対応もできています。しかし、見た目はいかにもなスマホサイトで、デザインも自由になりません（たぶん）。

そこで、CSSを動的に切り替えるいわゆる「レスポンシブ・Webデザイン」にする方法を紹介します。

スマホ表示をOFFにする

まずは、標準のスマホ表示をOFFにします。

独自レイアウトにする

Jimdoの無料プランだとできない（たぶん）のですが、みんビズはProプランなので「独自レイアウト」を選ぶことができます。レイアウトメニューから選びます。

メディアクエリーを記述する

このあたりからが特殊ですが、JimdoはCSSファイルを別途アップロードすることができません。そのため、link要素でCSSを読み替えたりはできず、この1ファイル内で切り替えを頑張るしかありません。

CSS内で、メディアクエリーを効かせるには次のように記述します。

@media screen and (max-width: 600px) {
…
}

viewportを記述する 

head要素内の記述は、メニューから次のボタンで編集できます。

次のような感じで、viewportを記述します。

<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />

これで、無事にレスポンシブ・Webデザインが実現できます。