【WordPress】5.0以降から導入された新エディター「Gutenberg」で誰でも簡単にブログ記事を書かける手順を紹介するよ【画像あり】

スポンサーリンク
WordPress&ブログ
スポンサーリンク

WordPressでブログを書いてる皆さん、
WordPressは5.0にバージョンを上げましたでしょうか?

私はせっかくのブログの画面が真っ白になったら嫌だなと思い静観していたのですが、
いつまでもバージョンアップしないのも、セキュリティの観点から上げてみました。

そこで「Gutenberg」と呼ばれる新しいエディターに変更に伴い、
記事の投稿画面も同様に変わった為、戸惑った話を私の備忘録がてら書いていきます。
(ブログを書きながらブログの投稿画面の話を書くのってヘンテコな話w)

スポンサーリンク

今回のWordPressのバージョンアップは メジャーアップデート

さて普段何気なくWordPressのバージョンアップを行っているかと思いますが、
「メジャーアップデート」と「マイナーバージョンアップ」の2種類があるのを知ってました?

「メジャーアップデート」は新しい機能の追加する対応を指します。
「マイナーバージョンアップ」は既存のバグの修正やセキュリティ上の対応を指します。

Q.どこで「メジャーバージョンアップ」と「マイナーバージョンアップ」を区別したらいいの?
A.バージョン情報が〇.〇.〇だった場合(※〇は任意の数字が入ります。)、
 小数点の右側の数値が上がれば「マイナーバージョンアップ」で、
 いちばん左側の数字が上がる場合は「メジャーバージョンアップ」になります。

例)今回のWordPressを例に挙げると、前回バージョン「4.9.9」から「5.0」に上がりました。
  その為、「メジャーバージョンアップ」となると言えます。
  そして私は「4.9.9」から現在「5.0.3」に上げている為、
  「4.9.9」から「5.0」までを「メジャーバージョンアップ」、
  「5.0」から「5.0.3」までを「マイナーバージョンアップ」していることになります。
  (2018年1月14日現在)

ちなみに現在使用しているWordPressのバージョン情報は、
管理画面の「ダッシュボード」から画面上部の「概要」から確認することが可能ですよ。

ブログ投稿画面がめっちゃ変わってた

な、なんじゃこりゃあああああああ・・・!?

第一声がコレでした。
マナカナこと「茉奈 佳奈」と「倉科カナ」くらい別モンになっとるやんけ。
マナカナマナカナマナカナ・・・と10回言ってみて?
じゃあ「竹野内豊」と結婚したのは?
聞いたあと、あうあうあとなるくらい戸惑いましたよ。(謎の例え)

昔のエディターバーが完全に変貌してしまってるし、
左側に+マークが付いてるし、右上にブロックとか訳の分からない単語が入っています。


昔のエディターを返してよぉー!!あの頃のエディターを返してよぉー!!(涙)

「Gutenberg」 のブロック形式を理解する

泣いていても始まりません。
これまでのエディターでは「見出し」「本文」「画像」等を1つの画面上に入れていました。
しかしWordPress5.0以降の「Gutenberg」では新しくブロック形式が導入がされました。

ブロックとはめっちゃ簡潔に言ってしまいますと、
1つ1つの項目を分割し、最終的にはそれらの項目を合体して1つの記事とします。

ブロック①では見出し(タイトル)だけを入れて、
ブロック②では見出し(タイトル)に対する本文を入れます。

ブロック③以降は「画像」を入れるなり、
新しい見出し(タイトル)を入れるなり、表を入れるなりその辺りはお好みで。

自作のペイントで描いたので、多少見ずらいかもしれませんがイメージ図です。

ガンプラをイメージすると分かりやすいかもしれません。

ガンプラを作る時って「頭パーツ」「脚パーツ」「腕パーツ」「胴体パーツ」を作った後、
ガチャコーン☆とそれぞれの各パーツを接続させることで、
「やった!ガンダムが完成した!」となりますよね。ブロック形式も同じイメージで構いません。

「Gutenberg」 でブログの記事を書いていこう(見出し編)

ブロック形式になぞって記事を作成していきます。
私もそうなんですが最初に「見出し」(項目)をブロックで作り、
その見出しに対する本文(項目)ブロックを書いていくと思います。

画面左側の「+マーク」をクリックして、「見出し」のアイコンを選択します。
「見出し」のアイコンを選択するとブロックに見出しが表示されます。

あとは状況に応じて「h2」「h3」「h4」を選択してください。

「Gutenberg」 でブログの記事を書いていこう(本文編)

さて、いよいよブロガーの命綱とも呼べる本文作成のお時間でっせー!
私は慣れるまで普通に下記の「文章を入力、または/でブロックを選択」、
と書かれているスペースから文字を入力して本文を書いていたんです。

