Jimdoサイトのモバイル表示とPC表示を切り替える方法についてなどまとめ【2016年版】

Home  > トピックス&コラムJimdo使い方 > レイアウト > Jimdoサイトのモバイル表示とPC表示を切り替える方法についてなどまとめ【2016年版】

Jimdoサイトのモバイル表示とPC表示を切り替える方法についてなどまとめ【2016年版】

Jimdoのレイアウトは、今日現在、基本的にすべてのレイアウトがレスポンシブWEBデザインに対応しています。
「基本的に」と言ったのは、「場合によってはそうでない」というケースがあるからです。

レスポンシブWEBデザインは、モバイル対応でもPCデザインのイメージを受け継ぎつつ、整ったデザインを見せることができるので、モバイル最適化の観点からも現在Jimdo以外のウェブサイトでも多く取り入れられている考え方です。
今日はJimdoをどのように使っているのか、それぞれのケースに合わせて、スマホ表示/PC強制表示の切り替え方法についてなど解説をしたいと思います。

※当記事は2013年に公開されたブログを2016年の現状に合わせてリライトしたものです。 

レイアウト遷移についての覚え書き的なこと

Jimdoでは2014年8月よりレイアウトが一新され、よりスタイリッシュなデザインを選ぶことができるようになりました。
旧レイアウトと呼ばれるこれまでのレイアウトはその後も使い続けることができていましたが、それも2016年8月の改変によって配布終了となりました。

それ以前から旧レイアウトでJimdoを運用していた人については、レイアウト変更をしない限り現在の旧レイアウトをそのまま使い続けることができます。しかし旧レイアウトは、今後専用のアップデートも行われず、サポートに関しても適用外となってしまう可能性があるなど注意も必要なレイアウトです。その点を理解した上で利用することが必要です。

その後、新レイアウトは更にレスポンシブWEBデザインへと進化したため、現状では以下の4つの利用パターンがあると想定できます。

  1. 旧レイアウトを使い続けている
  2. 新レイアウトだがレスポンシブWEBデザインには対応していない
  3. 新レイアウトでレスポンシブ化も完了している
  4. 独自レイアウトで制作されたデザインを使っている

それでは、以上を念頭にこの後の解説を進めて行きますね。

【ケース1】Jimdoの旧レイアウトを今でも使っている場合

旧レイアウトはレイアウト選択画面のネームが数字です
旧レイアウトはレイアウト選択画面のネームが数字です


旧レイアウトを使い続けている場合は、Jimdoの簡易モバイル表示機能と、PC表示機能を選ぶことができます。
この場合のPC画面強制表示とスマホ画面の切り替え方法は以下の通りです。

1.ログイン → 右のパネル「基本設定」をクリック →「モバイル」の「スマートフォン表示」をクリック

「モバイル」という箇所に「スマートフォン表示」があるはずですのでクリックしてください
「モバイル」という箇所に「スマートフォン表示」があるはずですのでクリックしてください

2.スマートフォン表示画面の右上にあるレバーっぽいアイコンをクリックします

切り替えの変更が完了したら、画面をちょっとスクロールし必ず「保存」してください
切り替えの変更が完了したら、画面をちょっとスクロールし必ず「保存」してください

 
以上の操作でPC強制表示とスマホ簡易表示の切り替えができます。 

※PC強制表示をクリックした場合は、Googleが推奨するモバイルフレンドリーにはなりませんのでご注意ください。
モバイルフレンドリーテストはこちらでできます 

PC版の強制表示となっている場合はこのように赤くなります
PC版の強制表示となっている場合はこのように赤くなります

【ケース2】Jimdo新レイアウトだけどレスポンシブ対応に更新していない場合

新レイアウトでもレスポンシブ対応していない場合の表示
新レイアウトでもレスポンシブ対応していない場合の表示


新レイアウトだからと言っても全てが対応しているとは限りません。

