ホーム > ブログ > WordPress > WordPressプラグイン > [Stackable]Gutenbergエディタに便利なブロックを簡単に追加する方法【記事作成効率大幅アップ】

[Stackable]Gutenbergエディタに便利なブロックを簡単に追加する方法【記事作成効率大幅アップ】

この記事は約 16 分で読めます。

StackableはWordPressの新エディタGutenbergには用意されていない便利で使い勝手のよい独自のブロックを追加してくれるプラグインです。

Stackableを導入するメリットについてまとめると以下のようになります。

  • 20個以上の便利なブロックが無料で簡単に使える
  • ビジュアルエディタ上で直感的な操作で設定可能&カスタム自由度が高い
  • 全てのブロックがレスポンシブ対応

Gutenbergには元々用意されている様々なブロックがあるため、普通にブログ記事を書く程度ならそれほど困ることはありませんが、少し凝ったレイアウトを作成したり、自由度の高いページ編集を行いたい時に少し物足りなさを感じることがあります。

管理画面上のビジュアルエディタで確認しながら簡単にレイアウトを作成できて、再現性が高く流用可能なブロックとして作成できれば最高ですよね。

今回はそんな便利なブロックの使い方を可能にする、Gutenbergエディタに対応した「Stackable – Gutenberg Blocks」プラグインを紹介します。

Stackable – Gutenberg Blocksのインストール

◆Stackable
https://wpstackable.com/
ちなみに公式サイトは全てGutenberg+Stackableで作られているらしいです。

公式のプラグイン配布サイトはこちらになります。
https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/
星4.9の評価が付いてますね。

プラグイン新規追加ページの右上の検索窓に「Stackable」と入力すると、「Stackable – Gutenberg Blocks」が表示されますのでこちらをインストールして有効化してください。

有効化すると以下のような認証画面が表示されますが、アカウント登録は任意なので一旦右側の「Skip」を選択しておきましょう。

ちなみに「Allow&Continue」を選択するとWordPressに登録している管理ユーザー宛にアカウント登録の認証メールが飛びます。
有料プランにアップグレードする際はこのアカウント登録が必要になります。

なお、筆者の場合は検証を行うためにアカウント登録を行いました。

設定が完了すると、管理画面サイドバーの設定メニューの下辺りにStackableが表示されます。

筆者のケースではアカウント登録を行ったので、Account項目が表示されています。
なおアカウントは登録後にメールアドレスなど一部を編集したり、登録自体を削除することもできます。

StackableのSkipもしくはアカウント登録を経て、プラグインの有効化が完了すると、記事作成画面でStackableのブロックを利用できるようになります。

Stackableの機能・使い方

下の図1はStackable設定画面のホームです。

図1:Stackable設定画面
図1:Stackable設定画面

普通に使用する分には特にここで設定を行うべき重要な項目はありません。

必要に応じて各ブロックのON/OFFを設定できたり、各ブロックの説明とデモ画面へのリンクが貼ってある程度です。

基本無料で使えるプラグインですが、有料パッケージとして$29(1サイト限定)、$99(ライセンス無制限)の上位版が用意されており、その案内なども掲載されています。

◆Stackable Premium Plans(有料版の価格表)
https://wpstackable.com/pricing/

ざっと見た感じですが、無料版と有料版の主な違いは選択できる「レイアウトパターン」「エフェクトパターン」の数にあるようです。
有料版だと調整項目のバリエーションが豊富でより細かい調整が可能になる、という感じです。

しかしながら無料版でもそれなりに高機能である印象を受けました。

では実際に投稿記事内でStackableブロック使う前にどのような機能が搭載されているのか簡単に見ていきましょう。

Stackableブロックの機能紹介

ここではStackableで利用できる便利なブロックとその機能について簡単に紹介します。

下記の有料版の管理画面デモは実際のWordPress管理画面上でStackableの各ブロックを操作することが可能です。

◆Stackable Premium Demo(有料版の管理画面デモ ※英語)
https://demo.wpstackable.com/blog-posts/

