Word Press5.0(Gutenberg)が2018年12月にリリースされてからというもの、大幅な仕様変更に戸惑いの声が耐えません…。
どうやら、wixなどの初心者でも視覚的なデザインから簡単にブログを書けてしまうサービスが増えたことで、Word Pressも今回のGutenberg(グーテンベルク)では、視覚的なデザインを大きく取り入れることに踏み切ったようです。
しかし、使い慣れたデザインが大きく変わっただけではなく、Word Pressテーマの中には今回のアップデートに追いつけなかったものも沢山あったようなので、ユーザーの混乱は広がる一方のように感じます。
そこで、Word Pressテーマ「STORK」を使用したブログを準備して、Word Press5.0にの使い方や操作方法を研究してみました！
下記の動画内でも、記事を書く上で必要となる一通りの操作方法はご紹介できているかと思いますので、WordPress5.0を使用して記事を書きたいけれど、使い方がいまいち分からないという方は、ぜひ参考にしてみていただければと思います！
この記事で学べること・WordPress5.0/Gutenberg(グーテンベルク)の使い方と操作方法！
【動画で確認したい方はこちら】
※動画内では1記事書き上げるために最低限必要そうな作業を一通り解説してみました！
WordPress5.0Gutenberg(グーテンベルク)は何が変わったの？不便？
今回の一番の変更点は「エディター」です。
記事の投稿画面の仕様がかなり大きく変わりました。
この大きな使用変更により「不便」と感じる方も多くいらっしゃるようです…。
大きな変更点はエディターです。新しいブロックベースのエディターは、サイト全体に渡る効率的な編集体験がもたらす、わくわくする未来への第一歩です。初めてサイトを構築中の方、ブログをリニューアルする方、仕事でコードを書いている方、すべてのユーザーにとってコンテンツの見え方がもっと柔軟になりました。
このように、今までのWord Pressでは「文章を構築する」というイメージだったのが、今回のWordPress5.0からは、文章や写真など、それぞれの情報をまるで「ブロック」を積み重ねるように構築することができるようになっています。
このことによって、初心者でも簡単にブログを視覚的な感覚でデザインすることができるようになりました。
HTMLやCSSなど、初心者にとっては少し難しく感じてしまうような知識がほとんどなくても、ブログ記事をデザインすることができるようになったので、操作に慣れてしまえば楽しみながら記事を書けるようになります。
実際に、この記事を書くにあたって色々といじってみましたが、1時間もいじっていたら少しずつ慣れてきている自分がいて怖かったですね…。（人間ってすごい。笑）
今はまだ完全にWord Pressの仕様が5.0に移行した訳ではないので、今までのエディターを使用しながら作業を行うこともできますが、いずれはアップデートを繰り替えしながら、WordPress5.0に完全移行することも予想されますので、今のうちに慣れておいて損はないのかもしれませんよね！
WordPress5.0Gutenberg(グーテンベルク)の使い方操作方法を分かりやすく解説！
早速WordPress5.0Gutenberg(グーテンベルク)の使い方操作方法を解説していきます。
項目がとても多くなりますので、当記事上部の「もくじ」から必要な部分だけ確認してみることをオススメします！
記事タイトルの入れ方とパーマリンク設定
まずは、エディターを開くと「タイトルを追加」と大きく表示されるので、この部分から記事タイトルを入力していきます。
次に、パーマリンクの場所ですが「文書」の中を開いて見ると発見することができました。
…しかし、このままだとパーマリンクを変更することができなそうです。
そこで、「下書きとして保存」を一度クリックしてみると、下記の画像のようにパーマリンクを変更できる画面が表示されました！
最後に、「URL」の欄にパーマリンクを入力すれば完了です！
ちなみに…。
パーマリンクをまだ設定していない方は、下記のパーマリンクを使用することで自由にパーマリンクを切り替えることができますよ！
| /%category%/%postname%/ |
「ビジュアル」と「テキスト」モードはどこから切り替えるの？
以前のエディター画面に存在していた「ビジュアル」と「テキスト」モード。
今回は、画面右上の３つ点が並んでいるボタンから切り替えるようです。
「テキスト」は「コードエディター」という名前に変わっています。
ビジュアルに戻すときには、下記画像にあるように、「コードエディターを終了」にするか、設定の画面から戻す必要があるようです。
文字の入力方法
本文の文字入力は通常通り行えます。
エンターキーを押すと、行が変わり、次の新しいブロックが作られる形になっています。
下記画像にもあるように、一つの文字列が「ブロック」として扱われているため、まるでブロックを入れ替えるように、文字の並びを視覚的に簡単に移動することができます。
文字装飾1：文字色・背景色を変える
太字などは、文字入力時に表示されるので迷うことはありませんが、文字色などは一見どこから変更するのか分かりません。
文字色や背景色を変更したい場合には、対象となるブロック（文字列）を選択した状態で、画面右上にある「ブロック」を選択します。
すると、下記の画面に「色設定」の欄が表示されますので、そちらからも変更を行います。
しかし、ブロックごとの色設定になるようなので、下記の動作ができません。
・ブロック内にある文字の一部だけに色をつける。
・文字の背景だけに色をつける。（ブロック全体に色がつきます。）
ちょっと、不便ですよね…。
そこで、改善策として使用できるのが、下記の「クラシック」というボタンになります。
ブロックを追加する「＋」のボタンをクリックすると、そこに生成するものを選択できるようになりますので、「フォーマット」の中から「クラシック」を選びます。
…すると。
なんと、ブロック内だけでは「旧エディター」を使用できるようになりました！
この画面の中だと、下記のような文字色設定ができます。
ちなみに、クラシックエディターの中で作成した文字をブロックに変換させたいときは、エディター右上の点が３つ並んでいるボタンから「ブロックへ変換」をクリックすると、旧エディター内の文字がブロックとしてバラバラに生成され、旧エディター表示画面が閉じます。
文字装飾2：「サイズ変更」と「ドロップキャップ」
文字のサイズ変更も画面右にある「ブロック」の中で行います。
下記画像が表示されたときの実際の大きさと、サイズを記録したものになります。
参考にされてみて下さいね！
（※ブロック内にある一部の文字サイズを変更したい場合には、クラシックエディターを使用する必要があります。）
次に、新機能として登場したドロップキャップについてです。
ドロップキャップは、ブロック内の先頭にある文字を下記の画像のように大きく表示させることができる機能です。
文字だらけの記事を書いてしまうと、目が滑るのでこの機能も上手に活用しながらデザインをしていきたいですよね！
プレビューするとこんな感じになります。
見出しの付け方
見出しはブロックに文字を入力すると、すぐ左上に表示される詳細設定の部分から設定することができます。
「変換」→「見出し」を選択してブロック内の文字を見出しに設定します。
実際の見出しサイズと設定は下記の通りです。
テーブル(表）の入れ方
テーブルを作成する場合にも、用途に合わせて「クラシック」を上手に組み合わせた方が良いです！
まずは、WordPress5.0エディターのみでできるテーブル(表)の作り方から解説しますね！
「＋」マークから「フォーマット」→「テーブル」を選択するとテーブル(表)を作成することができます。
「列」と「行」の数を用途に合わせて「生成」をクリックするとテーブル(表)が完成します！
テーブル作成後は、画面右上の「ブロック」から「通常」or「ストライプ」のデザインを選択することができるようになります。
しかし…。
ここからは、テーブル(表）の一部に色をつけたりすることができないため、「クラシック」を使用して旧エディターから表に色をつける必要があります。
画像の入れ方
画像の入れ方は数種類あるようです！
画像を1枚入れてサイズを変更する方法
「＋」ボタン→「一般ブロック」→「画像」を選択します。
メディアを選ぶか、ドラッグアンドドロップで挿入できます。
画像を挿入後は、画像の右と下についている青い丸にカーソルを合わせて移動することで、画像のサイズを簡単に変更することができます。
メディアと文章：画像＋文章を入れる方法
一つのブロック内に「画像」＋「文章」を入れることができます。
「メディアと文章」を選択します。
下記のように表示が切り替わりました。
カバー：画像の上に文字を挿入する方法
画像編集ソフトを別に立ち上げてわざわざ編集をしなくても、WordPress上で画像の上に文字を入れることができるようになりました。
「カバー」を選択します。
下記の画像のように、画像上に簡単な文字を挿入することができます。
ギャラリー：画像をまとめて数枚挿入する！
1つのブロック内に画像を数枚まとめて挿入することができるようになりました！
旅先で撮影した画像を沢山使用したい場合などには、便利な機能ですよね。
３枚入れると改行されて、4枚目ごとに大きく表示されます。
まとめ
かなり大きな変更があったWord Press5.0。
記事作成の上で戸惑いを感じてしまうのは仕方のないことですよね…。
しかし、「できること」も増えたようですので、さらに記事のデザインをこだわりたい方などは挑戦してみてはいかがでしょうか？
この記事がお役に立てたら嬉しいです。
ご感想いただけたら嬉しいです！(コメント欄はアウトプットにもご活用ください)