みんなのビジネスオンライン(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デザインが実現できます。

たにぐち まこと

『よくわかるPHPの教科書』や『マンガでマスター プログラミング教室』の著者。 ともすた合同会社で、プログラミング教育やこども向けの講座などを Udemyや YouTubeで展開しています。

コメントを残す

Top