無料版と有料版では設定項目が多少異なりますが、基本的な操作性は同じです。

この後解説する各ブロックについて流し読みした後、管理画面のデモをさわってみるとよりイメージがしやすいかもしれません。

それでは各ブロックについて解説していきます。


Accordion

アコーディオンを設置できるブロックです。

公式のデモはこちらです。
https://wpstackable.com/accordion-block/

以下実際の設置例です。

ブロック要素の体裁はサイドバーの設定項目からある程度調整可能ですが、設定項目にない箇所はCSSクラス名を参照して個別に調整する必要があります。(以降のブロック要素も同様)

色や角丸などの基本的な体裁はどのブロックでも調整可能となっています。

設置例はデフォルトから変更していませんが、ブロック内の見出しに使われているhタグについては、テーマのCSSに依存する形になります。

アコーディオンは最初から開いた状態で表示させることも可能となっています。


Blockquote

引用囲みを埋め込めるブロックです。
あまり使用する機会はなさそうです。

公式のデモはこちらです。
https://wpstackable.com/blockquote-block/


Blog Posts

ブログ投稿記事を埋め込めるブロックです。

公式のデモはこちらです。
https://wpstackable.com/blog-posts-block/

以下は設置例のキャプチャ画像です。

図2:Blog Post(リスト形式)
図2:Blog Post(リスト形式)

サイドバーの設定項目から「グリッド or リスト形式」「掲載件数」「表示要素のON/OFF」など細かな調整が可能ですが、より詳細な調整を行うにはやはりCSSクラス名を参照して個別調整を行う必要があります。


Button

ボタンを設置できるブロックです。

公式のデモはこちらです。
https://wpstackable.com/button-block/

以下実際の設置例です。

「形状」「大きさ」「塗り」「角丸」「アイコン」など細かな調整が可能です。
アイコンに関しては特殊なものが多くあまり使えそうなものが少ないですね・・・。
投稿記事内で気軽にボタンを設置する分には使いやすいかもしれませんね。


Call to Action

タイトル、説明文、ボタンがセットになったブロックです。

公式のデモはこちらです。
https://wpstackable.com/call-to-action-block/

以下実際の設置例です。

Title for This Block

Description for this block. Use this space for describing your block. Any text will do.

ボックスの形状や背景色・背景画像の有無、内部のテキストやボタンの調整など、細かな調整が可能です。

ボックス内に配置できる要素はプリセットされた「タイトル」「説明文」「ボタン」のみで自由に要素を追加することはできませんが、個別CSSでの調整と組みわせると比較的自由度の高い表現ができそうです。

ちなみに無料版の場合は基本レイアウトは2種類ですが、有料版の場合は6種類のレイアウトが用意されていたりします。


Card

画像、タイトル、説明文、ボタンがセットになったブロックです。

公式のデモはこちらです。
https://wpstackable.com/card-block/

以下実際の設置例です。
画像有り無しの2パターンを設置しました。

Title for This Block

Subtitle for this block

Description for this block. Use this space for describing your block. Any text will do.

Title for This Block

Subtitle for this block

Description for this block. Use this space for describing your block. Any text will do.

こちらも配置要素はプリセットされた要素に準ずる形になりますが、個別CSSでの調整と組みわせるとかなり自由度の高い表現ができそうです。

Cardブロック単体でカラム設定ができる項目がなかったため、カラム分けに関してはGutenbergのカラムブロックを利用しています。


Container

あらゆる要素を内包可能なコンテナブロックです。

公式のデモはこちらです。
https://wpstackable.com/container-block/

以下実際の設置例です。

Title for This Block

Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block. Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.

前述の「Call to Action」や「Card」ブロックと異なる点はプリセットされた要素以外にもブロック内に自由にブロック要素の編集・追加が行えることです。

カスタム性が高く汎用性が高い使い方ができそうですね。


Count Up

数値がカウントアップするアニーメーション付のブロックです。
価格表などに使う感じでしょうか。

