スタイル見本(ブロックエディタ版)

blanc note.の記事・固定ページで使うことのできるスタイルの見本と、記事を整形するときに使うコードをご紹介いたします。
バージョンアップのタイミングで、随時追加していますので、ときどき覗いていただけるとありがたいです(^_^)

blanc note. 2.1でおくればせながらWordpress グーテンベルクのブロックエディタに対応いたしました。

WordPress グーテンベルク対応版

blanc note.2.8からWordpress グーテンベルクのブロックエディタに対応しました。

グーテンベルクとは?

表組み(テーブル)

対応状況をテーブルでつくってみました。

Classic EditorBlock Editor
ふきだし
いろつきボックス
見出しのデザイン変更
表組み(テーブル)
リスト
タイトルつきリスト×
フロー
マーカー
画像を中央配置+本文
(回り込みレイアウト)
ボタン
ギャラリー
メディア埋め込み

いろつきボックス(角丸)

いろのついたボックス。
管理画面から色を選ぶことができます。色設定なしだとグレー。

いろのついたボックス。
管理画面から色を選ぶことができます。

いろのついたボックス。
管理画面から色を選ぶことができます。

いろのついたボックス。
管理画面から色を選ぶことができます。

いろのついたボックス。
管理画面から色を選ぶことができます。

いろのついたボックス。
管理画面から色を選ぶことができます。

いろのついたボックス。
管理画面から色を選ぶことができます。

わくつきボックス

わくのついたボックスです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくのついたボックスです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくのついたボックスです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくのついたボックスです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくのついたボックスです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくのついたボックスです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくのついたボックスです。

わくのついたボックスです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくのついたボックスです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくのついたボックスです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくのついたボックスです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくのついたボックスです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックス(かどまる)

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

わくつきボックスかどまるです。
管理画面から色を選ぶことができます。
文字色が枠の色になります。

フローボックス

手順や流れを説明するときに使えるボックスです。

STEP1
段落>スタイル>フローボックスを選択してください。

STEP2
色設定から背景色を設定してください。

STEP3
段落>スタイル>フローボックスを選択してください。

STEP4
段落>スタイル>フローボックスを選択してください。

STEP5
段落>スタイル>フローボックスを選択してください。

STEP6
段落>スタイル>フローボックスを選択してください。

STEP7
段落>スタイル>フローボックスを選択してください。

ちびふきだし

ちいさな吹き出しです

ちいさな吹き出しです

ちいさな吹き出しです

ちいさな吹き出しです

ちいさな吹き出しです

ちいさな吹き出しです

ちいさな吹き出しです

ちいさな吹き出しです

ちいさな吹き出しです

ちいさな吹き出しです

ちいさな吹き出しです

ちいさな吹き出しです

ちいさな吹き出しです

ふきだし

ふきだしにも対応しました!

ちょっと便利になりました〜!

リスト

ギャラリー

ボタン


使い方

WordPress5.0以上で、投稿画面が変わりました。その名も「ブロックエディタ」と言います。

WordPress5.0以上をお使いで、エディタ拡張関係のプラグインを使っていない方。blanc note.の親テーマをお使いの方は、すぐにお使いいただけます。

うまく動かないときは

もし「ブロックエディタが使えないよ」「ブロックエディタにblanc note用のスタイルがでないよ」などのトラブルが発生した場合は、いくつか設定を変える必要があります。

Editor関係のプラグインを入れている方

Classic Editor、Page builderなどの拡張プラグインが入っていると、ブロックエディタが表示されない可能性があります。プラグインを停止してください。

子テーマをお使いの方

カスタマイズを行っていたり、子テーマをお使いの場合、ブロックエディタにblanc note.用のスタイルが表示されません。大変お手数ですが、親テーマをお使いいただけると幸いです。