Elementorでサイトを制作していると、
レスポンシブ編集で意外なトラブルが起こることがあります。
今回は、実際にお客様の環境で発生した
「PCモードで編集できない問題」をシェアします。

私の環境では正常に動作していたため気づかなかったのですが、
お客様側では編集画面でPCモードを選んでも、
PC用の設定項目がグレーのままで編集できないとのことでした。

原因は意外なところにありました。

---

Elementorでレスポンシブモードに切り替えると、
画面上部の黒いバーに PC・タブレット・スマホ のアイコンが並びます。
さらに右側には、現在の編集画面の横幅が表示されます。

お客様のスクリーンショットを見ると、その横幅が 「1000px」 しかありませんでした。
そこで自分のブラウザを1000px程度まで縮めてみたところ、
Elementorが タブレット表示として認識 したのです。

つまり：

• PC環境でも画面幅が狭い
  → Elementorがタブレット扱いに切り替える
  → PC用の設定が表示されない

ということだったのです。

長期的に考えると、外部モニターを導入しPC規格の横幅で作業できる環境を
整えるのが最善です。

横幅1920px前後のモニターであれば、
ElementorのPC表示を正確に確認できますし、
作業効率も大幅に向上します。

私自身もデスクトップPCに3枚のモニターを接続して作業しており、
画面の広さは制作の品質に直結すると感じています。

左側のパネルを折りたたむと、横幅が広がりPCモードに切り替わる場合があります。

キーボードの F12 を押すと開発者ツールが表示されます。
上部メニューのデバイス切り替えアイコンを押し、
表示モードを 「レスポンシブ」 に設定します。

ここで横幅を 1500px以上 に設定すれば、
画面サイズが小さくても PC規格で確認できます。

もし同じような状況が起きた場合は、

1. 画面幅が足りているか確認する
2. 編集パネルを閉じてみる
3. それでもダメならChromeの開発者モードで幅を指定する
4. 長期的には外部モニターの導入がおすすめ

この流れで対応すれば、ほとんどのケースは解決できます。

何事も “作業環境を整えること” は非常に大切です。
制作の品質や効率にも大きく影響しますので、
ぜひ環境を見直してみてくださいね。