新WordPressテーマ「THE THOR(ザ・トール)」へ改装完了!
Gutenbergアイキャッチ

【WordPress】新エディター「Gutenberg(グーテンベルク)」の使い方

WordPress5.0から実装される新エディター「Gutenberg(グーテンベルク)」のことはご存知ですか?

WordPressでサイト運営されている人なら、WordPressにログインした時にダッシュボードのホームで「Gutenberg(グーテンベルク)」の通知が来ていると思うので、気になっている人も多いと思います。

僕もちょうど気になっていたので、今回は「Gutenberg(グーテンベルク)」の使い方について現在分かる所まで説明したいと思います。

タケ坊
タケ坊
新エディター。新って付くと気になりますよね!
柚子
柚子
も~、新しいもの好きなんだから~

Gutenberg(グーテンベルク)とは?

Gutenbergとは?

まず、「Gutenberg(グーテンベルク)」とは何でしょう?

WordPress5.0から実装されるエディターだというのは分かりますが、名前も強そうな感じだし、ちょっとGutenberg(グーテンベルク)について調べてみました。

エディター名の由来

2018年8月現在、開発中とのことで、今はプラグインとしてベータ版が無料で配布されています。

Gutenberg(グーテンベルク)の名前の由来は、14世紀の「活版印刷技術」の生みの親であるヨハネス・グーテンベルク(正式名ヨハネス・ゲンズフライシュ・ツール・ラーデン・ツム・グーテンベルク)に因んで付けられたそうです。

まぁ、名前の由来なんて新エディターの内容とは関係ないので興味はないのですが、一応Wikipediaから引用しますので興味がある人は読んでみてください。

ヨハネス・ゲンズフライシュ・ツール・ラーデン・ツム・グーテンベルク

ヨハネス・ゲンズフライシュ・ツール・ラーデン・ツム・グーテンベルク(ドイツ語: Johannes Gensfleisch zur Laden zum Gutenberg、1398年頃 – 1468年2月3日)は、ドイツ出身の金属加工職人、印刷業者である。印刷に改良を加えた活版印刷技術の発明者といわれ、広く知られている。
グーテンベルクの古い記録は、裁判記録以外ほとんどなく、活版印刷技術の真の発明者は誰かという論争が古くから行われてきたが、グーテンベルクとする説が最も有力である。1445年までに活版印刷技術を考案し、その機器の実用化に成功して、自ら印刷業・印刷物出版業を創設したといわれる。金属活字を使った印刷術を発明したことで印刷革命(英語版)が始まり、それが一般に中世で最も重要な出来事の1つとされている。活版印刷はルネサンス、宗教改革、啓蒙時代、科学革命の発展に寄与した。
1439年頃にヨーロッパで初めて活字による印刷を行った。活字量産方法の発明、油性インクの採用、当時使われていた農耕用スクリュープレスのような木製印刷機の採用など、様々な面で印刷に貢献している。真の画期的発明といえるのはそれらを組み合わせて実用的システムとしたことであり、それによって本の大量生産を可能にし、印刷業者にとっても読者にとっても経済的に成り立つようにした。グーテンベルクの活字生産方法の目新しい点は、古くから活字合金の発明とパンチ法と呼ばれる鋳造技法といわれていた。
それまでヨーロッパでの本の生産は手書きでの「書き写し」か木版印刷であり、活版印刷はヨーロッパでの本生産に一大変革を起こした。活版印刷具は急速にヨーロッパ各地に普及し、さらに世界中に広まっていった。印刷技術は羅針盤、火薬とともに「ルネサンス三大発明」の一つにあげられる。
1455年に初めて旧約・新約聖書(ラテン語版)つまり『グーテンベルク聖書』を印刷したことで有名である。この聖書は美麗で技術的にも高品質だと賞賛されている。

(引用元:Wikipedia)

柚子
柚子
まぁ革新的発明をした凄い人ってことですね!
このエディターも革新的な発明ってことで、この名前を貰ったのでしょう

Gutenberg(グーテンベルク)の使い方

使い方

それでは実際に使い方を説明していきましょう。

WordPress5.0から正式に実装されるので、今回はベータ版で無料配布されているプラグイン「Gutenberg(グーテンベルク)」で説明します。

