WordPress(ワードプレス)で記事を書く際に、ブロックエディター「Gutenberg(グーテンベルグ)」をメインで使用しています。
従来のエディターと違う事に戸惑うことも多く、ときどき過去のエディターに切り替えながら記事を編集したりする事もあります。非常に面倒なので、なるべくそれをせずにブロックエディター1本で済ませたいと画策中です。
※ブロックエディター「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を触る期間を開けてしまうと、記事の設定や編集の方法を忘れてしまいます。途方にくれますし面倒臭くもなります。でも疑問が解決すると嬉しいです。
私は過去に旧エディターを使用していました。ブロックエディターはまだまだ勉強中です。
今後はこのブロックエディターがスタンダードになる様ですので、何とか使いこなしてみせようと格闘中です。