【Gutenberg】SWELLテーマで使える専用ブロック機能について

【Gutenberg】SWELLテーマで使える専用ブロック機能について
記事上のウィジェットエリア

WordPress5から搭載されたブロックエディター(Gutenberg)で使用できる、SWELLだけのオリジナル機能をご紹介します。

なにかと敬遠されるブロックエディターですが、実はちゃんとカスタマイズしてあげるとかなり使いやすいエディターとなります。

SWELLでは、特にその魅力を感じれることでしょう。

目次前広告表示エリア
目次

SWELLオリジナルブロック

まずは、SWELLだけのオリジナルブロックについてご紹介します。

ブロックの追加ボタンを押すと、「SWELLブロック」という項目があり、その中にあるブロックは全て、SWELLだけで使えるオリジナルブロックです。

画像
SWELLブロック

装飾ブロック

SWELL専用の「装飾ブロック」は、デザインとレイアウトが豊富に用意されたブロックです。

レイアウト設定は、エディターの右側パネルの下のほうにある以下の部分で設定できます。

ブロックレイアウト

「装飾ブロック」はさらに、ブロックを入れ子構造にできる機能を持っています!

現在、装飾ブロック実際に活用する動画を準備中です…

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

これのことです

このような、上部にキャプションのついたブロックを簡単に作成できるブロックとなります。

関連記事ブロック

内部リンク用に関連記事をブログカードとして表示させるためのブロックです。

ブログカードの機能自体はショートコードによるものですが、関連記事ブロックではショートコードを入力することなくブロクカードを使用できるようにしています。

内部リンクだけでなく、外部サイトへのリンクもブログカード化できるようになりました。

ふきだしブロック

了

こういう「ふきだし」が簡単に使用できます!

あわせて読みたい
SWELLのふきだしブロックの使い方
SWELLのふきだしブロックの使い方ver.1.1.4のアップデートに伴い実装された「ふきだしブロック」の使い方をご説明していきます。ふきだしブロックを使うことで、ショートコードを使用せず、実際の表示を...

ボタンブロック

フルワイドブロック

あわせて読みたい
【SWELL専用ブロック】フルワイドブロックの使い方
【SWELL専用ブロック】フルワイドブロックの使い方このページでは、WordPressテーマ『SWELL』で使える専用ブロック、「フルワイドブロック」の使い方を解説していきます。「フルワイドブロック」を使用すると、例えば次...

広告タグブロック

あわせて読みたい
広告タグ管理機能・広告タグブロックの使い方
広告タグ管理機能・広告タグブロックの使い方ここでは、WordPressテーマ「SWELL」での広告管理機能および広告タグブロックの使い方を説明していきます。【広告タグの管理方法】SWELL ver.1.2.0より、管理メニューに...

ブログパーツブロック

あわせて読みたい
登録したコンテンツを自由に呼び出せる「ブログパーツ」機能
登録したコンテンツを自由に呼び出せる「ブログパーツ」機能ここでは、WordPressテーマ「SWELL」で使用可能な「ブログパーツ」機能について解説していきます。SWELLでは「ブログパーツ」として登録したコンテンツを、ショートコー...

FAQブロック

あわせて読みたい
Q&Aが簡単に設置できる!「FAQブロック」の使い方
Q&Aが簡単に設置できる!「FAQブロック」の使い方このページでは、WordPressテーマ『SWELL』で利用可能なGutenberg用ブロック、「FAQブロック」の使い方を解説していきます。「FAQブロック」を使用すると、「よくある質...

標準ブロックの拡張機能

段落ブロック

多様なデザイン装飾と、レイアウトの設定を可能にしています。

あわせて読みたい
エディターで使える簡単デザイン! – 装飾ボックス編
エディターで使える簡単デザイン! – 装飾ボックス編この記事では、SWELLのエディターで使用できるデザイン実装機能について解説していきます。今回はその中でも「装飾ボックス」機能に焦点を当てて解説していきます。クラ...

レイアウト設定は、エディターの右側パネルの下のほうにある以下の部分で設定できます。

ブロックレイアウト

リストブロック

リストブロックについても、デザイン装飾を可能にしています。

あわせて読みたい
エディターで使える簡単デザイン! – リスト装飾編
エディターで使える簡単デザイン! – リスト装飾編この記事では、SWELLのエディタで使用できるデザイン実装機能について解説していきます。今回はその中でも「リスト装飾」に焦点を当てて解説していきます。クラシックエ...

テーブルブロック

ver.1.2.6より、「テーブルブロック」にも専用の設定項目を追加しました。

テーブルの設定
テーブルの設定

1列目のtdをth風にする

SWELLでは、thタグを利用すると背景がグレーで太字になるようにしていますが、ブロックエディターからthタグに変換することができません。

そこで、tdタグのまま見た目だけCSSでthタグ風にカスタマイズする方向で対応してみました。

各列で最低限維持する幅

テーブルは、どこかの列の中身の文章がとても長いとその他の列の横幅が狭くなってしまいます。
その現象を簡単に防ぐことができる設定です。

スマホで見た時のレイアウト

スマホで表示する際、テーブルの内容を綺麗に表示するのは非常に難しいです。
そこで、「表としての見た目を組み替えて縦並びに表示させる」か「PC表示と同じ横幅を維持したままスクロール可能な状態で表示する」かを選択できるようにしました。

テーブル設定を活用する様子

テーブル設定で最低限の幅を維持する様子
スマホの表示設定を利用する様子

カラムブロック

カラムブロックでは、スタイルやスマホでの列数の設定ができるようになっています。

カラムブロックの設定パネル
カラムブロックの設定パネル

詳しくは以下のページをご覧ください。

あわせて読みたい
エディターで使える簡単デザイン! – カラムブロックの使い方
エディターで使える簡単デザイン! – カラムブロックの使い方ここでは、SWELLのエディター簡単にで使用できるデザイン装飾機能の一つ、「カラムブロック」について解説していきます。クラシックエディター・ブロックエディターのど...
記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次