Alice blog

ブロックエディターの改行方法_スペーサーで行間を調整する方法も紹介

WordPress Gutenberg 改行
           

ブロックエディター(Gutenberg)を使い始めたばかりの頃、下記の疑問を抱くことも多いはずです。

Enterでブロックの追加はわかるけど、ブロック内での改行方法がわからない…

当記事では、ブロックエディターの改行方法を紹介していきます。

記事後半では行間を好きなサイズに調整する方法も紹介していますので、文脈に合った行間のサイズを設定できるようになります。

この記事を最後まで読み、ブロックエディターの改行方法から行間の調整方法までをマスターしましょう。

「そもそも、ブロックエディターの使い方がいまいちわからない…」という場合には、下記の記事がおすすめです。
【WordPress最新版】ブロックエディター(Gutenberg)の使い方



ブロックエディター(Gutenberg)で改行する方法

ブロックエディター(Gutenberg)で改行する方法には、下記の2種類があります。

  • 「Shift+Enter」で改行
  • カスタムHTMLで「br」を入力して改行

それぞれの改行方法について紹介していきますね。

改行方法①:「Shift+Enter」

ブロックエディターで改行する方法1つ目は「Shift+Enter」で改行する方法です。

この方法は見出しに書いてある通りで、ブロック内の改行したい位置で「Shift+Enter」を入力すれば改行できます。

ブロックエディターで改行する場合には「Shift+Enter」を入力するのが一般的ですね

なお、新規のブロックを追加するには「Enter」をクリックすれば追加できます。

改行と新規ブロックの作成では行間の幅が異なりますので、状況に応じて改行と新規ブロックの追加は使い分けましょう。

改行方法②:HTMLの編集画面で「<br>」を入力

ブロックエディターで改行する方法2つ目は、HTMLの編集画面で「<br>」を入力して改行する方法です。

そもそもWordPressの記事というのは「HTML」というプログラミング言語によって書かれています。

そして、改行のコードは「<br>」であるため、HTMLの編集画面で改行したい位置に<br>を挿入することで好きな位置で改行が行えます。

先ほど紹介した「Shift+Enter」で改行する方法も「Shift+Enter」を押せば自動で<br>が挿入されて改行される仕組みであるため、根本的には同じ方法と言えますね

HTMLの編集画面を開くには、改行を追加したいブロックを選択した状態で詳細設定をクリックして「HTMLとして編集」を選択します。

 

ブロックの編集画面がHTMLに切り替わりますので、改行したい位置に「<br>」を追加します。

テーマによっては「<br>」で改行できない場合があります。<br>で改行できない場合には、代わりに「<br />」で改行できます。

 

これで、改行の挿入は完了です。

先ほども少しお伝えしましたが、わざわざHTMLから<br>を追加しなくても改行したい位置で「Shift+Enter」をコマンド入力すれば勝手に<br>は追加されます。そのため、HTMLで編集しているブロック以外は基本的に「Shift+Enter」で改行することをおすすめします。

ブロックエディターで行間を調整する時に便利な「スペーサー」

これまでは、ブロックエディターで改行する方法を紹介してきました。

とはいえ、記事を執筆していく中で行間のサイズを自由に調整したい場面も出てくるはずです。

そんな場合には「スペーサー」を使うことをおすすめします。

スペーサーとは?

スペーサーとは、ブロックとブロックの間の余白を自由に設定するためのブロック要素です。

例としては、下記のように使います。

※スペーサーの例

スペーサーは余白の大きさを任意のサイズに変更できるため、その時々に最適な余白を挿入できますね

スペーサーの挿入方法

スペーサーの挿入方法は簡単で「ブロックの追加ボタン」から「スペーサー」を選択すれば、スペーサーの追加は完了です。

 

スペーサーを追加した後にはプレビューを確認し、行間が最適なサイズに調整されているかを確認してみましょう。

なお、スペーサーを追加する時に、わざわざ「ブロックの追加ボタン」を操作するのは面倒です。

そのため、ブロックをスムーズに追加できるように、ブロックエディターのショートカットキーを覚えることをおすすめします。

ブロックエディターのショートカットキーについては下記の記事で紹介していますので、よければ一度読んでみてください。

スペーサーの行間を調整する方法

スペーサーの行間は、エディター右側にある「スペーサー設定」から任意の値を入力して調整できます。

また、スペーサーの下部に表示されている「つまみ」を上下に移動させても、スペーサーの行間は変更可能です。

テーマによっては、スペーサーのサイズをCSSのクラスで定義されている場合があります。クラスで定義されているサイズをスペーサーに適用したい場合には、付与したいクラス名をエディター右側にある「高度な設定」の中の「追加CSS」に入力しましょう。

スペーサーのサイズを変更した後はプレビューで確認し、理想のサイズが適用されているかを確認しましょう。

ブロックエディターで効率的に行間調整をする方法

ブロックエディターで効率的に行間調整をするには「再利用ブロック」を使うことをおすすめします。

使用頻度の高い行間サイズのスペーサーを再利用ブロックに登録しておけば、毎回スペーサーの行間調整をする手間が省けるからですね。

具体的には、下記の通りです。

  • 50pxのスペーサー
  • 100pxのスペーサー
  • 120pxのスペーサー
  • 150pxのスペーサー
  • 200pxのスペーサー
使用頻度の高いサイズのスペーサーを登録しておけば、効率的に記事作成を進められますね

サイズごとのスペーサーを再利用ブロックに追加するには、まずはじめに登録したいサイズのスペーサーを作ります。

 

あとは、登録したいスペーサーの「詳細設定」をクリックし「再利用ブロックに追加」を選択すれば、再利用ブロックへの登録は完了です。

 

登録した行間サイズのスペーサーを使いたい場合には、ブロック追加画面の「再利用可能」から選択すれば作れます。

 

再利用ブロックに追加したスペーサーは、ショートカットキーでも呼び出せます。

ブロックエディターでは改行とスペーサーで行間を調整しよう!

これで「ブロックエディターの改行方法」の内容は終わりです。

ブロックとブロックの行間は、記事の読みやすさに大きく関わります。

そのため、改行とスペーサーをうまく使いこなし、読者の読みやすい記事を目指しましょう。

当ブログでは、WordPressにおすすめなテーマを8つ紹介しています。

まだテーマ選びが終わっていない場合には、上記の記事を参考にしながらテーマ選びを進めることをおすすめします。

最後まで読んでいただきありがとうございました。