2019年3月10日SHAREツイートシェアはてブLINE2019年3月4日にワードプレスのページビルダープラグイン「Elementor」がver2.5にアップデートしました!アップデートによりフリーハンドでWebデザインをすることができるようになりました!どういうことかは下のGifを見てもらったら一目瞭然です。このように各ウィジェットを自由自在にページに配置することができるようになりました。今までもマージンを数値で調整することにより位置調整は可能でしたが、ドラッグ&ドロップで位置調整ができるのは楽ですね。これは「絶対配置」という機能になります。今回はElementorでの絶対配置の設定方法と注意点について解説をしていきます。Elementorって何?という方はこちらの記事で解説しています。上の例では画像を移動させましたが、ウィジェット(要素)であれば画像でなくても絶対配置の機能を使えます。テキストやボタンのウィジェットなど自由に動かせます。絶対配置を適用するまずは絶対配置を設定したいウィジェットを選択し、詳細タブをクリック。Positioning」をクリック。(まだ日本語に翻訳されていませんが、今後日本語翻訳されるかと思います。)位置の「absolute」を選択。設定はこれだけで、あとは自由自在に動かせます。ウィジェットの幅を変更する方法は二つあります。ひとつはウィジェットの水色の枠線を掴んで狭める(ドラッグ&ドロップ)方法。Positioning」で、幅を「カスタム」を選択。Widthの値を調整。スマホ、タブレットの絶対配置も調整可能PC表示で絶対配置を調整しても、スマホやタブレットでも同じように表示されるわけではありません。PC上の絶対配置で設定したため、小さいデバイスでは大きく表示が崩れます。スマホやタブレットは別に調整する必要があります。今回はスマホ表示で説明していきます。左下のメニューからレスポンシブモードでモバイルを選択します。表示が大きく崩れているのが分かります。PC表示の時と同じ操作で各ウィジェットの配置やサイズを設定していきます。すると、PCの際の配置とスマホの際の配置で自動で切り替わるようになります。絶対配置の注意点Webデザインにとって非常に便利に思われる絶対配置ですが、実は一般的にレスポンシブデザインの観点からは悪い評価となっています。その理由は2つあります。Elementorで正しい設定を行えば2点の理由には当てはまりません。絶対配置の評価が低い理由2つPC、スマホ、タブレット表示で見た際に表示崩れが起きる。ページ自体の横幅を超えたウィジェット配置を行うと無駄な水平スクロールが発生してしまう。1に関しては、ElementorではPC、スマホ、タブレットで個別設定が可能になっていますので、すべて設定したら表示崩れは起きません。2に関してもすぐに問題を解消できるようになっています。不要な水平スクロールとは何かというと、下記画像のような現象です。紫グラデーションの丸い画像がページの規定幅を超えています。表示されなくても構わないのにご丁寧に横スクロールできるようになっていますね。無駄な水平スクロールの原因となっているセクションをクリックします。「レイアウト」⇒Overflowを「Hidden」に選択します。Overflow:Hiddenというのは、はみ出したコンテンツはスクロールせずに隠しておきますよということです。まとめElementorの絶対配置はフリーハンドで直感的にWebデザインができるので、素晴らしい機能です!ただ、設定を間違えると、表示崩れを引き起こすので、ページの全体に絶対配置を適用すると、1ページ作成するのに逆に多くの時間を要してしまうかもしれません。絶対配置を利用するのはページの中で1,2か所程度に控えめにしておくのがいいでしょう。ここぞというところだけに使用するのがいいですね。Hiddenの設定この2点だけは忘れないようにしておけば、絶対配置は重宝する機能になるはずです。直感操作OK!ページビルダー無料プラグイン『Elementor』の基本操作Elementorに最適なWordPress無料テーマ4選この記事を書いた人Kuuuワードプレスを最も得意とし、Webマーケティング全般に詳しい。ネットで効率よく集客をしたい、収益の柱を増やしたいといった方にブログを中心としたマーケティングを教えている。