Gutenberg(グーテンベルク)のインストール

まずはプラグインをインストールします。

2018年8月現在は、ダッシュボードのホームに通知があるので、ここからインストールができます。
ダッシュボードからインストール

または、管理メニュー画面のプラグイン新規追加⇒Gutenberg
プラグイン新規追加からインストール

WordPress公式サイトからダウンロードもできます。

公式サイトからダウンロード

柚子
柚子
プラグインのインストール方法はコチラの記事で詳しく説明してるよ!
関連記事

タケ坊 今回はWordPressの基本の1つ、プラグインのインストール方法について話しましょうか。 柚子 そーだね!ところで、そもそもプラグインが分からないって人はいないかな? タケ坊 […]

WordPressプラグインのインストール方法
柚子
柚子
プラグインをインストールしたら有効化を忘れないでね!

 

Gutenberg(グーテンベルク)編集画面

それでは実際に記事を書いてみましょう。

管理メニュー画面の投稿⇒新規追加をクリックします。

編集画面の解説

編集画面の説明です。

投稿の新規追加をクリックすると最初の編集画面が表示されます。
編集画面

画面左上部分は、ブロック追加ボタン・リドゥボタン・アンドゥボタンがあります。
ブロック追加ボタン他

画面右上部分には、左から「プレビューボタン」「公開ボタン」「サイドバー表示切替ボタン」。
一番右が、ビジュアルエディター・コードエディター(旧テキストエディター)の切替えや、ツールバーの表示設定などを設定します。
プレビュー公開ボタン他

画面中央部分が編集画面です。

ここで①タイトルを入れたり、②記事本文や画像を追加していきます。
タイトルや記事画像を追加

画面右側のサイドバーは、ドキュメントとブロックのタブです。

「文書」と書かれたドキュメントタブで記事の公開状態やカテゴリー、アイキャッチ画像などを設定します。カテゴリーやタグを設定

「1個のブロック」と書かれたブロックタブには、ブロックごとのスタイルを設定できます。

ここではブロックごとに文字色を変えたり、大きさを変えたりできます。
ブロックタブ

ブロックの種類

ブロックの種類

従来のWordPressでは、記事を作成する時はワープロの様に上から順に文字を入力し、画像や動画などの要素を挿入していきます。

もちろん、カット&ペーストや間に要素を挿入することはできましたが、文章や画像の配置を簡単に入れ替える様なことはできませんでした。

しかし、「Gutenberg(グーテンベルク)」は文章や画像をブロックごとに分けて管理することで、ブロックを移動させてレイアウトを自由に変更することができます。

そのブロックですが、各要素ごとに種類が分かれているようです。どんな種類があるのか見てみましょう。

おおまかに7つのカテゴリーに分かれています。

  • よく使うブロック
  • インライン要素
  • 共通ブロック
  • 書式設定
  • レイアウト要素
  • ウィジェット
  • 埋め込み

よく使うブロック

直前まで使ったブロックが最大9個まで記憶されます。

よく使うブロック

インライン要素

インライン画像などが格納されています。

インライン要素

共通ブロック

見出しや画像ブロックなどが格納されています。

共通ブロック

書式設定

コードや引用ブロックなどが格納されています。

書式設定

レイアウト要素

ボタンや「続きを読む」などレイアウトに関する要素が格納されています。

レイアウト要素

ウィジェット

カテゴリーや最新記事などのブロックが格納されています。

ウィジェット

埋め込み

TwitterやYouTube、Instagramなどの外部要素の埋め込み用ブロックが多数格納されています。

埋め込み1埋め込み2埋め込み3埋め込み4

記事作成の実例

それでは実際に記事を作成してみましょう。

今回の記事の下書き状態のものを使ってGutenbergで書いてみます。

タイトル(h1)を入力

まずはタイトル(h1)を入れます。
タイトルを入れます

これは特に問題ないですね。

柚子
柚子
ちなみに、タイトル部分をクリックすると、パーマリンクの編集ができます。

文章を追加する

次は文章を追加しましょう。

タイトル下の「本文をここに書く」に文章を書いていきます。

または、左上の「ブロックの追加」から「書式設定」⇒「段落」をクリックします。

面倒だったので、冒頭文をコピペしました。
文章を入力

