WordPressのブロックエディタ拡張：Getwidについて解説(2)Section

タナビーの高梨です。

今回はGetwidのSectionブロックに関する設定を解説していきます。

全般設定についてはこちらをご覧ください。

Sectionブロック概要

Sectionブロックとは、公式ページの引用では、

あらゆるタイプのカスタムページセクションレイアウトを構築（配置の設定、ビデオ、スライダー、画像背景の仕様、前景の変更、アニメーションの適用、色や形状の変更など）

公式ページ（翻訳 by DeepL先生）

だそうです。

何だかよく分かりませんね。

が、Snowmonkeyのセクションと似たようなものです。

正直言ってSnowmonkeyの方が使い勝手が良い気がします。

ただ、アニメーション効果や上下仕切り設定はGetwidの方がめちゃめちゃ豊富です。

それでは設定を見ていきましょう。

ブロックの設定

ブロック設定はタブが３つあります。

それぞれ解説していきます。

Generalタブ

contents area width

Default、Full width、Custom widthのうちいずれかを選択します。

Default：セクションの横幅が、こちらで解説した全般設定のAppearanceでSection Content Widthに設定したサイズになります。

Full width ：セクションの横幅が、親要素のいっぱいいっぱいになります。

Custom width：横幅をpx単位で設定できます。

height

heightはPC、tablet、mobileのタブに分かれていて、それぞれで設定できます。

PC：高さをpx単位で設定できます。具体的には、min-heightが設定されます。

tablet：reset height on tabletにチェックを入れると、divのclassに「getwid-reset-min-height-tablet」が設定されます。が、テーマを自作する場合はこの「getwid-reset-min-height-tablet」をCSSに記述する必要がありそうです。Getwidの関連テーマを使えば、考慮されたCSSが提供されているのかもしれません。

mobile：reset height on mobileにチェックを入れると、divのclassに「getwid-reset-min-height-mobile」が設定されます。これもtabletと同様、CSSに記述する必要がありそうです。

Vertical space between blocks：「Default」、「Small」、「Medium]、「Normal」、「Large」、「Huge」、「None」から選択します。ブロック内に配置されるブロックの縦方向の間隔を設定します。

Content Area Horizontal Alignment：「Left」、「Center」、「Right」から選択します。ブロック内に配置されるブロックの横位置を設定します。具体的には、それぞれ、justify-contentがそれぞれ「flex-start」、「center」、「flex-end」に設定されます。

Styleタブ

Background

背景の設定です。タブになっています。

Colorタブ：背景色を選択します。

Imageタブ：背景にする画像を選択します。画像を設定すると、「Background Setting」という項目が出てきて、さらに「Position」「Attachment」「Repeat」「Size」を設定できるようになります。それぞれ、CSSの「background-position」、「background-attachment」、「background-repeat」、「background-size」に対応しています。それぞれの内容についてはここでは記載しませんので必要ならググってみてください。

Gradientタブ：背景をグラデーションに設定できます。色は5色からしか選べないようです。グラデーションのタイプは線形と放射系を選択できます。また、グラデーションの方向角度を設定できます。

Sliderタブ：背景を複数画像のスライダーに設定できます。スライド効果はスライドとフェードから選択できます。「Animation Duration」で、画像が入れ替わる効果の継続時間をミリ秒で設定します。「Animation Speed」で画像が入れ替わる間隔をミリ秒で設定します。つまり、Animation Speedで設定した時間画像が表示されると、「Animation Duration」で設定された時間をかけて画像が切り替わります。

Videoタブ：背景をsourceの選択でメディアライブラリに保存されている動画か、Youtubeから設定できます。Youtubeの場合は、さらにURLを設定します。URLを設定すると、さらに「Video Scale」、「Mute」、「Repeat」、「Autoplay」、「Control Position」を設定できます。それぞれ以下の通りです。

Video Scale：Default、Low、Midium、High、Hugeから選択します。それぞれ画像の大きさで、Dfault→Hugeの順に大きくなります。表示サイズは同じなので、大きくなればなるほどズームアップして見切れが大きくなります。

