ゆるふわイラストでわかる!ブログの作り方→

Gutenberg(グーテンベルク)の使い方を初心者向けに動画で説明!【Cocoonを使用】

にっきー

こんにちは!にっきーです。

テクノロジーは日々進歩します。
新しいものが世の中に出た時、ついつい「前の方が使いやすかった」「新しいやつってイマイチだよね」という意見を口にしてしまいます。

いまだにガラケー使っている人も「別にLINEとか使わないし、電話できれば十分」って人が多いね。

アドさん

にっきー

もちろん古いものでもそのまま使い続けることができますが、携帯電話を例に出すと、やはりスマートフォンが登場して年数が経つと…ガラケーのサービスを終了します、っていう案内が出てしまいましたね。

 

今回は、WordPressの記事投稿画面で新登場した「Gutenberg(クーテンベルク)」の使い方を説明していきます。

今までの編集画面でも十分なのになぜ?という思いがある人も、基本操作は知っておいて損はないかと思います!

 

 

Gutenberg(グーテンベルク)の基礎知識

 

グーテンベルクって何?

 

GutenbergはWordPressの新しいエディターです。このように説明をされています。

Gutenberg(グーテンベルク)とは、WordPress5.0より標準となった新エディターです。note.muやMediumなどのエディターに似ており、直感的に記事を書くことができます。「ブロックエディター」と呼ばれることもあります。

多くの解説サイトで、新しいエディターが「Gutenberg」もしくは「新エディター」、古いエディターを「旧エディター」と呼ばれています。

隠れWorkerでは「Gutenberg(グーテンベルク)」と呼んでいきます!

 

旧エディターとの違いは?

 

グーテンベルクと旧エディターの違いは、専門知識がさらに不要になったということです。

旧エディターだと文中に時折、そのままソースコードやショートコードを入れていることがありましたが、グーテンベルクはなるべく公開時のビジュアルそのままの状態で編集ができるようになっています。

 

ただこれは一長一短で、今までのエディターを使い慣れている人にとっては「ここだけソースコードを直接いじって色を変えたい」とか、「ここはもう直接html書いちゃった方が早い」というときに、ちょっと不便です

にっきー

にっきーは正直、旧エディターの方が使いやすいので今もそれを使っています。しかし、初心者さんだったら逆にGutenbergの方が使いやすいのでは?と思い、両方できるようにすべく、今回Gutenbergにチャレンジしてみることにしました。

 

 

グーテンベルクの使い方(基本の入力)

 

グーテンベルクの基本の構成は「ブロック」です。

人気の投稿ツール「note」などと近い操作にすることで、ブログ投稿のハードルを下げたということでした。

にっきー

無料レンタルブログを使い慣れていたにっきー的にはハードル上がっています。笑

 

記事を投稿する方法

 

ダッシュボードを開いた状態で
[投稿] → [新規追加]で、新しい記事を作成できます。

 

タイトルを入力する場所はわかりやすいです。
「タイトルを追加」のところに記入していきましょう。

 

本文は、タイトルの下にある「本文をここに入力」とうっすら表示されているところに入力していきます。

 

 

基本の改行はshiftを使う!

 

Wordなどで改行するときはそのまま「Enter」を押すと思いますが、WordPressの改行は「Enter」だけではうまくいきません。

グーテンベルクで改行をするときは「Shift」+「Enter」で改行をしてください。

 

Enterだけの改行だと、こんな感じでブロックがどんどん増えて行ってしまいます

 

これを解決するには、[shift]+[Enter]での改行です。
WordPressを使うブロガーさんには欠かせないので、慣れていきましょう!

 

「Shift」+「Enter」だと、同じブロック内で改行ができます。

にっきー

Excelのときの「alt」を押しながらセル内で改行する感じに似ていると思います!

 

 

いらないブロックの消し方は?

 

グーテンベルクは「Enter」のみで改行をしたときに、文字の段落にあたる「ブロック」がどんどん増えてきます。
ブロックが多いと、文章群を並び替えるときにもとても不便な思いをするので、いらないブロックは消しておきましょう

 

 

いらないブロックに入力できる状態のときに「delete」キーを押すと、ブロックを削除できます。

 

 

見出しにする方法

 

文章を見出しにするには、ブロックの属性を変更することが必要です。

まず、見出しを入れたい箇所=本文を入力したブロックの上の段に、ブロックを1つ追加します。

にっきー

本文の先頭にカーソルがある状態にして、「Enter」を押すとブロックを増やせます

 

ブロックを増やせたら、見出しの文章を入力します。

入力ができたら、左上のPが反転した感じのマークを押して「見出し」を選びます

見出しブロックに変更した後は、「H2」「H3」などを変更することができます。

 

ちなみに、見出し2と見出し3はこんな感じの違いがあります。

選んでいるスキンによって装飾は異なりますが、共通して「見出し2」の方が大きな見出しで、「見出し3」の方が小さな見出しです。

 

 

終わりに

 

今回はWordPressのグーテンベルクの超基本操作をご紹介しました。

使い慣れた人のためにも紹介したい機能はまだまだたくさんあります!

今後の更新予定
  • 画像の挿入方法とサイズの変え方
  • 太字やマーカー装飾のやり方
  • リンクの貼り方
  • ボックス装飾(この枠みたいなやつ)の使い方
  • 吹き出し装飾の入れ方
  • TwitterなどのSNS情報の埋め込み方

使い方は、随時追記していきます!

 

にっきー

その他の操作方法のリクエストがある方は、にっきーにLINE@で話しかけるもヨシ、メルマガで返信するもヨシです!気軽に教えてください。

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)