再利用ブロックを活用してラクラク投稿しよう
![](https://foto-note.com/wp-content/uploads/2022/11/2020.8.28_200828_0026.jpg)
ブロックとは
WordPressで新しく登場した高性能エディター、Gutenberg(グーテンベルク)。
いろいろなブロックが用意されてるので、固定ページや投稿ページでもページごとに異なるレイアウトがしやすいのが新しいエディターのメリット。
元々備わっている「ブロック」以外にも、テンプレート化したいときに使える「パターン」や使い回ししたいパーツを管理できる「再利用ブロック」という便利機能があります。
再利用ブロック、便利です
「パターン」の場合、凝ったデザインのページをつくりたいときに便利。ですが、特別なページでもない限り毎回そこまで装飾をしないと思いますので、出番は少ないのかな。
記事を作成するときに、よく使うものを「再利用ブロック」に登録しておくと、使うときにとっても便利です◎
再利用ブロックの良いところが、再利用ブロックを変更したときに、すべてのページにその変更が反映されるところ。
連動しているので、記事一つ一つ直さなくても◎
反対に中身を書き換えたい、このページだけ文言など変更したいというときは「再利用ブロック」から「通常ブロック」に変換すればOKです。
よく使うパーツを再利用ブロックに登録しておくと、htmlを書かなくともボタンひとつで反映できるので手間もリスクも少なくて◎
このテーマではコンポーネントを用意しています
テキストやマーカーなど、ちょこっと変化をつけたいときに使える装飾や、表組みや囲みボックス、ボタン、リンクなどページ作成時に使い回しできそうなものをコンポーネント化して用意しています。
コピペで使っていただけたらと思ったんですが、htmlベースなので、コピペ時にカッコとかなにか抜け落ちてしまう可能性も無きにしも非ずだしスタイリッシュではない。いい方法ないかなと模索しておりましたが、再利用ブロックを利用すると抜け落ちる心配もなく、直感的に操作できます。
使い回ししやすいし、便利なのでぜひ◎
再利用ブロックを活用して装飾をつける
再利用ブロックは、「+」マークを押して「すべて表示」を押すか、
![](https://foto-note.com/wp-content/uploads/2022/11/menu3-1300x636.jpg)
最上部アイコンマーク横の「+」を押してエディターの左側に出てくるブロックの中にいます。
![](https://foto-note.com/wp-content/uploads/2022/11/menu2jpg-1300x636.jpg)
登録した「再利用ブロック」を選択すると
![](https://foto-note.com/wp-content/uploads/2022/11/kiji1-1300x636.jpg)
このように表示されます。中身を編集せずにこのまま使いたい場合はこれで完了です。
![](https://foto-note.com/wp-content/uploads/2022/11/kiji2-1300x636.jpg)
テキストやリンクなど、中身を編集したい場合は一番右のボタンを押して「ブロックへ変換」します。
![](https://foto-note.com/wp-content/uploads/2022/11/kiji3-1300x636.jpg)
こうすると中身を編集しても、他ページには影響しません◎
再利用ブロックの登録・管理方法
投稿画面でブロックを選択、「再利用ブロックを作成」するとそのブロックが再利用ブロックとして登録されます。
登録された「再利用ブロック」は、一覧画面があってそこで管理可能です。
jsonデータでインポートできます
再利用ブロックはjsonデータでインポートしたり、エクスポートができるようになっています。
パネル最下部にある「再利用ブロックを管理」のリンクから
![](https://foto-note.com/wp-content/uploads/2022/11/menu5-1300x636.jpg)
再利用ブロックの画面の「JSONからインポート」を押します。
![](https://foto-note.com/wp-content/uploads/2022/11/import1-1300x636.jpg)
![](https://foto-note.com/wp-content/uploads/2022/11/import2-1300x636.jpg)
該当のjsonファイルをアップロードするだけ。
簡単です◎
というわけで、コンポーネント化したもろもろをjsonファイルにしましたのでインポートしてお使いください。
※cssが効かないとただのhtmlなので、このテーマでしか使えません。