みんなのビジネスオンライン(Jimdo)で、レスポンシブ・Webデザインをする方法

みんビズが採用している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デザインが実現できます。

Comments

comments

コメントを残す

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

CAPTCHA


%d人のブロガーが「いいね」をつけました。