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

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

※本記事は一部箇所を除いて2019年6月時点の内容となっています。

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

Stackableの機能・使い方

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

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

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

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

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

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

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

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

Stackableブロックの機能紹介

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

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

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

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

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

---

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

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

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

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

---

---

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

---

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

---

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

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

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

---

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

---

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

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

---

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

---

---

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

---

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

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

---

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

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

---

---

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

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

---

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

---

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

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

---

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

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

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

---

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

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

---

---

---

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

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

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

---

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

---

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

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

---

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

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

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

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

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

Stackableの使い方

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

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

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

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

応用編

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

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

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

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

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

まとめ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• WordPressに関連する記事一覧を見る

弊社では、企業サイトや採用サイトの制作、WordPress構築、shopifyを活用したECサイト構築を得意としています。ホームページ制作やリニューアル、サイト運用に関する無料相談を承っていますのでお気軽にご相談ください。
無料で相談してみる