公式のデモはこちらです。
https://wpstackable.com/count-up-block/

以下実際の設置例です。

タイトル

$99.99

Description

タイトル

1,234

Description

タイトル

1,234.56

Description

グラフにも応用できるようなアニメーション付の棒グラフとかの機能があれば面白そうですが、あまり使うことはなさそうなブロックですね。


Divider

区切り線です。
調整項目から色を自由に調整できますが、ドットや破線にはできないようです。

Gutenbergにも区切り線のブロックは用意されていますが、こちらの場合はドットや破線に対応していますが色は調整できません。。。


Expand / Show More

短い文章と長い文章を切り替えるブロックです。

公式のデモはこちらです。
https://wpstackable.com/expand-block/

以下実際の設置例です。(続きを表示するをクリック)

文章のみしか入れることができません。
アニメーションの調整もできないようです。
もう少しカスタム自由度が高ければ・・・という感じですかね。


Feature Grid

画像、タイトル、説明文、ボタンがセットになったブロックです。

公式のデモはこちらです。
https://wpstackable.com/feature-grid-block/

以下実際の設置例です。

タイトル
タイトル

Description for this block. You can use this space for describing your block.

タイトル
タイトル

Description for this block. You can use this space for describing your block.

Cardブロックと似ていますが、こちらは設定項目内でカラム数の調整ができるほか、多くの項目が調整可能となっており、Cardブロックよりも使いやすい印象です。
但し背景画像を上部に隙間なく敷き詰めたい場合はCardブロックを使う必要がありそうです。

配置要素についてはプリセットされた要素に準ずる形になります。


Feature

画像、タイトル、説明文、ボタンがセットになったブロックです。
上述のFeature Gridの横向きverです。

公式のデモはこちらです。
https://wpstackable.com/feature-block/

以下実際の設置例です。
画像の配置は左右選べます。

Title for This Block

Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.

Title for This Block

Stackableのブロック全般に言えることですが、プリセットされた見出し要素の見出しレベル(h2~h5)は変更できないようです。

ちなみにFeature Gridの見出しレベルはh5でしたが、Featureの見出しレベルはh2となっていました。


Header

ヘッダーバナーを設置するためのブロックです。
要素としてはCall to Actionブロックとほぼ同じような形式になります。

公式のデモはこちらです。
https://wpstackable.com/header-block/


Icon List

リストの先頭にアイコンを設定できるアイコンリストのブロックです。

公式のデモはこちらです。
https://wpstackable.com/icon-list-block/

以下実際の設置例です。

  • 3カラムのリスト
  • 3カラムのリスト
  • 3カラムのリスト
  • 2カラムのリスト
  • 2カラムのリスト
  • 2カラムのリスト
  • 1カラム縦並びのリスト
  • 1カラム縦並びのリスト
  • 1カラム縦並びのリスト

デフォルトで用意されているアイコンの形状は5種類(✔/+/>/×/★)で線と塗りのタイプは3種類(アイコンのみ/塗り+白抜き/アウトライン)となっています。

もう少しアイコンのバリエーションが豊富であれば・・・という感じですね。


Image Box

リンクカード風の画像ブロックです。
ホバーで詳細情報を表示できます。

公式のデモはこちらです。
https://wpstackable.com/image-box-block/

以下実際の設置例です。

タイトル

Description

タイトル

Description

タイトル

Description

オーバーレイの色やホバー時のアニメーションなど、調整項目はそこそこ充実しているので使いやすいブロックですね。


Notification

告知や通知文を表示するブロックです。

公式のデモはこちらです。
https://wpstackable.com/notification-block/

以下実際の設置例です。

Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block. Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.

何てことはない普通の囲みブロックですが、×でブロックを非表示にすることができるオプションが用意されています。(一度×をクリックして消してしまうと、リロードしてもブロックは再表示されません・・・)

イレギュラーなお知らせや注意喚起の際に使用するイメージでしょうか。
とはいえ、使う機会は少なそうです。