特に何もしていないのですが、赤枠にように段落ごとにブロック分けがされました。

Enterキーで改行すると自動的にブロックが分けられるようですね。

ちなみに、一番上の段落ブロックには、コードで黄色のマーカー線を付けています。

プラグインAddQuicktagが使えない通常の段落ブロックでは、ブロック右の縦3点マークの「追加オプション」⇒「HTMLとして編集」からコードを追記しましょう。

どうしてもAddQuicktagを使いたい場合は段落ブロックを使わずに、「ブロックを追加」から「書式設定」⇒「クラシック」ブロックを選んで文章を作成しましょう。
クラシックブロック

関連記事

タケ坊 今回は、WordPressで記事を書く時に普段よく使うHTMLコードや、挨拶などの定型文を簡単に記事に挿入できるプラグイン【AddQuicktag】について書いていきます。 柚子 この【AddQui[…]

AddQuicktag

クラシックと書かれた帯をクリックするとツールバーが表示されます。

「More」ボタンをクリックするとすべてのツールが表示されますよ。
クラシックツールバー

会話風の吹き出しを入れる

次に吹き出し会話の部分を入れてみます。

ショートコードを使っているので、左上「ブロックの追加」から「ウィジェット」⇒「ショートコード」をクリックするか、ブロックの右下「[ / ]」マークをクリックしてコードを入れます。
ショートコードを入力

見出しを追加

次は見出しを追加します。

「ブロックの追加」から「共通ブロック」⇒「見出し」をクリックするか、ブロック右下の「H」マークをクリックします。

赤枠部分でH2からH4まで選べます。
見出しを追加する

画像を追加する

次は画像を追加します。

「ブロックの追加」から「共通ブロック」⇒「画像」をクリックします。

アップロードするかメディアライブラリから選択します。ドラッグ&ドロップでもアップロードできます。
画像ブロックをクリック画像を追加

画像の下に「キャプション」を追加できます。

引用文を追加

順々に文章と見出し(H3)を追加していき、次は引用文を追加します。

本記事では最初、人物画像を引用文の中に入れてたのですが、Gutenbergでは引用文の中に画像を追加することができなかったので(僕がやり方を知らないだけ?)引用文の前に画像ブロックを入れることにしました。

画像ブロックを追加したあと、「ブロックの追加」から「共通ブロック」⇒「引用」をクリックします。

引用文をコピペし、引用元を入れます。
引用文追加引用元が自動で縮小

文章にリンクを追加する

本文の一部分にリンクを付けます。

「ブロックを追加」から「共通ブロック」⇒「段落」で文章を入力します。

上部に「リンク」ボタンが出るので、リンクさせたい部分を選択して「リンク」ボタンをクリックするとリンクメニューが出ます。
リンクメニュー

新しいウィンドウで表示させることもできます。

しかし、旧エディターにあった「既存の記事にリンク」の項目が見当たりませんね。

その辺りはちょっと不便かもしれません。

Twitterを埋め込む

記事にTwitterを埋め込んでみましょう。

「ブロックの追加」から「埋め込み」⇒「Twitter」をクリックします。
埋め込みTwitterブロック

Twitterの埋め込みURL「ツイートへのリンクをコピー」でURLをコピーして入力します。
Twitter

埋め込み完了です。
埋め込み完了

ブロックを入れ替える

作成したブロックを上下自由に入れ替えることができます。

ブロック左側に上下に移動させるボタンがあるので、任意の場所まで移動させます。ブロック入れ替え

旧エディターで作った記事をGutenbergに変更したら?

旧エディターで作成した記事(記事)をGutenbergで表示させてらどうなるのでしょう。旧エディターから新エディターへ変換

タイトル以外の全要素がクラシックブロック1つに入っている状態です。

新エディターになっても、旧エディターで作成した記事の修正等は問題なくできそうですね。

プレビューで出来を見てみよう

これまでで作成してみた記事をプレビューで見てみましょう。

特に問題は無いように見えますね。

しかし、この時に何の気なしに旧エディターに戻してプレビューを見たら、変なところが出てきました。

テスト記事プレビュー2

赤枠の部分は、Twitterの埋め込みブロックがあった場所です。

どうやら、ツイートのリンクURLだけが表示されてるようですね。

