Childお問い合わせホームWordPressElementor無料プラグインElementorでスマホ表示を2カラムにする方法2018年8月19日SHAREツイートシェアはてブLINE今回は、Elementorで作成したページでスマホ表示を2カラムに設定する方法を解説していきます。2カラムのコンテンツを作成した場合、PC表示は2カラムになりますが、スマホ表示ではある設定をしないとワンカラムになってしまいます。コンテンツ数が多いとワンカラムだと縦に長く表示されますが、2カラムだと一つひとつを小さく表示できスッキリさせることができます。2カラムのコンテンツを作成するまずはPC表示で横並びの2カラムのコンテンツを作成していきます。Elementorの編集画面に行き、新規作成の「+」ボタンを押します。ワンカラム、2カラムなど構造を選択できるので、2カラムを選択します。以下の画像のように横並びに2つコンテンツボックスが作成されました。今回はアイコンボックスでコンテンツを作成してみます。左のメニューからドラッグ&ドロップします。左側に編集画面が出てくるので、ひとつずつ編集していきましょう。このように2カラムで2列のコンテンツを作成してみました。(こちらはまだPC表示です)レスポンシブモードで編集画面をスマホ表示にする次にスマホビューで編集していきます。左下のメニューに1レスポンシブモードがありますのでクリックしましょう。2モバイルを選択します。このようにスマホ表示の編集画面になります。現在はワンカラムになっていますね。カラム幅を50%に設定すると2カラムになるでは、ここからスマホ表示を2カラムに変更していきます。下の画像の左上部分にマウスを置くと、赤枠の表示が現れますのでクリックしましょう。次に左側の編集画面よりスマホ表示のカラム幅を50%に設定します。するとスマホ表示で選択したコンテンツが50%幅になりました。同じように他のコンテンツボックスも50%に変更していきます。モバイル表示でのフォントサイズなど微調整を加えれば完成です!実際のサイトを見てみるまとめ2カラムのコンテンツを作成するところから説明しましたが、スマホ表示のカラムを50%に設定するだけなので、ものすごく簡単です。スマホ表示での2カラムはコンテンツをスッキリまとめたい場合や、スクロールしなくても同時にコンテンツを確認してもらいたい場合などに効果的です。この方法はランディングページやホームページを作成する際には、使用する頻度が高いので覚えておいて損はないですね。【おすすめ】Elementorに最適なWordPressテーマ5選Elementorで指定日時で特定コンテンツのみを表示・非表示にする方法WPプラグインElementorをより便利に拡張するアドオン9選【2022年版】WPプラグインElementor好きはFB公式グループに参加して情報収集だ!WPプラグインElementorでLPをサクッと30分で作成する方法この記事を書いた人Kuuuワードプレスを最も得意とし、Webマーケティング全般に詳しい。ネットで効率よく集客をしたい、収益の柱を増やしたいといった方にブログを中心としたマーケティングを教えている。