Number Box

Cardブロックに数字が付いた感じのブロックです。

公式のデモはこちらです。
https://wpstackable.com/number-box-block/

以下実際の設置例です。

01

タイトル

Description for this block.

02

タイトル

Description for this block.

03

タイトル

Description for this block.

どちらかというとFeature Gridの画像部分が数字に変わって、ボタンを無くしたverとも言うべきでしょうか。

丸の中のテキストは編集自由なので数字以外を入れることも可能です。
カラム分割の上限は3つまでなので、6Stepとかにする場合は3カラムのブロックを縦に2つ並べて、丸の中の数字を編集することで対応可能となっています。

このブロック必要?っていう気もしなくはないですね。(笑)


Pricing Box

価格表を掲載するためのブロックです。

以下実際の設置例です。

タイトル

$9.00

Description

Description for this block.

タイトル

$29.00

Description

Description for this block.

タイトル

$39.00

Description

Description for this block.

海外サービスの料金表はこのパターンが多いですね。

業種によってはそれなりに使い道はありそうです。
タイトル上に画像を入れることもできますが、何故かここの画像だけレスポンシブ対応していなかったので、入れていません。。。


Separator(区切り)

セクション間を区切るブロックです。
斜線や波線など種類は豊富です。

公式のデモはこちらです。
https://wpstackable.com/separator-block/

無駄にと言っては失礼ですが、設定項目のバリエーションが豊富でした。(笑)
セクション間を区切るアクセントとしては面白いかもしれませんね。

実際の例は上記のデモページから見てください。


Spacer(スペーサー)

余白を設けるためのブロックです。
Gutenbergでも同様のブロックが用意されているため、使う機会はないかと思います。


Team Member

チームメンバーを紹介するのに適したブロックです。

公式のデモはこちらです。
https://wpstackable.com/team-member-block/

以下実際の設置例です。

Name

Position

Description for this block.

Name

Position

Description for this block.

Name

Position

Description for this block.

こちらはダミーのプロフィール画像をセットしています。

基本的にはここまで紹介した他のブロックと似た感じはありますが、プリセット要素がチームメンバー紹介向けにアレンジされている形ですね。

お手軽に利用できる、という点で見れば使い道はありそうです。


Testimonial

見慣れない単語ですが「お客様の声」を表示させるためのブロックです。

公式のデモはこちらです。
https://wpstackable.com/testimonial-block/

以下実際の設置例です。

Description for this block. Use this space for describing your block.

Name

Position

Description for this block. Use this space for describing your block.

Name

Position

Team Memberブロックを逆にした感じのブロックです。
あまり使い道はなさそうですが。。。


Video Popup

動画のサムネイルを設定してクリックすると全画面で展開するブロックです。
対応している形式はYouTubeとVimeo。

公式のデモはこちらです。
https://wpstackable.com/video-popup-block/

以下実際の設置例です。(音は出ません)

再生コントロールに関する細かな調整はできませんが、デザイン的な体裁調整は可能となっています。

今後ウェブサイト上で動画を扱う機会が増えるのは間違いないので、使い道はありそうですね。

ちなみにGutenbergで動画を埋め込むと以下のような形式になり、再生コントロールに関する調整ができます。

どちらの埋め込み形式にも一長一短ありますので、両方試してしっくりくる方を選択するのもよいかと思います。

動画素材は無料で商用利用も可能なPexels Videosさんより拝借させていただきました。
ありがとうございました。


冒頭でも述べましたが、改めてStackableを導入するメリットについてまとめます。

  • 20個以上の便利なブロックが無料で簡単に使える
  • ビジュアルエディタ上で直感的な操作で設定可能
  • 全てのブロックがレスポンシブ対応

とにかく「シンプルで使いやすい」の一言に尽きます。

通常のレイアウトやページ作成においては「Gutenberg+Stackable」で十分カバーできる、といった印象ですね。

各ブロックの機能説明は以上になります。

Stackableの使い方

