ブログ記事の書き方

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

更新日:

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

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

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

 

Gutenbergとは

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

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

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

 

Gutenbergの使い方

 

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

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ってドイツの人だからチョコレートを探してみようかなぁ♫ 

 ドイツって昼間っからビール飲む国だって聞いたことあるよ。チョコレート大好き♡

私の好きなチョコを、ご紹介♪

 


関連記事: ブログのライティング講座 【ブログ記事の書き方】注意する8点編  

こちらもどうぞ ⇒ ブログを書くヒントを本屋で出会った人にもらいました。

 

Follow me!

-ブログ記事の書き方

Copyright© ブログを作ろう! , 2020 All Rights Reserved Powered by STINGER.

%d人のブロガーが「いいね」をつけました。