ブログ記事

「JIN」でGutenbergエディタを使ってみた!【19枚】の画像で説明

WordPressで記事を書く時、Gutenbergとclassic。どちらのエディタを使われていますか?

私は何を思ったのかGutenbergエディタを使い出しました。

WordPressのテーマは「JIN」を使っているのですが、JINの公式サイトではGutenbergについての情報が出てくるようになりました。 でも、やはり自分でやってみることにしました。

 

Gutenbergとは

ドイツのGutenberg(グーテンベルグ)さんが作ったので、Gutenbergという名称になったのです。

そう、作成者の名前になるのです。

それでは、エディタを使ってみましょう。

 

Gutenbergの使い方

画像を使って説明していきますね。

WordPressを起動して新規投稿を選ぶと、こうなります。 

先に画面をスクロールして、目次と見出しの設定。 

これで設定は終わりです。 そうしたら今度は文章を打っていきましょう。

 

Gutenbergで文章打ち込み作成

タイトルを入れて、文章を書き入れていきます。

見出しから作っていきますね。

 

見出しの作り方

そして、書き入れた文章を見出しにします。

 文字を打ち込むと、打ち込んだ文字を見出しにしたいので一番左端の「ブロックスタイルまたはスタイルを変更」をクリックすると、プルダウンが出ます。

「H 見出し」をクリックすると、下の図のようになります。 

これで見出しは完成です。

でも、段落の使い方ってどうすればいいの?と疑問に思った方には、こちらもどうぞ。

 

段落(ブロック)作成

Gutenbergではブロックでの作成が基本となります。

  「あ、やばい。どうやれば画像と画像の間に文字を入れると良いのだろう?」

というように焦ってしまいますが、大丈夫です。

上の図のように、挿入したい箇所の上の画像に触れると点線で囲まれるので、その「ブロックの追加」をクリック。

プルダウンが出て、何を挿入するのかメニューを選びます。 ここでは文字を挿入したいので段落を選んでクリック

はい。 段落が挿入され、文字も打てました。

それでは基本的な事からやっていきましょう。

 

文章入力の位置設定

先に図で表しますね。

  1. 文字を入力して「。」をつけて「Enter」を押す
  2. 段落ができ次のブロックに移る  

だけど、「Shift」+「Enter」を押すと、 カーソルは直ぐ下になりますよ。

「Enter」を押しました。

でも、「Enter」+「Shift」を押すと、すぐ下に入力するようになります!

図と実際の文章打ちの2通りにしましたが、もうこの通りです。

それでは、今度は装飾関係です。

 

Gutenbergで文字を装飾したい

文字を装飾したい装飾をするには、 太字 文字色 マーカーを使用することが主ですが、それを図を使って説明していきますね。

 

太字と文字色

太字は入力しているボックスに出ているので「B」を押せばOK!!

そして、文字色は下図のようにしていきます。 

「よりリッチなテキスト装飾」を選び、プルダウンを出します。

そこから文字色」を選んだら色を選びます。

それで、出来上がりです。

文字だけで言い表せるとこうなります。

  1. 文字色は「よりリッチな装飾」ボタンを選ぶ
  2. プルダウンを出す
  3. 「A 文字色」を選び、自分の好きな色を選ぶと完成!

 

マーカーを引くとき

上で使った図で説明します。

一番下の赤枠で囲んでいるでも、「Enter」+「Shift」を押すと、 ここに入力するようになります!  

という箇所です。

マーカーを入れたいので、文字をドラッグしておくと、下の図のようにプルダウンを出します。

赤丸で示している所にマウスを持ってくるとプルダウンが出るので選びましょう。このピンク色はマーカー1です。 マーカー1を押すと、ピンク色でマーカーが引かれました。

ね、簡単でしょ。

でも、違う色にしたいな 

そういう場合は下記のようにします。

この図にある色設定で設定できますよ。 色々と遊んでみるのをお勧めします。

 

Gutenbergで「吹き出し」機能を使う

色々とありますが、今はまだよく使うものしか書いていません。

それでも、吹き出しなんて使いますよね。

ブロックの一番右にあるマークにマウスをあてると、図のように「ブロックの追加」と出てきます。プルダウンが出てくるので、その中から「JINブロック」を選びクリック!

JINブロックの中には、吹き出しを筆頭に、見出し付きボックス、ブログカード、シンプルボックスなどがあります。

ただ、吹き出しは左側だけなので、右側のも欲しいですが我慢です。

さあ、あとは記事を公開するだけです! 記事が出来上がり公開するときに陥る点があるので、それを説明しますね。

 

Gutenbergで記事を公開するときの注意点

タイトルだけ入力すると、ハイパーリンクの編集位置が違います。

日本語のままでいるとアドレスは日本語が含まれてしまいますので、ご注意ください。

そのハイパーリンクは右端にあります。が、文章とブロックの2つのタブがあるので、文章にしておかないと隠れて見えないです。

タブを文章にしてスクロールすると、出てきます。

思いっきり日本語でURLアドレスになっていますが、これをローマ字に変えましょう。

だけど、文章を入力していくと、タイトルの上にハイパーリンクの文字が出てきます。どちらが良いのかは好みですね。

そして、投稿して終わりです!

 

Gutenbergを使ってみて | まとめ

Gutenbergの方が使いやすい!  

それが第一印象ですね。

まだ使いこなせてない感はあるものの、色々と触ってみるのをお勧めします。

使い慣れるとClassicより良いかもね。