WordPressのテーマビルダープラグイン「Elementor」のファンブログ

【 ウィジェット マニュアル 】区切り線とスペーサー

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
eyecatch_boy

kugiri_iconspacer_icon

今回の ウィジェット マニュアル は、区切り線とスペーサーです。マニュアル化する必要あるの?と思われそうですが、実はこれが奥深いんです。という事で、まずは区切り線から行ってみましょう!

区切り線 ウィジェット

読んで字の如し、区切る為の線です。

おじさん
おじさん
まんまやな・・・

使い方いよっては、ちょっとした装飾にも使えて便利なウィシェットなんですよ。

コンテンツ

区切り線ウィジェットにはスタイルの項目が無いんですね。コンテンツと詳細のみでコントロールして行きます。

スタイル

線の種類ですね。直線・二十線・点線・破線の4種類の線から選べます。
style

太さ

line_bald

太さは1〜10で設定出来ますが、手入力すると・・・

line_bald

10以上の数値を設定出来たり、小数点で設定する事も可能です。

色と幅

もちろんですが、色と幅(線の長さ)も設定出来ます。

line_colour_wide

(設定方法は割愛します)

配置

配置は左寄せ・中央寄せ・右寄せから選択出来ます。ちなみに、下の画像の黄色い部分はカラムです。カラム内での配置となります。
centering

すき間

sukima

すき間とは線上下の余白です。上の画像で説明すると、白い上下の余白がすき間です。もちろんですが、すき間0に設定すると、画像の「すきま0」の様に、上下に白い余白はなくなります。

スライダーでの設定の場合は、最小値は2になります。ので、完全にすき間を無くしたい場合は、手入力で0を入れます。

ちなみに、このすき間はパディングでも再現する事が出来ます。

sukima2

パディングでもろもろ整えている場合は、すき間0にしてパディングで調整するのが良いかと思います。過去に・・・「あれ?なんでここにすき間が出来るんだ?マージンもパディングも0設定なのに・・・」と原因に気付くまで時間を無駄にした事があったので。。。

区切り線ウィジェット活用例

区切る事に長けているウィジェエットだけあって、色々な区切り方が出来ます。もうこれはアイデア次第!

sample① 上下はさみ

line_sample

おじさん
おじさん
なんか技の名前みたいだな・・・

区切り線で見出しを挟んであげるだけで、なんかちゃんと見出しでしょ(語彙力・・・)カラムのボーダーでやっても良いのですが、幅のサイズや線の種類を上下で変えるのはボーダーでは出来ないので、区切り線を使うと便利です。

 

sample② カラムボーダーとちょびっと区切り

line_sample2

区切り線をワンポイント装飾として使う例です。これを区切り線使わないでやろうとすると以外と面倒なんですよね。画像で代用したり、見出しで<br>(改行タグ)を使ったり。でも区切り線なら、すすっと簡単にワンポイント入れる事が出来ます。ちなみに上の画像の枠線はカラムのボーダーを使ってます。コーナーの見出しなどに使えるかと。

 

スペーサーウィジェット

(区切り線ウィジェットの詳細についてはスペーサーと同じなので、この後まとめて説明します)

スペーサーとは?ウィジェットの間隔調整に使ったり、カラムの仮ウィジェットに使ったりと何かと便利です。

コンテンツ

スペーサーウィジェットには当たり前ですが・・・設定可能な項目として「スペース」しかありません(ぼそっ)

spacer_contents

下の画像は実際にスペーサーウィジェットを見出しとテキストウィジェットの間に入れたサンプルです。

spacersample

薄く水色の線がスペーサーです。スペースの設定値はスライダーでの設定の場合「10〜600」です。手入力ではいくらでも入ります。

スペーサーの有効活用例

column_bg

上の画像は空っぽのカラムに背景を設定しているのですが、背景がプレビューで反映されません。そんな時にスペーサーを入れてあげる事で背景が適応されます。

column_bg2

おじさん
おじさん
ほかには?

ないです。

おじさん
おじさん