豆知識&対談&考えること

WordPressテーマ「JIN」でGutenberg使ってみた【 19枚の画像を使って説明! 】

[vkExUnit_ad area=before]

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

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

WordPressのテーマは「JIN」を使っているのですが、公式さんではGutenbergについての情報があまりなかったので、自分でやってみることにしました。

Gutenbergとは

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

アイコン名を入力

作った人の名前になるんだね

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

Gutenbergの使い方


画像はclassic版と同じ

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

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

デフォルト

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

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

Gutenbergで文章打ち込み作成

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

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

見出しの作り方

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

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

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

画像に alt 属性が指定されていません。ファイル名: jin09.jpg

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

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

段落(ブロック)作成

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

アイコン名を入力

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

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

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

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

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

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

文章入力の位置設定

先に図で表しますね。

文字を入力して「。」をつけて「Enter」を押すと、こうなります。

はい、次のブロックに移ります。

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

「Enter」を押しました。

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

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

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

Gutenbergで文字を装飾したい

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

太字と文字色

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

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

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

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

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

そこで、文字色は「よりリッチな装飾」ボタンを選びプルダウンを出します。「A 文字色」を選び、自分の好きな色を選ぶと完成です!

マーカーを引くとき

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

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

という箇所です。

マーカーを入れたいので、下の図のようにプルダウンを出します。

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

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

と、なります。ね、簡単でしょ。

アイコン名を入力

でも、違う色にしたいな

そういう場合は、色設定で設定しましょう。

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

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

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

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

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

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

ただ、吹き出しは左側だけなので、右側のも欲しいなと思っています。

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

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

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

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

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

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

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

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

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

Gutenbergを使ってみて | まとめ

Gutenbergの方が使いやすい!

それが第一印象ですね。

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

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

Gutenbergってドイツの人だから、楽天市場 でドイツ名産とか探してみようかなぁ♫ ドイツって昼間っからビール飲む国だって聞いたことあるよ。それにウインナーとチョコレートも有名だよね(♡♡

Follow me!

[vkExUnit_ad area=after]
ABOUT ME
あさみ
年齢に関係なく、やりたいと思えばやればいい。 自閉症と大学生の子持ちだけど、母親業は縁の下の力持ちなんです。転職回数が多く、転勤族の人と結婚したため転勤についての知識もある。自分の経験を基に色々と書いていきたい。 そんな私は、 6年前から小説blogで毎日更新している小説家です。 2018年11月からは、 株式会社まんがびと様に声を掛けていただき電子書籍作家にもなりました。 詳しいプロフィールは、こちら⇒人間、やりたいと思えばやればいい! 詳しくは、こちらへ⇒ポートフォリオ Amazonの著者ページ⇒Amazon