Gutenberg ブロックエディタ 再利用ブロックを使いまわす

空間 Wordpress

こんにちは。管理人の berry です。「berry105」のブログに訪れてくださいまして、ありがとうございます。

今回は、Wordpressのブロックエディタ(Gutenberg)の再利用ブロックの紹介です。


Gutenberg ブロックエディターを使い始めました。

一般的なブロックエディターの使い方、cocoonのブロックエディター使用方法について、機能や設定についてご紹介します。


再利用ブロックとは


再利用ブロックとはなんぞや、ということからまず説明しておきますと、ブロック機能は、Wordpressで今まで使ってきたclassicエディタと違い、部分ごとにブロックで構成してコンテンツを作ります。

部分例を挙げてみますと、見出し部分・段落部分・画像部分etcです。

このブロック構成の中で、頻度高めなブロック構成をコピーして使いまわす機能が、再利用ブロック機能であります。


再利用ブロック設定、使用方法


では、さっそく再利用ブロックの設定方法を説明します。


再利用したいブロックの設定方法


① 使いたいと思うブロックの上に表示されているツールバーの縦3つに並んだ点の部分をクリック。


ブロックエディタ ツールバー 縦三つ点


② プルダウン表示にある「再利用ブロックに追加」をクリック。これで、再利用したいブロック設定は完了です。


再利用ブロック追加ボタンの説明画像


設定した再利用ブロックの使用方法


① 設定した再利用を使いたい場所で、+部分(ブロック追加ボタン)をクリック。ブロックメニューが表示されます。


+ボタンは、いろいろな場所に設置されています。ツールバー左端や、ブロックとブロックの間に+ボタンが設置されています。ブロック間にカーソルを当てると、+ボタンが表示されます。


ブロックエディタ +ボタン説明画像


② ブロックメニューのプルタウン表示の最下段に、「再利用可能」ボタンがあります。ここをクリックすると、選択した再利用ブロックがコンテンツ内に表示されます。


ブロックエディタ 説明画像


慣れると、かなり便利です。使いまわしてくださいね(‘ω’)ノ


現在、段落スペース の再利用ブロックを使いまくり


私がコンテンツを作るときに一番こだわっていること、それは見出しや段落のスペース間隔です。コンテンツの配置も大切ですけれど、ブロックごとの空間があるのと、ないのでは、見やすさが違ってくる、と思っているためです。


berry
berry

以前、classicエディタを使っていたときも、ここが一番イライラする部分でした。


特に、テーマ変更した際、この「段落スペース」問題が起きました。

今までなら、エンターキーを一回クリックするだけで、自分の理想とするスペースを設定できたのに、テーマ変更した後 その法則が当てはまらないということです。

プレビューを見ると、見出しと文章の間のスペースがまだらに仕上がっているとか…、残念すぎるし、手直しするにも時間がかかるという結果に、落ち込むことが多々ありました。




今回、ブロックエディタ使用後に、この問題が発生してイライラ…。

これを解消すべく、再利用ブロックで、理想的な段落スペースを再利用ブロック設定。
見出しと段落の間や、画像と段落の間、またブログカードと段落の間などなど、設置した結果、ブロック間の段落スペースが均一化されて、スッキリしたコンテンツになったと思いました。

これで、段落スペースの乱れがなくなり、大満足です(‘ω’)ノ


▶関連記事

Gutenberg ブロック機能一覧 早見表
Wordpressブロックエディタ― Gutenberg の機能一覧の早見表的なものを作ってみました。機能について紹介した記事も、ここにリンクしていきたいです。berry全部の機能を紹介…制覇できるといいなぁ…(;'...
ブロックエディター「Gutenberg」に変更してみました
ブロックエディター「Gutenberg」に切り替えた理由と、変更後使ってみた感想。行間の開け方・ブロック削除方法・使用方法で気になった点をまとめました。


スポンサーリンク


   にほんブログ村 ブログブログ ブログノウハウへ

Wordpress
この記事を書いた人
berry

2019年、現在アラフィフで外でパートを再開した主婦です。ブログ執筆歴は長く、Wordpressは4年ほどになります。

最近、海外ドラマをAmazonプライムで観まくっています。主人にそそのかされてモンストも少々。アニメは名探偵コナンが好きで、漫画はのだめカンタービレがお気に入り。

ブログの副収入10万円夢見るようになりました。

berryをフォローする
berry105

コメント