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

目安時間 10分

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ってドイツの人だから、楽天市場 でドイツ名産とか探してみようかなぁ♫

 

ドイツって昼間っからビール飲む国だって聞いたことあるし、ウインナーとチョコレートも有名だよね(♡♡

 

関連記事:Gutenbergのデメリット5点!WordPressテーマ「JIN」を使用しての感想

 

こちらもどうぞ ⇒ 心理学者の分析結果で「強みは行動力」と出ました!

Follow me!

この記事に関連する記事一覧

プロフィール

名前 あさみ

年齢に関係なく、やりたいと思えばやればいい。
自閉症と大学生の子持ちだけど、母親業は縁の下の力持ちなんです。

就職、バイト、パートと転職回数が多く、転勤族の人と結婚したため転勤についての知識もある。接客業になりますが(汗)
自分の経験を基に色々と書いていきたい。

そんな私は、フリーの小説家です。

詳しくは⇒こちらからどうぞ

最近の投稿
最近のコメント
人気の投稿とページ
カテゴリー
Count per Day
Twitter
メタ情報
アーカイブ
プライバシーポリシー