【SWELL専用】Gutenberg用オリジナルブロックの一覧

2020 2/28

SWELLだけで使えるオリジナルのGutenberg用ブロックをご紹介します。

各ブロックの詳しい使い方は、公式サイトの「エディター機能一覧ページ」にてご覧ください。

目次

関連記事ブロック

内部リンク・外部リンクともにブログカードとして表示できる、非常に便利なブロックです。
下のような表示でリンクを表示できます。

キャプション付きブロック

キャプション付きでコンテンツを表示するためのブロックです。

キャプションブロックはこんな感じ!

ver. 2.0.0 時点では、デザインは6種類から選ぶことができ、さらに、好きなカラーセットを3種類登録して簡単に色をつけることもできます。

タイトルはここにも表示可能

好きなコンテンツをここに表示できます。

カラーセットの例1

好きなコンテンツをここに表示できます。

カラーセットの例2

好きなコンテンツをここに表示できます。

このブロックの詳しい使い方はこちらのページをご覧ください。

ふきだしブロック

了のアイコン画像

このようなふきだしが超簡単に使用できます!

ふきだしの使い方はこちらのページをご覧ください。

また、以下の動画でも簡単に解説していますので、ぜひご視聴ください。

ボタンブロック

つい押したくなるような「ボタン」を設置できるブロックです。

「ノーマル / 立体 / キラッと / アウトライン」の4種類のデザインを選ぶことができ、カスタマイザーからそれぞれの種類別に角丸の大きさを設定することができます。

また、カスタマイザーでは好きなカラーセットを3種類 設定できるようにもなっており、さらにver 2.0.0からは、グラデーションの設定も加えることが可能になりました!

ボタンのサイズについては、ブロックパネルから選択できます!

ボタン内テキストにはアイコン用ショートコードも使用可能です。

FAQブロック

Q&A形式のコンテンツが簡単に設置できるブロックです!

デザインは選べるの?

もちろんです!デザインパターンも複数用意しています!

このブロックはどうやって使うの?

詳しい使い方は、こちらのページをご覧ください!

アコーディオンブロック

開閉可能なコンテンツ、いわゆる「アコーディオンメニュー」も簡単に配置できます。

ステップブロック(タイムライン)

作業フローや契約の流れなどをステップ形式で説明するのに便利なブロックです。

いわゆる「タイムライン」と呼ばれるようなものに近いかもしれません。

STEP
ステップ1だよ

ステップの説明だよ

STEP
ステップ2だよ

さらにステップの説明だよ

STEP
ステップ3だよ

さらにさらに、ステップの説明だよ

ver. 2.0.0 時点で、デザインパターンは3種類用意しており、細部の設定も可能です。

詳しくはこちらのページからご覧ください。

バナーリンクブロック

画像の上に好きなテキストを配置し、全体をリンクにして設置できるブロックです。
バナーリンクを設置したいけど画像の編集は難しくてよくわからない、という人におすすめ。

画像高さや、テキストの配置、カラーオーバーレイの設定、影やブラー効果の追加など、たくさんの設定項目を用意しています。

説明リストブロック

説明リスト(HTMLでいうとdlタグ)を簡単に設置することができるブロックです。

項目A

項目Aの説明をここに表示

項目B

項目Bの説明をここに表示

さらに、横並びでも表示可能です。(グレーの線枠は、後述するグループブロックによる装飾です。)

項目A

項目Aの説明をここに表示

項目B

項目Bの説明をここに表示

装飾ブロック(グループブロック)

現在は、「装飾ブロック」は廃止され、コアブロックの「グループブロック」にその機能を引き継いでいます。

WordPress5.3より前はグループブロックがなかったため、SWELLには「装飾ブロック」という独自のグループブロックを用意していました。

「グループブロック」の中には他のブロックを配置できるだけでなく、「段落ブロック」と同じように簡単にデザインを装飾することができます。

例えば以下のコンテンツに線枠で囲まれたエリアが全て「グループブロック」の中身です。

通常の段落ブロックです

  • リストも配置できます
  • リストも配置できます

どのようなボックス装飾が使用できるかはこちらをご覧ください。

投稿リストブロック

任意の数だけ投稿を呼び出すことができるブロックです。
カテゴリーやタグ・タクソノミーを指定したり、レイアウトの種類、表示する情報を選択することもできます。

除外したい投稿などの設定も行えます。

例:テキスト型で3件の投稿を表示

例:リスト型で2件の投稿を表示

このブロックの詳しい使い方はこちらの解説記事をご覧ください。

フルワイドブロック

コンテンツに背景色や背景画像を設置して、画面幅いっぱいで表示することのできるブロックです。

サイトのトップページや、コーポレートサイトなどで使うと非常に便利です。

フルワイドブロックだよ

背景色をつけたり、画像も設定できます。
上下の余白量や境界線を 斜め にしたり なみなみ にしたりもできます。

サイドバーがある時や、コンテンツの独立設定がある時は、その枠内のサイズに収まります。

フルワイドブロックの詳しい使い方はこちらの解説記事をご覧ください。

その他のブロック

この他にも、まだまだ便利なブロックをご用意させていただいています。

また、今後も新しいブロックを追加していく予定です!

目次
閉じる