Elementor でデザインを作る際、見出しの横に細い縦線を入れてオシャレにしたい、テキストの横に遊び心のある四角いブロックを置きたい、と思ったことはありませんか？
わざわざ画像を作って貼り付けるのは手間がかかります。
実は、Elementor の「スペーサー」ウィジェットを使えば、画像不要でたった数クリックで、こうした装飾が作れます。今回は、以前の記事で解説した余白用とは全く別の、スペーサーを「色付きの図形」として使うワザを解説します！
過去の記事をはこちらから。
▼ 余白作りに「スペーサー」ウィジェットを多用してはいけない理由
スペーサーは図形になれる！基本の仕組み
スペーサーは、本来は透明な箱で余白を作るウィジェットですが、Elementor のスタイル設定を活用することで、色付きのブロックに早変わりさせることができます。
-
スペーサーウィジェットを、装飾したい場所に配置します。
-
左パネルの [ 高度な設定 ] タブを開き、下の方にある「背景（Background）」の項目を探します。
-
デフォルトの設定（通常は透明）から、「背景タイプ（クラシック）」を選び、好きな色を選択します。
-
レイアウトで幅（Width）を調整します。
-
あとは、[ コンテンツ ] タブで高さ（Height）を、調整すると、色付きの図形が完成します。
たったこれだけで、透明だった箱に色が付き、デザインの素材として使えるようになります。
具体的な活用例（1）アクセント線（たて線・よこ線）
スペーサーを図形化できたら、まずは定番の装飾線を作ってみましょう。画像を使わないため、後から色や太さを自由に変えられるのが最大のメリットです。
-
見出しの左側にたて線：
見出し（テキスト）の左側に細いスペーサーを置き、背景色をアクセントカラーにします。[ 高度な設定 ] タブで幅を「カスタム（例：8px）」等にし、高さを調整。コンテナ（セクション）の設定で、見出しと横並びに配置します。 -
見出しの下に太いよこ線 ：
見出しの下に、幅いっぱいのスペーサーを置きます。背景色をつけ、幅を100%、高さを4px等に設定。これで、単なるボーダー（下線）よりも、もっと存在感のあるデザイン線が作れます。
具体的な活用例（2）幾何学カラーブロック・フレーム
さらに上級編として、複数のスペーサーを組み合わせて、モダンな幾何学デザインを作ることもできます。
例えば、テキストボックスの横に、異なる色のスペーサー（青、黄色、緑など）をいくつか配置します。それぞれの幅と高さをバラバラにし、[ 高度な設定 ] 位置を設定。画像なしで、遊び心のあるBauhaus（バウハウス）のようなレイアウトが完成します。
このように、小さなスペーサーをコンテナの四隅に配置してフレームのように見せるなど、アイデア次第でデザインの幅は無限に広がります。
まとめ
-
スペーサーを図形にするには、スタイル＞背景で色を設定する。
-
幅と高さを細かく設定すれば、画像不要でオシャレなアクセント線が作れる。
-
複数のスペーサーを組み合わせれば、複雑な幾何学デザインも可能。
-
以前の記事で解説した「余白用」とは全く別の強力な使い方。
この小技を知っていると、サイト全体のデザインにメリハリと高級感が出ます。ぜひ次回のサイト制作から、スペーサーを色付きの図形として活用してみてくださいね！