Mute：チェックを入れると音声がミュートされます。

Repeat：チェックを入れると、動画が最後まで再生された時に、また最初から再生しなおします。

Autoplay：チェックを入れると、ページが表示された時に自動で再生が始まります。チェックを入れないと、再生させるために再生ボタンを押す必要があります。

Control Position：小さい再生ボタンとミュートボタンを表示する位置を「None(表示しない)」、「Top Left(左上)」、「Top Right(右上)」、「Bottom Left(左下)」、「Bottom Right(右下)」、「Center(真ん中)」から選択します。

Overlay

Overlay Layer Opacity：エリア全体に、下記で示す「塗りつぶし」か「画像」か「グラデーション」のオーバーレイをかけられるのですが、その透過率をスライダーか直接数値入力で設定します。0が完全に透過、100が透過率ゼロ。

Blend Mode：オーバーレイをかける効果を設定します。styleのmix-blend-modeに設定する値を選択します。「None(mix-blend-modeを設定しない)」、「Normal」、「Multiply」、「Screen」、「Overlay」、「Darken」、「Lighten」、「Color Dodge」、「Color Burn」、「Hard Light」、「Soft Light」、「Difference」、「Exclusion」、「Hue」、「Saturation」、「Color」、「Luminosity」から選択します。それぞれの効果の詳細についてはCSSのmix-blend-modeを解説したページを検索してみてください。下記にある画像にオレンジの塗りつぶしを50%透過でかけたものを貼り付けておきますので、イメージはこちらを参照してください。

Overlay type(Colorタブ)：Overlay colorパレットから、前面に配置する色を選択します。「カステムカラー」でカラーピッカーから選択、またはRGB16進法で設定できます。

Overlay type(Imageタブ)：前面に配置する画像をアップロードまたはライブラリから選択します。画像を選択すると、「Position」「Attachment」「Repeat」「Size」を選択できるようになります。内部的にはDivにbackground-imageを設定した形になっており、それぞれCSSの「background-position」「background-attachment」「background-repeat」「background-size」を設定します。CSSの設定についてはここでは解説しませんので、必要であればググッてください。

Overlay type(Gradient)：前面に配置するグラデーションを選択します。5色からしか選択できないようです。 グラデーションのタイプは線形と放射系を選択できます。また、グラデーションの方向角度を設定できます。

Padding

Desktop、Tablet、Mobileについて、それぞれタブで選んでパディングを設定します。

Padding Top：padding-topを「Default」、「Small」、「Medium」、「Large」、「Custom」、「None」から選択します。Customを選択した場合は、さらに数値入力し、単位を「px」「em」「%」「vh」「vw」から選択します。鍵マークをチェックすると、以降のPadding Bottom、Padding Left、Padding Rightが無効となり、Padding Topで設定した内容がpadding(上下左右)として適用されます。

Pdding Bottom：padding-bottomの設定です。選択肢はPadding Topと同じです。

Padding Left：padding-leftの設定です。選択肢はPadding Topと同じです。

Padding Right：padding-leftの設定です。選択肢はPadding Topと同じです。

Margin

Desktop、Tablet、Mobileについて、それぞれタブで選んでマージンを設定します 。

Margin Top：margin-topを「Default」、「Small」、「Medium」、「Large」、「Custom」、「None」から選択します。Customを選択した場合は、さらに数値入力し、単位を「px」「em」「%」「vh」「vw」から選択します。鍵マークをチェックすると、以降のMargin Bottom、Margin Left、Margin Rightが無効となり、Margin Topで設定した内容がmargin(上下左右)として適用されます。

Margin Bottom：margin-bottomの設定です。選択肢はMargin Topと同じです。

Margin Left：margin-leftの設定です。選択肢はMargin Topと同じです。

Margin Right：margin-leftの設定です。選択肢はMargin Topと同じです。

Advancedタブ

Entrance Animation

