【WordPress】Gutenberg(グーテンベルク)の覚えておきたい便利な使い方3選。

Gutenbergの覚えておきたい便利な使い方

こんにちは!もりおです。

WordPressでブログをはじめたんだけど、昔のエディタの情報ばっかり出てくる…。新しいエディタで便利な使い方を教えて!

こんな人に。

今日は、WordPressのエディタであるGutenberg(グーテンベルク)の「覚えておきたい便利な使い方」を紹介していきたいと思います。

「クラシックエディタを使っているけど、そろそろ新しいエディタを使ってみようかな…。」という人にも、参考になれば幸いです。

もりお

記事作成の上で、実際に困って解決していったノウハウを伝えていくぞ。

はじめに

Gutenberg(グーテンベルク)とは、WordPress 5.0から搭載されたエディターです。

今までのエディタ(クラシックエディタ)と比べて、「ブロック」によって、HTMLを記述することなく、直感的に記事を作成可能です。

ということなのですが…

「今までできていたことができなくなった。」

「ビジュアル編集(HTMLを使わない編集方法)では実現できない。」

ということも発生しています。

そんなクラシックエディタとの違いを埋めるための方法や、HTMLを使わざるおえない部分を今回は紹介していきます。

もりお

Gutenbergは使いにくいっていう人も多いけど、慣れてしまえばそんなことはないんじゃないかなと思ってる。直感的でステキだぞ。

1. よく使うブロックを登録しておく

ブログを書いていると、よく使うお決まりのブロックが必ずあると思います。

例えば、Rinker(カエレバでも)や特定のデザインのリストやボタンなど。

そういったブロックは毎回すべてを打ち込んでいくのはめんどうなので、テンプレートを登録しておきたいものです。

Gutenbergでは、「再利用ブロック」によく使うブロックを登録しておくことができます。

MEMO
従来のエディタ(クラシックエディタ)では、AddQuicktagというプラグインを使って、エディタ上にボタンとして登録しておくことができました。GutenbergではAddQuicktagを使うことができないので、再利用ブロックを代わりに使っていきます。

まずは、ショートコードとして登録したいブロックをエディタに入力します。

私の場合のRinkerだとこんな感じですね。

登録したいショートコードを入力する

左上の を選択し、「再利用ブロックに追加」を選択します。

「再利用ブロックに追加」を選択する

わかりやすい名前をつけて「保存」すれば完了です。

名前をつけて保存する

使うときは「/(スラッシュ)」の後に先ほどつけた名前を入力していくと途中で候補が表示されるはずですので、それを選択します。

登録したショートコードを入力

先ほど登録したショートコードが表示されます。

登録したショートコード

を選択して、「通常のブロックへ変換」を選択します。

「通常のブロックへ変換」を選択する

あとは必要であればその記事に合った内容に修正します。

この場合だと、post_idにそこで紹介する商品にあったIDを入力して使います。

これで完了です。

1記事の中でも何度も使いますので、上手に使えば大きく記事作成を効率化させることができます。

もりお

「通常のブロックへ変換」は忘れないように!そのまま入力して保存してしまうとテンプレートが更新されてしまうぞ。

2. 文章の途中のみ文字色を変える

Gutenbergでは、文章の途中のみ文字色を変えることは「単純には」できません。

文字色はエディタ右側の「色設定」から変更ができますが、文字色を変更したい単語を選択していても、このようにブロック全体の文字色が変更されてしまいます。

太字(Bold)は選択した部分だけできるんですけどね…。

ブロックの一部分だけ文字色を変更するには、デフォルトの「ビジュアル編集」ではなく、HTMLを直接編集する必要があります。

MEMO
これから説明する方法はテーマや選択する色で多少見え方(文字列)が異なります(私はSANGO)
ですが、大枠の手順は似たようなものとなるはずなので、同じような手順で試してみてください。

まずは、上図のようにブロック全体の文字色を変更し、 から「HTMLとして編集」を選択します。

「HTMLとして編集」を選択する

そうすると以下のようにHTML(プログラミング言語)で該当ブロックが表示されます。

これを以下のように書き換えます。

  1. 文字色を変更したい部分を<span></span>で囲みます。
  2. <p>の中の文字列(ここではclass=”◯◯”)をコピーし、<span>の中にペーストします。
  3. <p>の中の文字列(ここではclass=”◯◯”)を削除します。

これでプレビューをしてみると…

文書の一部分だけ文字色を変更

成功しました。

もりお

この例だと太字(Bold)にもしているぞ。太字にしたくない人は<strong>と</strong>を消すか、そもそも最初のビジュアル編集で太字にしなければOK。

3. 画像を文章の途中(インライン)に挿入する

「画像」ブロックで挿入した画像は、前後に改行が入ります。

そうではなく、文章の途中(インライン)に、例えば ←このように画像を挿入する方法を紹介します。

まずは、メディアライブラリに挿入する画像を用意しましょう。

メディアライブラリに画像を追加し、アドレスをコピー

「リンクをコピー」のアドレスをあとで使うので、コピーしておいてください。

画像抜きで文章をブロックに入力し、 から「HTMLとして編集」を選択します。

文章を入力し、「HTMLとして編集」を選択

以下のようにHTMLで該当ブロックが表示されます。

HTMLで該当ブロックが表示される

そのブロックを以下のように編集します。

img追加後のブロック

画像を挿入する部分に、<img src=”挿入する画像のURL”>を追加します。

「挿入する画像のURL」は、先ほどのメディアライブラリの「リンクをコピー」のアドレスです。

これで完成です。

プレビューしてみると…

ここに挿入→←ここに挿入

このように表示されているはずです。

もりお

画像サイズを調整したい場合は、<img width=”◯◯” src=”….”>というように、widthの◯◯に任意の数字を入れることで調整することができるぞ。

まとめ

Gutenbergはクラシックエディタから使い勝手が大きく変わったので、どうしても敬遠されがちです。

ですが、新しいエディタとして採用された以上はこちらが主流になっていくものと思われます。

クラシックエディタのサポートが終了となってから慌てないように、早いうちにGutenbergになれておきましょう。

もりお

あとは、HTML/CSSはある程度使えるようになった方がいろいろカスタマイズできるのでオススメだぞ。

コメントを残す

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