TOP

ブログ一覧

【WordPress】デフォルトのブロックだけでフローコンテンツを作る

【WordPress】デフォルトのブロックだけでフローコンテンツを作る

WordPressのデフォルトのブロックだけで、下のようなフローを説明するコンテンツを作ってみました。

作り方

①フロー全体のブロック

まずは縦に並べるので、縦並びブロックを設置します。
設定で配置を「項目を拡張」にし、スタイルでブロックの間隔を0にします。

②フローの項目の作成

次にフローの一つ一つの項目を作っていきます。

まずはカラムブロックを2カラムで設置します。
左が数字、右がコンテンツになります。

親のカラムブロックの設定で「モバイルでは縦に並べる」をOFFにしておきます。

このカラムブロックは右側の幅を数字の円の大きさにします。
左カラムの幅は空欄にします。

また、左カラムの下方向のパディングを設定します。これが次のフローとの間隔になります。

③フロー順の設置

フローの順番を示す数字を設置していきます。
(左カラムのコンテンツは自由にしてもらって大丈夫なので特に解説はありません。)

右カラムに縦積みブロックを設置し、配置を「項目を拡張」、
ブロックの間隔を0、「最小の高さ」を100%にします。

その中に段落ブロックを設置し、フォントサイズを任意の値に設定し、行の高さをフォントサイズと掛け算して、先ほどの右カラムの幅と同じ値になるように設定します。
そしてテキストと背景の色を好きな色に設定して、角丸を50%に設定します。

そして、段落ブロックのパディングを縦横ともに0にします。
(背景色を設定すると、デフォルトのcssでpaddingが設定される)
パディングは「サイズ」の右の3点ボタンから表示させることができます。

最後に段落ブロックのテキストを中央配置にします。

次に段落ブロックの下にグリッドブロックを設置します。
レイアウトは「手動」で2カラムにします。
そしてブロックの間隔を0にして、「高さ」を「fill」にします。

そのグリッドの中に空のグループブロックを2つ設置します。
左のグループブロックは右の枠線、右のグループブロックは左の枠線を、数字の背景色と同じ色、幅1pxで設定します。

一番最後のフローは、このグリッドは削除します。

まとめ

かなり力技ですが、なんとかなりました。
デフォルトのブロックでもここまでできるということが証明できて満足しています。

本来、線を引くためにグループブロックを使うんじゃないとかいうツッコミがありそうですが、まあ、こういうこともできるんだということで。