WordPressのブロックエディタ拡張:Getwidについて解説(34)Content Timeline

タナビーの高梨です。

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

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

Content Timeline概要

Content Timelineとは、公式ページからの引用では、

見出し、小見出し、画像などのコンテナを使って、任意のイベントの時系列をスタイリッシュなタイムライングラフで表示することができます

公式ページ(翻訳 by DeepL先生)

だそうです。

名前からしてタイムラインを表示できるブロックのようです。

実際にはこんな感じです。

最初に設定をしてください。
その後、いろいろやってください。

設定開始

最初に設定を始めてください

最初に設定をしてください。
その後、いろいろやってください。

最後はクロージングです。
お疲れさまでした。

クロージング

最後にクロージングをして締めましょう。

最後はクロージングです。
お疲れさまでした。

どういった設定があるのでしょうか。

さっそく、見ていきましょう!

ブロック設定

ブロック設定は2種類あります。ブロック全体の設定と、個々のタイムラインの設定です。後者は上記例でいうと、「設定開始」とか「クロージング」のかたまりのことです。それぞれ、Content TimelineとTimeline Blockと称されているようです。

ブロック全体の設定

Block Animation:タイムラインブロックの表示のされ方にアニメーションを付けられます。「None(アニメ無し)」「Slide In(両サイドから現れる)」「Slide Up(下からニュルっと現れる)」「Fade in(その場でモヤっと現れる)」

BackgroundColor:見出しがあるエリアの背景色を設定します。パレットから選択、または 「カステムカラー」でカラーピッカーから選択、またはRGB16進法で設定できます。

Progress Color:真ん中の動く線の色を設定します。パレットから選択、または 「カステムカラー」でカラーピッカーから選択、またはRGB16進法で設定できます。

Horizontal Space:各要素と真ん中の線との間隔を数値で設定します。単位は「px」「em」「%」「vh」「vw」から選択できます。

Vertical Space:タイムラインブロックの間隔(縦間隔)を数値で設定します。単位は「px」「em」「%」「vh」「vw」から選択できます。

Padding Top:見出しやテキストが表示されるエリアのpadding-top(上の余白)を数値で設定します。単位は「px」「em」「%」「vh」「vw」から選択できます。鍵マークをチェックすると、以下のPadding Bottom、Padding Left、Padding Rightの設定ができなくなり、ここで設定した値が全てに適用されます。

Padding Bottom:見出しやテキストが表示されるエリアのpadding-bottom(下の余白)を数値で設定します。単位は「px」「em」「%」「vh」「vw」から選択できます。

Padding Left:見出しやテキストが表示されるエリアのpadding-left(左の余白)を数値で設定します。単位は「px」「em」「%」「vh」「vw」から選択できます。

Padding Right:見出しやテキストが表示されるエリアのpadding-right(右の余白)を数値で設定します。単位は「px」「em」「%」「vh」「vw」から選択できます。

タイムラインブロック設定

Image:表示する画像を選択します。

Image Size:画像のサイズを選択します。

Alignment:画像が表示される位置を「Auto」「Left」「Right」から選択します。「Auto」の場合は、奇数番目は左、偶数番目は右になるようです。

まとめ

設定個所は以上です。

何か時系列に進行する様子を表示したい時に効果的ですね。