超便利!再利用ブロックを使おう【WordPress】Gutenberg

グーテンベルグ再利用 ブログ

グッテンバーグ!(こんにちは)

今回はワードプレスのブロック型テキストエディタGutenbergの便利な機能、再利用ブロックの使い方をできるだけわかりやすく説明します。

再利用ブロックとはその名の通り、何度でも再利用できるブロックです。

この記事を読めばグーテンベルグの再利用ブロックを使ってさらに楽しくブログを作れるようになるはずです。

ブログを書き続けると自分のスタイルが出来てきますね。

そして毎回面倒な退屈な作業というのもあります。

再利用ブロックは、「またこれか、代わりに誰かやってくれないかなー」というやつをやってくれます。

またあの作業しなきゃいけないの?

大丈夫。用意できてます。(やさしい)

こういうことです。すごいでしょう。

関連記事 グーテンベルグについてまとめました。

スポンサーリンク

再利用ブロックの作り方と使い方の基本

説明や使用方法の前に作り方から説明します。

再利用ブロックを作る

なんのブロックでもいいので一つ作ってみます。今回はこの記事の最初の段落ブロックで作ってみます。

最初に、赤く囲んだボタンをクリック→再利用ブロックに追加をクリックします。

すると、下の画像のようになりますので再利用ブロックに名前を付けて保存します。。

保存すると

出来ました。簡単ですね。これが作り方の基本です。

再利用ブロックを使う

次は使い方です。

⊕ボタンでブロックの追加をします。

ブロックを選ぶウィンドウを一番下までスクロールさせると再利用可能があります。

作成した再利用可能ブロックが表示されます。今回作ったのは赤く囲んだ段落ブロック「あいさつ」です。

黄色く囲んであるアイコンは複数のブロックで構成されていることを表します。

「あいさつ」をクリックすると出てきました。これが再利用可能ブロックの使い方です。

再利用したブロックを記事で編集する時は通常のブロックへ変換します。

再利用可能ブロックを通常ブロックに戻さず編集した場合は全ての記事で使われているそのブロックも変更されてしまいますので注意が必要です。

逆に全てを一気に変えることが出来るので上手に使えば作業がすごく楽になりますね。

通常のブロックに戻りました。

これで安心です。

簡単に吹き出しを使うために再利用ブロックを作る

現在(2019年12月)グーデンベルグで吹き出しを使うのには手間がかかります。

いちいちクラシックエディタボタンを使ってひとつずつ吹き出しを出すのは面倒なので再利用可能ブロックにしてしまいましょう。

吹き出しを再利用ブロックにする。

クラシックエディタブロックで吹き出しを使用します

使い慣れたエディタで吹き出しを選択します。

再利用ブロックに追加します。

名前を付けて保存すれば完了です。

吹き出しのセリフを変更する場合には通常ブロックに戻すことを忘れないでください。

複数の吹き出しをひとつの再利用ブロックに入れ一発で呼び出す魔法

吹き出し同士で会話させたり複数の吹き出しを使用したりする人は一気に登場するやり方もおすすめです。

やり方は最初は一緒で、どんどん追加していくだけです。

せっかくなので先ほど作った吹き出しの再利用ブロックで作ります。

再利用ブロックから使用し、通常ブロックに戻してセリフを変えました。

通常ブロックに戻さないとセリフが全部一緒になっちゃうよ。

通常ブロックに戻さないと声が遅れて聞こえてくるよ。

そんなこといったってしょうがないじゃないか。

こうすることで違うセリフを言わせることが出来ます。

説明に戻ります。吹き出しを作り再利用ブロックに追加をクリックしてください。

ブロックの追加をクリックします。これを繰り返し好きなだけブロックを追加して再利用ブロックとして使用できます。

同じように吹き出しを作り保存すれば吹き出しふたつの再利用ブロックの完成です。

スゴイネー。

作業動画を作ってみました。

みてください。

WordPress Gutenberg再利用ブロックの使い方

複数のブロックで再利用可能ブロックを作る

やり方は一緒なんですが僕の毎回面倒だなと感じている作業を再利用ブロックにしながら説明していきます。

それはラーメン店のお店紹介の記事の最後の店舗情報です。

その作業をしなくていいように再利用ブロックにしていきます。

まずは見出しから。

再利用ブロックに追加します。
ブログでは「なんとかラーメン 店舗情報」と書きなおします。

⊕をクリックしてどんどんブロックを追加していきます。

見出しの下に段落ブロック。ここにはお店の住所を入力。

下のカスタムHTMLブロックにはグーグルマップの地図を埋め込みます。

地図の埋め込み方はこの記事を見てください。

区切りブロックを入れて次は電話番号を入力する場所です。

段落ブロックを使用します。

ここでスマホのタップで電話を掛ける方法も説明します。

電話番号を入力し、ドラッグして下の画像で黄色く囲んだリンクボタンをクリック

tel:電話番号を入力して緑で囲んだ適用ボタンクリックで終わりです。

tel:ooo-ooo-oooo

ボタンにしても良いですね。

営業時間、定休日など必要な項目を作りました。

保存して終了。

これで次回からの作業が楽になりました。

作った再利用ブロックを使ってみます。

店舗情報

住所


TEL


営業時間 ~ ~ ~ ~


定休日


席数


駐車場

良い感じです。

グーテンベルグ再利用ブロック まとめ

再利用ブロックについて書いてみました。

これを使えばブログ制作の時間短縮ができますね。

そして、実際に再利用ブロックを作ることでこうやったらおもしろいかな?と新たなアイデアもうまれそうです。

グーテンベルグの再利用ブロックについてでした。

グッテンバーグ!(サヨウナラ)

コメント

タイトルとURLをコピーしました