グーテンベルクで空行を簡単に入れる2つの方法(ワードプレス5.0)

グーテンベルクで空行を簡単に入れる2つの方法(ワードプレス5.0)

何も知らずにワードプレスが5.0に更新した方は、

ななちゃん
なんか記事投稿画面が違うんですけど!
ななちゃん
ぐぐぐぐぐ、ぐーてんべるく?って何?

って感じでななちゃんのように驚かれたのではないでしょうか。

 

今出回っているテーマでも、バージョン5.0のGutenbergに対応できていないものがほとんどだと思うので更新を待ったしているという方もいるかもしれませんね。

私もほとんどのサイトで待ったをかけている状態です。

あかね
テンプレートがGutenbergに対応するのを待ったほうが良さそうですよね~。

 

ただ、旧バージョンにこだわって、いつまでも使っていくぞ!とは思っていなくて、これから先はいずれGutenbergが当たり前になるので、Gutenbergに慣れなきゃな・・・って思っています。

 

そこで今回、Gutenbergを使ってみて不便に思ったけれど対応方法が検索しても出てこなかった空行について、記事にしてみました。

 

Gutenbergは空行がない?

Gutenbergにすると感覚的に記事を作成できるらしいのですが、そもそもWordPressって日本で開発されているわけではありません。

様々な言語に対応しているのはいいのですが、国によって改行の認識が違うらしいのです。

 

そのせいか、以前のバージョンではエンターキーを2回押すとできていた空行挿入ができなくなってしまっています。

 

改行するとブロックで区切られていきますが、いつものように2回エンターキーを押して改行すると空ブロックが作られます。

Gutenbergの空行

 

実際にプレビュー画面で、ユーザーが閲覧する表示画面を見てみると・・・

Gutenbergの空行

空行が消えちゃってるんです。。

 

あかね
外国で使う時は、空行という概念がないのかもしれませんね。

 

ここは正確には言えませんが、テンプレートがGutenbergに対応した際、もしかしたらこの辺も設定できるように作成していただけそうですが、今のところ空行入れられない問題が発生しています。

そこで、私が見つけた空行の入れ方2つをご紹介しますね。

 

Gutenbergで文と文の間に空行を入れる方法

それでは早速Gutenbergで空行を入れていく方法をご紹介しますね。

 

空行を入れる方法①:『スペーサー』を使った空行

まずは、スペーサーを使った空行を入れる方法です。

ブロックの横に『+(プラス)』ボタンがあって、そのブロックの要素を選ぶことが出来るんですけど、【レイアウト要素】→【スペーサー】と選択します。

Gutenberg空行

 

すると、空行が入るんですけど、なんかめちゃくちゃ広いんですよ!

 

管理画面はこんな感じです。

Gutenbergのスペーサーで空行

プレビューで見るとこんな感じ。

Gutenbergのスペーサーで空行

あかね
スペース空きすぎでしょ!

 

ということで、このスペースを変更しますね。

 

Gutenbergのスペーサーの幅を変更する方法

スペーサーで入れた改行の上にある、『︙』から、HTMLとして編集を選択します。

 

スペーサー改行の修正

 

すると、HTMLコードが出てきますよね。

空行の幅が100pxになっているので、あなたの使っているテンプレートの文字の大きさに変更します。

Gutenberg空行設定

 

すると、エラーが出てしまいます。

【HTMLに変換】をクリックしましょう。

Gutenbergの空行変更

あかね
スペーサー空行から設定しますが、結局最終的にHTMLコードとして認識しないとエラーが発生してしまいますね。

 

なんとなく空行が入っているみたいですが、プレビューを見ないと安心できませんよね。

Gutenbergスペーサーの変更

 

無事にいい感じにスペースが入っていますよね。

↓プレビュー画面

Gutenbergのスペーサーの変更

 

Gutenbergで何度も設定した空行を使えるようにする

続いてその作成したものを何度も使えるようにする方法です。

 

作成した空行を選択すると、『︙』が上に出てくるので選択すると、【再利用ブロックに追加】とあるのでクリックします。

 

Gutenbergのスペーサーで空行

 

名前を付けて保存します。

名前は英語で付けておくことを推奨します。

Gutenbergのスペーサーで空行

 

空行を入れたいところに、【/(スラッシュ)】+名前を入力すると、登録した空行を挿入できます。

Gutenbergのスペーサーで空行

あかね
ここで呼び出しやすいように、英語の名前を推奨していますよ。

 

Gutenbergでスペーサー空行するデメリット

あかね
私が考える、スペーサーによる空行のデメリットをご紹介しておきますね。

 

この方法だと【<div style=”height:16px” aria-hidden=”true” class=”wp-block-spacer”></div>】このコードを、空行を入れる度に使用することになります。

これが果たして、検索エンジンへの影響が0なのか・・・不明です。

 

空行を入れる方法②:『HTMLコード』を使った空行

続いて、HTMLコードを使った空行の入れ方です。

あかね
因みに私は、こっちにしますね。

 

まず、ブロックを作ったら【+】から、【カスタムHTML】を選択します。

Gutenbergに空行を入れる

 

旧バージョンでも使用していた改行のコード【&nbsp;】を入力します。

Gutenbergで空行

ここまでできたら、空行は無事に入っています。

ついでに、改行を呼び出せる設定をしておきましょう。

 

作った空行のブロックの上にある、【︙】から【再利用ブロックに追加】をクリックします。

Gutenbergで空行

 

すると出てくる画面で名前をつけて保存をしましょう。

名前は呼び出しの時のために、英語推奨です。

Gutenbergで空行

 

改行したいところに新しいブロックを作り、そこに【/(スラッシュ)】+名前を入力すると設定したものが出てきます。

Gutenbergで空行

 

プレビューで見てみても、空行が入っていますよね。

Gutenbergで空行

 

Gutenbergで空行を設定する方法まとめ

今回は、WordPress5.0から使用されているエディタGutenbergで空行を設定する方法をご紹介してきました。

一度、設定してしまえば、他の記事を書くときも設定は残っているので設定してしまいましょうね。

 

このような設定をしなくても、テンプレートの設定で簡単に空行を入れられるといいですが・・・

Gutenbergに慣れていかないといけないですが、まずは有名テンプレートがGutenberg対応していくのを待つしかなさそうですね。

 

空行から空行までの文章の改行毎に改行すると1つのブロックになってしまいまいますが、本当なら日本の改行認識でいうと、改行しても同じブロック扱いとなってブロックが変わると空行が入るほうがGutenbergを使いやすいんじゃないかなと思います。

またテンプレートがGutenberg対応してからどうなるのか・・・でしょうね。

 

ということで、今回のご紹介は以上となりますが、ここからはお知らせです♪

私あかねが、メルマガでアフィリエイトのノウハウを提供しています。

あかね
ゆる~く配信しているので、登録してみてくださいね♪

▼登録はこちらからできますよ♪▼

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください