以前に公開した、翻訳ファイルを絶対に最後に反映させるためのプラグイン「HA Language Overwrite」に続くひまあーと作の野良プラグイン第二弾です。
【HA BLOCK DESIGN】は、Gutenberg（ブロックエディタ）の段落ブロック・テーブルブロック・リストブロックへ、装飾したデザインを適用できるプラグインで、ブロックエディタ上で簡単に切り替えができるようにするプラグイン。投稿や固定ページでちょっと目立つ部分を作りたいときに重宝します。
【HA BLOCK DESIGN】プラグインの用途や機能
後述するようにエディタ（投稿編集画面）上で簡単に以下のような装飾をすることができるようになります。
段落ブロックの装飾例
警告コンテンツ
注意コンテンツ
アイディアコンテンツ
リストコンテンツ
リストブロックの装飾例
- 警告リスト
- 警告リスト
- 注意リスト
- 注意リスト
- アイディアリスト
- アイディアリスト
- チェックリスト
- チェックリスト
- 数字付リスト（赤）
- 数字付リスト（赤）
- 数字付リスト（黄色）
- 数字付リスト（黄色）
- 数字付リスト（緑）
- 数字付リスト（緑）
テーブルブロックの装飾例（枠線ありの選択のみ）
| 枠付きテーブル | 枠付きテーブル |
| 枠付きテーブル | 枠付きテーブル |
本ページを最後に編集したときの環境・バージョンなど
プラグインを使用（試用）したテスト環境
この紹介記事作成にあたって、試用（テスト）を行った環境と当時のプラグインバージョンは以下の通りです
- テストサーバー：カラフルボックス
- WordPressのバージョン：5.7.1
- PHPのバージョン：7.4.15（8.0でも動作確認済）
- テーマ：HABONE(オリジナルテーマ)、およびTwenty Twenty One(WordPress標準テーマ)
- プラグインのバージョン：記事更新時のバージョン 1.0
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【HA BLOCK DESIGN】プラグインの設定画面や表示画面の日本語化と翻訳
【HA BLOCK DESIGN】プラグインは設定項目がありませんので翻訳しなくても日本語で使用できます。
【HA BLOCK DESIGN】プラグインのインストールと設定方法
【HA BLOCK DESIGN】は私ひまあーとが自作テーマ「ha-Basic 3.0」以降で追加した機能をプラグイン化したものです。
「ha-Basic」テーマ3.0以降を使用する場合、本プラグインを使わなくても同じ装飾ができます（併用しても不具合は出ないように構成しています）
【HA BLOCK DESIGN】はHA BLOCK DESIGNの配布ページからダウンロードできます。WordPress公式プラグイン配布ページでは配布していません（いわゆる野良プラグインです）。
同ページ内で制作の経緯やコード解説などもしていますので、ご自身で同様のプラグインを作ってみたい方の参考になると思います。
ダウンロード後、プラグインの新規追加画面からアップロードインストールを行ってください。
基本的な設定方法と使用方法
設定画面はありませんので、有効化するとすぐにお使いいただけます。
投稿編集画面で、「段落」「リスト」「テーブル」ブロックを選択すると以下のような選択がブロック設定で切り替えられるようになります。
段落ブロックのデザイン選択
- 警告マークと枠線のある「警告」スタイル
- 注意マークと枠線のある「注意」スタイル
- ヒントマークと枠線のある「アイディア」スタイル
- チェックマークと枠線のある「チェック」スタイル
リストブロックのデザイン選択
- リスト項目に警告マークと枠線のある「警告リスト」スタイル
- リスト項目に注意マークと枠線のある「注意リスト」スタイル
- リスト項目にヒントマークと枠線のある「アイディアリスト」スタイル
- リスト項目にチェックマークと枠線のある「チェックリスト」スタイル
- 数字リスト（ol）項目に枠線と装飾した数字を表示する数字付リスト（赤・緑・黄色）
テーブルブロックのデザイン選択
- 少し太い外枠線と細い内枠線を使ったテーブルデザイン
このページの更新履歴
| 更新日 | 更新内容 |
|---|---|
| 2021年 5月 3日 | WordPressの標準ブロックにエディタ上で選択した装飾を加えることができるプラグイン「HA BLOCK DESIGN」を公開しました。 |
ポチップ
ポチップ