何故こうなるかは不明ですが、新旧のエディターを使い分けている人は、この辺は注意した方が良いかもです。

新エディター「Gutenberg(グーテンベルク)」使ってみた感想

使った感想

このエディターの一番の特徴は、文章や画像・動画など、それぞれの要素を1つのブロックとして管理して、そのブロックを前後に動かしレイアウトを自由に変えて、より直感的にブログサイト作成ができるエディターになります。

しかも、そのブロックを名前を付けて保存することで、ブログサイト全体で使いまわしができる仕様になっています。

僕は使ったことはないのですが、例えば「Page Builder By SiteOrigin」の様なページビルダープラグインみたいなものでしょうか。

【WordPress.org】Page Builder By SiteOrigin

触ってみた感触としては、従来のエディターとまったく違う操作感で、慣れれば使いやすいのかなぁって思いました。

確かに、よりプレビュー画面に近い編集画面で、文章や画像などがブロック毎に管理できるのは、ブログサイト作成初心者なら使いやすいのかもしれません。

記事それぞれの要素をブロックごとに分けて管理し、そのブロックを積み、または積み替えをする。

このブロックごとに管理し利用するという考え方は、この先色々な面で便利になりそうな気はしています。

しかし、従来のWordPressのエディターに慣れている僕には、まだまだ使いづらく何か自由度がなくなったような印象を感じました。

今後WordPress5.0で正式に実装されても、しばらくは簡単な構成の記事なら慣れるためにもGutenbergを使って、ちょっと凝った構成の記事を書く時は旧エディターで書くといった使い分けをしようかなぁって思ってます。

柚子
柚子
まぁ、まだ現在は開発途中のベータ版プラグインなので今後いろいろと改善改良されていくはずです。今後に期待しましょう!

Gutenberg(グーテンベルク)プラグインの注意点

注意点

このエディターは、まだ完成していないベータ版のプラグインということを踏まえて、いくつか注意点があります。

現在は開発途中のベータ版

2018年8月現在では、あくまでも開発途中のベータ版だということを忘れないでください。

新エディターの正式な実装までは、慣れるまでの練習プラグインだと思って使ってください。

文字数が表示されない

従来のエディターでは左下に文字数が表示されるのですが、Gutenbergに切り替えると表示が消えてしまいます。

僕は文字数を気にして記事を書くので、けっこう「文字数:」がないと落ち着きません。

柚子
柚子
細かいところですが、ここを改善してくれると個人的に嬉しいです。

コードエディターではよく使うタグが表示されない

僕はもっぱらビジュアルエディターでしか記事を書かないので、あまり興味はないのですが、従来のテキストエディターのツールバーで見られたような、よく使うタグのボタンが見当たりません。

一応よく探したつもりですが、どこかに隠れているのでしょうか?

それともコードエディターとテキストエディターは扱いが違うのでしょうか?

柚子
柚子
情報求む!

更新されていないテーマやプラグインが正常に動かない可能性

頻繁に更新されているテーマやプラグインなら、Gutenbergに影響されそうな場合はすでに対応しているか、近々対応されることでしょう。

問題は更新されなくて数年経過していて、今でも利用されているようなテーマや特にプラグインなどは正常に機能しない可能性はあります。

おそらくGutenbergの開発関係者は、そういった旧エディターやプラグインなどとの互換性を考慮して開発してくれていると思いますが、正式に実装されるまでは分かりません。

当面はWordPress5.0にアップデートされて、Gutenbergが正式実装されても慎重に利用しましょう。

柚子
柚子
何か情報が入りしだい、報告しますね!

WordPress新エディター「Gutenberg(グーテンベルク)」のまとめ

まとめ

いかがでしたか?

今回はWordPress5.0に正式実装されるというエディターツール「Gutenberg(グーテンベルク)」についての説明と簡単な使い方を解説しました。

2018年中にはWordPress5.0へアップデートされるという話しなので、今のところはプラグイン版で解説しましたが、だいたいの感じは掴めたかと思います。

タケ坊
タケ坊
正式に実装されるのが楽しみのような怖いような、、ちゃんと憶えて使いこなせるかな~
柚子
柚子
TAKE-PRESSの管理人なんだから、頑張って覚えてね!
Gutenbergアイキャッチ
最新情報をチェックしよう!