表示開始時のアニメーションに関する設定を行います。

Animation Effect：アニメ効果。選択がめちゃめち豊富です。「Bounce in」「Bounce in Down」、「Bounce in Down Short」「Bounce in Left」「Bounce in Left Short」「Bounce in Right」「Bounce in Right Short」「Bounce in Up」「Bounce in Up Short」「Fade in」「Fade in Down」「Fade in Down Short」「Fade in Down Big」「Fade in Left」「Fade in Left Short」「Fade in Left Big」「Fade in Right」「Fade in Right Short」「Fade in Right Big」「Fade in Up」「Fade in Up Short」「Fade in Up Big」「Fade in X」「Fade in Y」「Light Speed in」「Light Speed in Short」「Rotate in」「Rotate in Down Left」「Rotate in Down Right」「Rotate in Up Left」「Rotate in Up Right」「Zoom in」「Zoom in Down」「Zoom in Left」「Zoom in Right」「Zoom in Up」「Slide in Down」「Slide in Down Short」「Slide in Left」「Slide in Left Short」「Slide in Right」「Slide in Right Short」「Slide in Up」「Slide in Up Short」「Roll in」「Bounce」「Flash」「Pulse」「Rubber Band」「Shake」「Head Shake」「Swing」「Tada」「Wobble」「Jello」「Jack in The Box」から選択します。

Duration：アニメ効果をどのくらいかけて完了させるか。「Slow」「Normal」「Fast」「Very Fast」から選択します。

Delay, ms：アニメ効果が開始されるまでの時間をミリ秒で設定します。

Dividers

Top Divider：上部の仕切りパターンを設定します。「None」「Tilt」「Tilt Negative」「Tilt Layered1」「Tilt Layered2」「Tilt Layered3」「Split」「Split Negative」「Clouds」「Clouds Negative」「Book」「Book Negative」「Arrow」「Arrow Negative」「Triangle Rounded」「Triangle Rounded Negative」「Triangle Rounded Asymmetrical」「Triangle Rounded Asymmetrical Negative」「Triangle」「Triangle Negative」「Triangle Asymmetrical」「Triangle Asymmetrical Negative」「Triangle Layered Asymmetrical」「Wave」「Waves Light」「Waves Large」「Waves Large Negative」「Waves Layered」「Waves Multi-Layered」「Waves Pattern」「Drips」「Drips Negative」「Drops」「Drops Negative」「Tilted Drips」「Tilted Drips Negative」「Pyramids」「Pyramids Negative」「Pyramids Rounded」「Pyramids Rounded Negative」「Pyramids Layered」「Curve」「Curve Negative」「Curve1」「Curve2」「Curve3」「Curve4」「Curve5」「Curve6」「Curve7」「Curve8」「Curve Layered1」「Curve Layered2」「Curve Layered3」「Curve Layered4」「Zigzag」「Zigzag Negative」「Zigzag Pattern」から選択します。

Top Divider Height：上部仕切りの幅を設定します。単位は「px」「vh」「vw」から選べます。

Bottom Divider：下部の仕切りパターンを設定します。選択肢はTop Dividerと同じです。

Bottom Divider Height：下部仕切りの幅を設定します。単位は「px」「vh」「vw」から選べます。

Bring dividers top：仕切りの外側が見切れるようになります。文章では表現しにくいので、下記のサンプルを参照してください。

Top Divider Color：上部仕切りの色を設定します。カラーパレットから選択するか、「カスタムカラー」をクリックするとカラーピッカーまたは16進数で設定できます。

Bottom Divider Color：下部仕切りの色を設定します。内容はTop Divider Colorと同じです。

分かりにくいと思いますので、下記にサンプルを記載します。全てDivider Heightを上下とも25px、Top Divider Colorをオレンジ、Bottom Divider Colorを黒に設定しています。

まとめとおまけ

設定個所としては以上です。

あと、セクションを指定した状態で、上下左右のライン上にマウスを持っていくと、ドラッグでパディングとマージンを設定できます。