Stackableブロックの使い方は簡単です。

ブロックの追加から「Stackable」を選択して追加したいブロックをクリックして挿入します。

図3:Stackableブロックの追加
図3:Stackableブロックの追加

各ブロックの詳細設定はサイドバー内から調整できます。

実際の操作感は管理画面デモで確かめた方が早いかもしれません。
下記サイトの設定項目表記は全て英語ですが、インストール後は一部日本語で表示されますので特に迷うことはないでしょう。

◆Stackable Premium Demo(有料版の管理画面デモ ※英語)
https://demo.wpstackable.com/blog-posts/

応用編

Stackableブロック単体での使い勝手もそれなりによいのですが、、、Gutenbergの再利用ブロックと組み合わせて利用することでパーツ単位の管理効率が上がります

画像やテキストを入れ替えて作成するような定型ブロックでは特に効果が高いと思います。

例えば以下のブロックを再利用ブロックと上手く組み合わせて準モジュール化しておくと、ページ作成効率が劇的改善されるかもしれませんね。

  • Call to Action
  • Card
  • Container
  • Feature Grid
  • Feature

Gutenberg+Stackable」の組み合わせで実装することで、開発も容易になり、運用する側もより自由度が高いページ作成が行えるようになると思います。

まとめ

今回ご紹介したStackableは、Gutenbergエディタに便利で使い勝手のよい独自のブロックを追加してくれるプラグインでした。

何度も言いますが「シンプルで使いやすい」の一言に尽きますね。

各ブロック要素のデフォルトの余白設計もキレイな方だと思います。

WordPressの新エディタGutenbergにもそろそろ慣れてきて、より便利なブロックエディタを探している人にとってはピッタリかもしれません。

「まだGutenbergに慣れてないよ」という人はまずGutenbergの使い方に慣れましょう。

ここまでポジティブな点ばかりを挙げてきましたが、一応懸念点を挙げるとすると以下になるでしょうか。

  • あくまでプラグインで調整可能な範囲でしか調整できない
  • プラグインで調整できる範囲外の調整をしようとすると大変面倒
  • 他のプラグインと併用する場合に競合が発生しないとも限らない
  • Stackable無料版の提供がなくなった時に困る
  • プラグイン自体のサービス提供が中止されると困る
  • よくも悪くもプラグインに依存することになる

もし制約を受けない自由度の高いデザインやレイアウトを実現したい場合は無理して使うプラグインではありません。

仮に公式サイトのように全ての要素をStackableで作成していて、何らかの理由でStackableが使えなくなった時にサイトが大変なことになりますよね。(笑)

これはStackableに限ったことではありませんが、素晴らしいプラグインに頼るのは良いことだと思います。

但しプラグインが使えなくなる事態も想定して、リスクヘッジを行いつつサイト運用に支障のない範囲で使うのが好ましいですね。

まだまだ現在進行形で進化しているブロックエディタ。
Stackable以外にも多くの素晴らしいプラグインが世に出回っていることでしょう。

ブロックエディタの【決定版】を見つけるべく、今後もブロックエディタ系のプラグイン調査は継続予定です。

よいプラグインを発見したら機を見てまた記事にしたいと思います。

この記事をシェアする
この記事のタイトルとURLをコピーする

この記事を書いた人

永田 健二

石川県金沢市生まれ。大阪育ち。
14年間住んだ東京を離れて、2017年6月より生まれ故郷の金沢に移住。
デザイナー/プログラマーとして数々の制作現場を経て、現在は主にウェブディレクター/マーケティングコンサルタントとして活動中。

ウェブ業界を主戦場にしつつも、北陸地方・石川県の伝統工芸を通じた地方創生や農業をはじめとする第一次産業の新たな価値の創出を目標に掲げて活動しています。
趣味は毎日の食事、地元のスーパー巡り、温泉、ロングウォーキング、ギター。

ご相談・お問い合わせなどありましたら、こちらよりお気軽にお問い合わせください。

関連記事