Gutenberg

魅力とコツ

KANSO v0.9.7 から、少しだけ Gutenberg に対応させました。それに合わせて、Gutenbergの紹介と、使い方のコツを紹介します。

Gutenbergとは?

Gutenberg(グーテンベルグ)とは、誰もが世界史で習った、あの活版印刷を開発した人の名前です。活版印刷の発明のおかげで、本を大量に(といっても、今ほどではありませんが)印刷できるようになりました。

この活版印刷は、後にプロテスタントというキリスト教宗派を生み出すことにも貢献したと言われています。もちろん、プロテスタントの中心コンセプトである「聖書を中心とする」を可能にしたのも、活版印刷です。

さらには現代教育に大きな影響を与えた「教科書」も、活版印刷があってこそ広まったといえます。

そのような「大それた名前」を与えられたWordPressのプロジェクトがあります。それが、今回、v0.9.7で対応したものです。

詳しくは、WordPress.org の Gutenberg の紹介ページ をご覧ください。


以下では、Gutenberg を、私なりに簡単に説明し、使い方のコツを紹介します。

Gutenbergを有効にする方法

WordPressを最新バージョンにすることで、以下のようなメッセージがダッシュボードに現れます。青いボタンの「Gutenbergをインストール」をクリックし、有効かをすることで、使えるようになります。

Gutenberg のお知らせが表示されている

なお、「旧エディター」はインストールしておくと、WordPress5.0がリリースされた場合、昔のエディターを引き続き使えるようになります。ですので、一応インストールしておくと良いかもしれません。なお、有効化は行わないようにします。有効化すると、Gutenbergは使えません。

Gutenbergを有効にすると、投稿やページ作成のボタンが変化します。

投稿時にエディタを選べるようになります

投稿時にエディタを選べるようになります。また過去の記事やページもGutenbergで編集するか、旧エディターで編集するかを選べるようになります。

過去の記事をGutenbergで編集すると、記事全部が「1つのブロック」として表示されます。再編集する場合は、面倒ですが「ブロックの分け直す」作業が必要かもしれません。

Gutenbergの全体像

Gutenberg は、Notion.so や Ghost2.0 といった高機能だけど、使いやすいモダンなエディタです。画面構成は、以下のようになります。

一通り「ITを学ぶ5つのステップ」で触ってみると全体像が理解できると思います。しっかりと整理されていて、とてもスッキリしています。

情報パネル?で、見出し一覧をみて、長いコンテンツでも簡単に移動できたりします。

情報パネルなどを活用することで、文章全体を把握しながら、内容を作っていけそうです。

全体として、WordPress上で「内容を考えながら、同時に構造化と装飾も行える」ようなデザインになっていると思います。

ただし、ちょっとだけ「慣れ」が必要ですが、慣れてしまえば、とても便利で、気に入ってしまいます。まるで、Notion.so のようです。

Gutenbergをサクサク使うためのコツ

4つのポイントがあると思います。

(1) モダンなアプリだと思う

WordPressは、どちらかというと「古臭い」ソフトウェアのイメージがあります。エディタも、10年ぐらい前の仕組みだし、パソコンからのD & Dも古かったです。

出来るだけ、WordPressでは作業をせずに、原稿を作ってから貼り付けていました。

ところが、圧倒的にモダンになったので「考えながら作成する」ということも楽しくできます。書くことが楽しめる、そんなシステムになりました。これは、本当にいいことです。

なぜなら、ブログだけは「Ghost2.0を使おうかな?」と検討していたのですが、それをやめよう!と思わせてくれました。

話が前後しますが、モダンなアプリになったので、いろんなところをクリックすることで、様々な機能が現れて楽しいです。あちこち触って、できることを増やしていくと良いです。

また、画像は「パソコンから、ドラッグ&ドロップ」して使うのが便利です。アップロードもバックグランドでしっかり処理されて、サクサク使えます。

(2) Block になれる

Gutenbergは、「ブロック」という考え方で設計されています。文章をどんどん書いて、画像をアップロードなどすると「次々とブロック」が作られます。これについて、あまり深く考えず、なれるまで気にせず使います。

慣れてしまえば、とても使いやすく感じるのですが、なれるまでは「まごつき」ます。ポイントは、とにかく気にせず、使ってみることです。

(3) / (スラッシュ)を活用する

Gutenbergは、 半角スラッシュ( / ) を入れることで「ブロックの候補」を出してくれます。これがとても便利です。

見出しを入れたい場合は、/ を入れてから、見出しを選びます。そして、見出しのレベルを選択して、文字を記入します。なれると、最小のマウス操作で文章が作れます。

また、 / の後に、キーワードを入れることで、大量のブロックの種類から欲しいものを素早く探せます(日本語でも、英語でも検索にかかるようにして欲しいけど・・・)。例えば、/ショー と入れると、ショートコードブロックを探すことができます。

/の後に、検索文字を入れよう

(4) ブロックの変更を活用する

なお、通常の文章ブロックは「ブロックの変更」ができます。これは、Markdownエディタなどで、作成した文章を「ベタ」っと貼り付けた時に、見出し部分を修正するのに役立ちます。

ちょっとした注意点

今後、修正されていくと思いますが「いくつか、注意点」というか、気をつけるべきことがあります。

(1) 下書き保存してから、プレビューする

右側の文書の設定情報を変更しても、プレビューでは反映されないことがあります。例えば、アイキャッチを設定しても、プレビューでは表示されないなどが起こります。(KANSOなら、サブタイトルなどの設定)

これは仕様上の問題らしいです。どのような動作をさせるべきかは、議論沸騰中です

最新のGutenberg 3.6 の場合、「下書き保存ボタン」を押すことでプレビューに反映されるようです。

KANSOテーマの場合、サブタイトルや目次に表示などのオプションがありますが、これらを有効化したプレビューを確認するには、必ず「下書き保存」ボタンを押してから、プレビューをしてください。

(2) サイドバーやページ末尾でカスタム属性を設定

All in One SEO Pack や、KANSOテーマを使うと「ページに追加情報」を設定できるようになります。この追加情報は、サイドバーやページ末尾に表示されているので、そこで変更が可能です。

多分、すぐに見つけられるとは思います。

(3) パーマリンク設定を忘れずに

私は、ブログ投稿などでは「英語でパーマリンク(スラッグ)」を設定するようにしています。これがぱっと見わかりません。

ページタイトルを入れた後、再度、クリックすることで設定できます(これはわかりづらい・・・。文書の設定一覧で変更できるようにすればいいと思うのですが・・・。

とにかく、「下書き保存」→「タイトルを再度クリック」して、パーマリンクの変更をします。


楽しいWordPressライフを!

いいね:





コメント


コメントを残す

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