Elementorでのレスポンシブ設定での思わぬ落とし穴
充実様です♪
Hiroです♪
今回はElementorで編集中に起こった
思わぬトラブルについてシェアしたいと思います。
Hiroの環境では
まったく問題ない内容なので
これまで気づかなかったのですが、
お客様に納品した際にそれは起こりました。
PCとタブレットとスマホで
デザインが調整されるようにしており
編集画面でレスポンシブモードに切り替えて
それぞれのデバイス用に編集するのですが
お客さんの環境ではPCモードに切り替えても
PCの項目がグレーのままで編集が出来ないとのこと。
設定を見ても特に問題なく
自分の環境でも正常で
操作の仕方に問題があるんじゃないかと
思っていたのですが
お客さんの画面のスクショを見て気が付きました。
Elementorでレスポンシブモードのボタンを押すと
上の黒いバーにPC、タブレット、スマホのアイコンがあり
さらに右の方に画面サイズが表示されます。
その横幅が1000pxしかないのです。
そこで自分の環境でブラウザの横幅を
縮めて1000pxにしてみたところ
1000近くでタブレット仕様に切り替わりました。
つまり、お客さんのPC画面がちっこすぎて
タブレットと同じ規格になっていたのです。
そのため、いくら試行錯誤したところで
規格が足りないのにPC規格が表示されるはずはありません。
長期的視点で見ると
一番の方法は、PC規格のモニターを購入して
ノートに繋いでデュアルモニターにして
PC規格が確認出来るようにする。
それがベストかと思います。
このくらいの規格であれば
横が1920ありますので十分PC規格として
機能します。
ノートPCは、手軽で便利ですが
家で作業する場合は、やはりでかい画面で
ゆとりを持って作業等したいものです。
作業効率も全然違います。
なので家でノートPCを使うときは
モニターに繋いで遊んでますよ♪
ちなみにHiroのメインPCは
デスクトップで３つのモニターをつないでますので
トレーダーみたいになってます。
ということで、
長期的視点ではモニターを導入するのがベストですが
早急に対応する必要がある場合は、
いくつか対応出来る方法があります。
一つは、規格がほんのわずか足りないくらいでしたら
Elementorの編集画面の左側にコントロールパネル？
編集パネル？がありますので
それを引っ込めれば幅が広がりますので、
PC規格に切り替わるかもしれません。
それでもダメな場合は、
Google Chromeのブラウザを使用している前提で
キーボードの「F12」を押します。
そうするとブラウザの右側にウィンドウが出て
開発者モードになります。
そこの一番上の左から2番目のアイコンを
ポチっとクリックすると
様々なデバイスサイズに切り替えて閲覧することが出来ます。
上のサイズのところのプルダウンメニューをクリックして
今回は「レスポンシブ」を選択します。
そうするとサイズが自由に設定できるようになりますので
PC規格に合うように1500以上で設定します。
するとこんな感じで、小さい画面サイズでも
その規格に合った感じでの表示のされ方に切り替わります。
表示がちっこくなりますが
そこは我慢して一時しのぎで乗り越えてください♪
もし同じような問題に直面されている方は
是非、試してみてください。
何事も環境を整えることは
とても大事なことですので
環境を整えることに出し惜しみはしないようにしてくださいね。
