WordPressのブロックエディターで記事に余白を作る方法

WordPress(ワードプレス)で記事を書く際に、ブロックエディター「Gutenberg(グーテンベルグ)」をメインで使用しています。
従来のエディターと違う事に戸惑うことも多く、ときどき過去のエディターに切り替えながら記事を編集したりする事もあります。非常に面倒なので、なるべくそれをせずにブロックエディター1本で済ませたいと画策中です。

「Gutenberg (グーテンベルグ)」 は、WordPress5.0以降に登場した新エディターです。

※ブロックエディター「Gutenberg (グーテンベルグ)」→長くなりますので以下ブロックエディターと記入します。
※当サイトは「Cocoon」を使用しております。

ブロックエディターを従来のエディターに切り替える方法

まずは従来のエディターへ切り替える方法について書きます。
従来のエディターへの切り替えは「Cocoon設定」から行う事が出来ます。
※当サイトは「Cocoon」を使用しております。

WordPressの管理画面 >「Cocoon設定」>「エディター」に進み、エディター共通設定「Gutenberg」の項目から「Gutenbergエディターを有効にする」のチェックを外します。

ですが記事の編集時に切り替えるのはかなり面倒です。

投稿時に本文の一部を過去のエディターに切り替えて編集する

この機能に気付いた時は非常に嬉しかったです。
WordPress投稿途中に分からない事が出てきて検索をかけても、旧エディターでの解決方法しか見当たらない事が多々ありました。
その度に投稿を中断し、旧エディターに切り替えて作業するという非常に面倒な事をしていたのですが、以下の方法でその手間が省く事ができました。

まずは投稿画面で新規の段落を追加します。
記事投稿画面の段落内で「詳細設定(縦に3つ点が並んでいるマーク)」>「前に挿入」or 「後に挿入」で追加します。

追加した段落にある左側の 「ブロックの追加」(+) をクリックします。「フォーマット」>「クラシック」を選択します。

そのブロックだけ旧エディター仕様になります。
「enter」もしくは「shift」+「enter」で改行する事で、余白も反映されます。

スポンサーリンク

ブロックエディターで記事内に余白(空白)を作る方法

ブロックエディターで段落の間に余白を入れたい

ブロックエディターでは、記事投稿の最中に「enter」を押す事で次のブロックに切り替わります。

「shift」+「enter」で改行を行うことができますが、その先に文字が続かない場合は、WordPressの「自動整形」機能が働き、改行が無効になってしまいます。

「HTMLとして編集」に切り替えて「shift」+「enter」を行っても結果は同じでした。

検索してみると、以下の様な回答を得ることが出来ましたが

  • 自動整形を無効にするプラグインを入れる方法(他の部分で弊害がありそう)
  • 無理やり改行を挿入するプラグインを入れる(のちのち悪影響がありそう)
  • <br>タグや & nbsp ; タグで良い(手間が掛かるし微妙な気がする)
  • cssで調整を行うのが最もスマートである(今後スキンを変更したりする場合に手間が増えそう)

私としては、なるべくプラグインを増やしたくない(管理が面倒かつ不具合の原因になるのが怖い)、cssをいじるのは最小限にしたい(出来ればもう少しブロックエディターを使いこなしてからにしたい)、

と思いましたので、ブロックエディター上で解決出来る方法を探していました。
検索の仕方が下手なのか、なかなか解決に至らずに困っていました。

ブロックエディターに余白を作るブロックがありました

色々いじってたら見つかりました。そうですまさにこういうのが知りたかったんです。
早速ひとつ作って「再利用ブロック」に追加しました。

投稿画面で新規の段落を追加します。
記事投稿画面の段落内で「詳細設定(縦に3つ点が並んでいるマーク)」>「前に挿入」or 「後に挿入」で追加します。

追加した段落にある左側の 「ブロックの追加」(+) をクリックします。
「レイアウト要素」>「スペーサー」を選択します。

スペースのみの段落が表示されます。
段落下部をドラッグ アンド ドロップ、もしくは右側のメニュー「余白の設定」から高さを調整します。

このブロックを再利用ブロックに設定しておくと便利です。
余白の高さを調整し、「詳細設定 (縦に3つ点が並んでいるマーク) 」>「再利用ブロックに追加」をクリックします。

「ブロックを作成しました」と表示されます。名前を付けて「保存」をクリックします。

作成した再利用ブロックを使用するには、記事投稿画面の段落内で「詳細設定(縦に3つ点が並んでいるマーク)」>「前に挿入」or 「後に挿入」で追加します。

追加した段落にある左側の「ブロックの追加」(+)をクリックします。
「再利用可能」から目的のブロックを選択すると表示されます。

私は高さ20pxのスペーサーを作成して 「空行(20px)」と名前を付けました。 余白が欲しい時に「再利用ブロック」から呼び出します。

頻繁に使用していると「よく使うブロック」として上部に表示されるようになりますので非常に便利です。

デメリットは、

  • 同じ段落内で解決出来ない事(ブロックが多くなってしまう)。
  • 20px以下は指定できない。

このくらいだと思います。

おわりに

WordPressを触る期間を開けてしまうと、記事の設定や編集の方法を忘れてしまいます。途方にくれますし面倒臭くもなります。でも疑問が解決すると嬉しいです。

私は過去に旧エディターを使用していました。ブロックエディターはまだまだ勉強中です。
今後はこのブロックエディターがスタンダードになる様ですので、何とか使いこなしてみせようと格闘中です。

スポンサーリンク