気を付けてください、ここはWordPressのトラップなんで選択しないようにw

文字装飾のパターンが新しくなっていて、
異常なほどパターンが少なく、絶望しか生まれない瞬間です。
(まどマギの世界だったら間違いなく私は魔女になっとるわ)

新しくWordPressを5.0から始めた方なら問題ないかもしれませんが、
前々からWordPressを書いていた方ならば、
「文字の装飾パターンが少なすぎワロタw」
「装飾少なくて草不可避」とツッコミ入れるところです。

ここだけで私もやっぱり古い方の「Classic Editor」に戻したい!
あの使いやすいエディターでノンストレスで記事を書きたい!
という気持ちが強く沸きました。が、ちょっと待って欲しい。

実はちゃんと従来のようなエディターが用意されているんです。


「見出し」のブロック作成と同様、
左側の「+マーク」から「クラシック」を選択してください。

(゚∀゚)キタコレ!!

リアルに↑のような顔した瞬間です。
見つけた時はほんとに嬉しかった、ほんとに安堵したんです。
これから先ずーっとあんな少ないバリエーションで、書き続けるモチベーションありませんもん。

画像を見てもらえれば分かりますが、
WordPressで書き続けてきた皆さんには馴染みのあるバーですよね。

しかも以前よりも「スタイル」のプルダウンから視覚的に分かりやすく、
引用符に関しても以前では「ビジュアル」と「テキスト」を切り替え無ければならず、
私は<blockquote></blockquote>をわざわざ辞書登録してましたからね。

注意!本文を書く上でEnterキーで改行できなくなってしまった

いままではEnterキーを押すことで次の行へ改行できていましたが、
「Gutenberg」からEnterキーを押してしまうと新しいブロックが作成されてしまいます。
※改行されません!

同じ文章の延長線で見やすくする為に改行したのであれば、
必ず「Shiftキー」+「Enterキー」を押すことで改行することができます。

これも知らないと絶対に戸惑うところで、私もあれ?あれれ~?となりました。
「Shiftキー」+「Enterキー」は改行と覚えておきましょう。

「Gutenberg」 でブログの記事を書いていこう(画像挿入編)

さて、最後は画像挿入編です。

ここは一番、簡単かもしれません。
お馴染みの左側の「+マーク」から「画像」を選択してください。

「アップロード」「メディアライブラリ」「URLから挿入」の画面へと遷移します。
あとは従来通りいずれかを選択するだけなので、特に抵抗感は無いと思います。

「Gutenberg」 でブログの記事を書いていこう(ブロック削除編)

「間違えてブロック作成しちまった!!」という時。
私はおっちょこちょいがひどく、よくやってしまうんですよね~。

その場合はブロックをクリックしてから、
画面上部の「・・・」を縦に並べたアイコンをクリックします。

その中から一番下の項目にある「ブロックを削除」をクリックすることで、
該当のブロック自体を削除することが可能です。


※ちなみに削除するブロックを間違えてしまったぁぁぁ!!あばばばばば・・!!(涙)
となった場合、Windowsですと「Ctrlキー」+「Zキー」で削除する前に戻せますよ。

「Gutenberg」 でブログの記事を書いていこう(ブロック移動編)

あとはブロックそのものの移動ですね。
全体図を見返してみて文脈の前後がおかしい時とか、
こうした方が分かりやすい時など、ブロック単位で順序を入れ替えることが可能です。

ブロックをクリックしてから、
左側の「上矢印」もしくは「下矢印」をクリックすることで、該当のブロックが移動します。
※前後のブロックは削除されません、あくまで位置が入れ替わるだけです。

まとめ

ブロック構成は「見出し」「本文」「画像」等の項目を分けて、
最終的には1つの記事としていくイメージ感じです。

最初は戸惑うこともあると思いますが、
記事を書いていく内にだんだん慣れてくると思います。

 

「Classic Editor」プラグインを使えば従来のエディターで書くことも可能ですが、
サポートが2021年末までとなっているため、ただの延命処置にしかなりません。
ブログはあと2年も続けないと分かっているのならば止めませんが、
否が応でも新しいエディターを迎える必要があるので、慣れておきましょう。

また最後になってしまいましたが、
下記の3つのアイコンからでも「クラシック」「見出し」「画像」ブロックの作成が可能です。
こっちの方が簡単ですね。
(この記事を作っていく内に発見してしまいましたw)

慣れると意外と快適ですね。

※2019年3月7日追記

旧エディターである「Classic Editor」は2021年サポート終了に伴い、
新エディターである「Gutenberg」に移行しないと後悔する記事を書いてみました。
よろしければこちらもどぞどぞ!

ではでは、こんなところでばいきゅ!

コメント