まずJimdoのレイアウトは、スマホ簡易表示を持つ新レイアウトが提供され、その後順次レスポンシブWEBデザインに切り替わったという歴史があります。実はこのレスポンシブ切替後に、レイアウトを更新する必要がありました。(見た目は同じでもデザインを構成しているHTML,CSSコードは別物に切り替わったためです)実は、このレイアウト更新をしなければ、新レイアウトを簡易スマホ表示のまま使うことができます。

この場合のPC画面強制表示とスマホ画面の切り替え方法は以下の通りです。

1.まずログイン後に右パネルの「レイアウト」部分でレイアウト更新していないことを確認してください

レイアウトに「①」のマークがある場合はレイアウトの更新がされていないことが考えられます
レイアウトに「①」のマークがある場合はレイアウトの更新がされていないことが考えられます


このように「レイアウト」の横に数字の記載が出ている場合は、(恐らく)Jimdoの新レイアウトをスマホ簡易表示で使うことができます。
そのままパネル下の「基本設定」をクリックしてください。

※注!スマホ簡易表示を使いたい場合は、レイアウトの更新はしないでください。誤って一度更新してしまうと、もう二度とスマホ簡易表示は使えなくなります。

2.「モバイル」のところにある「スマートフォン表示」をクリックします

「スマートフォン表示」をクリックしてスマートフォン表示の管理画面に入ります
「スマートフォン表示」をクリックしてスマートフォン表示の管理画面に入ります

3.チェックのアイコンをクリックすることでPC強制表示かスマホ表示かを切り替えることができます

切り替え設定が終わったら必ず「保存」してください
切り替え設定が終わったら必ず「保存」してください

 
以上の操作でPC強制表示とスマホ簡易表示の切り替えができます。 

※PC強制表示をクリックした場合は、Googleが推奨するモバイルフレンドリーにはなりませんのでご注意ください。
モバイルフレンドリーテストはこちらでできます 

PC画面強制表示(スマホ画面OFF)の場合はこのような見え方になります
PC画面強制表示(スマホ画面OFF)の場合はこのような見え方になります

【ケース3】新レイアウトでレスポンシブWEBデザイン対応が完了している場合

最近Jimdoを始めた方や、以前から新レイアウトを使っていてレスポンシブデザインへの更新を完了た方はこのケースに該当します。
これからJimdoを始める人や、現時点で新レイアウトを選んいる人は、旧レイアウトを選択することは出来ません。

現在の新レイアウトはすべてレスポンシブ対応で40種類から選べる
現在の新レイアウトはすべてレスポンシブ対応で40種類から選べる


このケースの場合は、もはやスマホの簡易画面表示を選択することはできません。
すべてがレスポンシブWEBデザイン対応していて、既に見ているデバイスのディスプレイ(モニター)サイズに合わせて、ひとつのデザインが内容そのままに自動的に形を変えて表示される仕様となっています。

なので、PCとスマホの切り替える設定画面は存在せず、見ている機種におまかせの表示となります。

【ケース4】独自レイアウトでオリジナルデザインを制作している場合

現時点で、最も多様のバリエーションに展開できるのが独自レイアウトです。
古くからJimdoを使っている人であっても、これからJimdoを始める人であっても選ぶことが出来るレイアウトで、どちらかと言うと新レイアウトとは別に存在しているレイアウトという印象に近いものになります。

コーディング次第ではレスポンシブ対応にもできますし、スマホ簡易表示を使うこともできますし、PC強制表示にもできます。
ただし、独自レイアウトでレスポンシブWEBデザインを作るということは、それなりのスキルが求められます。
HTMLとCSSの編集画面に対応するコードで制作することによって、独自レイアウトでもレスポンシブ対応は可能になりますが、比較的高度なWEBコーディングの知識が必要となりますので、腕に自信のある方はぜひ挑戦してみてください。

独自レイアウトの基本としてはレスポンシブではなく、スマホ簡易表示かPC強制表示かを選ぶことになります。
その場合の切替方法は旧レイアウトの場合と同じです。

旧レイアウトの項を参照してください



 

<前のブログ       次のブログ>