Saitama WordPress Meetup Vol.1 「Gutenberg を知ろう！」

WordPress5.0で導入された新エディター「Gutenberg」について、12/16時点での使い方をさらっとご説明します。

Transcript

1. Saitama WordPress Meetup Vol.1 「Gutenberg を知ろう！」
2. 自己紹介 堀内　大輔 株式会社コミュニティコム 【趣味】 スポーツ観戦(野球・バスケ) 週１でバスケサークルで汗を流してます。 最近、人の集まりが悪いので是非。 大型連休に楽天イーグルスの試合を観戦し に、仙台へ行ったり。牛タン食べたり。
3. はじめに 先日リリースした、WordPress5.0で導入された新エディター 「Gutenberg」について、実際使ってみた所感などを皆さんと共有していければ と思います。 もちろん、皆さんからのツッコミやご指摘も大歓迎です！ 一緒に理解を深めていきましょう！
4. もくじ 1.新エディター「Gutenberg」とは？ 2.Gutenbergの基本的な使い方 3.基本ブロックについて 4.使ってみた所感 5.実際に使ってみよう
5. もくじ 1.新エディター「Gutenberg」とは？ 2.Gutenbergの基本的な使い方 3.基本ブロックについて 4.使ってみた所感 5.実際に使ってみよう
6. 1.新エディター「Gutenberg」とは？ WordPress5.0から導入された、新しいエディターです。 レゴのようにブロックを積み重ねていくだけで、人を惹きつけるすばらしいコンテ ンツを構築できる。という夢のようなツールです。(大ウソ) ブロックを積み重ねていくだけでコンテンツを構築することができるところは本当 です。 WordPress4.9.8までのTinyMCEエディター(旧エディター)とは、 インターフェースがガラッと変わります。
7. ちなみに。。。 「Gutenberg」の名前は、活版印刷技 術の生みの親である 【ヨハネス・グーテンベルグ】さんから 取ったらしいです。→→→ https://commons.wikimedia.org/wiki/File:Gutenberg.jpg フルネームは、 ヨハネス・ゲンズフライシュ・ツール・ラーデン・ツム・グーテンベルク 長い！！
8. もくじ 1.新エディター「Gutenberg」とは？ 2.Gutenbergの基本的な使い方 3.基本ブロックについて 4.使ってみた所感 5.実際に使ってみよう
9. 2.Gutenbergの基本的な使い方 ①ツールバー 選択しているブロックで使用可能なツールが表示されま す。 ②コンテンツエリア ここでブロックを重ねていきコンテンツを作成していきま す。 ③エディター設定 選択したブロックの編集やクラスなどの設定、 文章タブでは公開設定などがおこなえます。 ① ③ ② 各呼び方は勝手にそう読んでいます汗
10. 2.Gutenbergの基本的な使い方 ・タイトルの入力 [タイトルを追加]の部分にタイトルを入力しま す。 右図のSaitama Meet Upの部分。 タイトルを入力すると、パーマリンクの設定がで きます。
11. 2.Gutenbergの基本的な使い方 ・コンテンツの入力 1．ブロックを選択する。 2．ブロックを編集する。 3．次のブロックを選択する。 4．ブロックを編集する。 これを繰り返してコンテンツを作っていきます … 旧エディターとの違いは、このブロックを次々と重ねていくところにあるかなと思います。
12. もくじ 1.新エディター「Gutenberg」とは？ 2.Gutenbergの基本的な使い方 3.基本ブロックについて 4.使ってみた所感 5.今後に期待するところ
13. 3.基本ブロックについて 2018年12月16日現在、全部で６４種類も・・・！
14. 3.基本ブロックについて 埋め込みブロックは他に３０種類以上ありますが、使わなさそうなブロックばかりなので今回は 割愛します。
15. 3.基本ブロックについて 段落 文章を書くときに使用します。ブロックのデフォルトはこの段落ブロックになっています。 中央揃え、右揃えや太字・斜体・リンクなどの設定が可能です。 また、設定エリアで文字色や背景色も設定することができます。
16. 3.基本ブロックについて 見出し 見出しを書くときに使用します。ブロック上では H2〜H4までしか表示されていませんが、 設定エリアでH1〜H6まで設定できます。 ただ、段落ブロックと違い文字色や背景色の設定ができません。。。 (なぜ！)
17. 3.基本ブロックについて 画像 画像を挿入できます。 設定エリアでサイズの変更やリンク、代 替テキストの設定ができます。 キャプションが簡単に入れられるのはと ても嬉しいですね。
18. 3.基本ブロックについて リスト リストを作成できます。 順序つきリストやリストの入れ子もできます。
19. 3.基本ブロックについて ギャラリー 写真を選択して、ギャラリーを作成することが できるブロックです。 写真にキャプションを付けられたり、設定エリ アで横並び数を設定することができます。 レスポンシブにも対応しています。
20. 3.基本ブロックについて カバー 背景に画像を指定して、その前面に文字を入 れることができます。 設定エリアでオーバーレイの色や透明度を設 定できますが、文字色は設定できません。。。 固定背景をオンにすると、プチパララックスの ようなが設定できます。
21. 3.基本ブロックについて テーブル はじめに列数と行数を設定します。 テーブルが生成されますが、現状入れ子やセ ル内に画像などを挿入できないので、とても不 便に感じるブロックの一つです。 設定エリアで表のスタイルを変更できます。 (下 の図)
22. 3.基本ブロックについて カスタムHTML HTMLを直接記述できるブロックです。 前述したtableブロックが使い物にならな い少し不便なので、このブロックで代用す ることが結構ありました。
23. 3.基本ブロックについて クラシック 旧エディターが使えるブロックです。 これにプラグイン「Tiny MCE Advanced」を有効化すると、ちゃんと拡張されます。 テーブルもこれでやれば楽勝じゃ。。
24. 3.基本ブロックについて カラム 神ブロックです。 ・・・失礼しました。カラムブロックです。 これは旧エディターには無かった カラム分けができるようになる優れものです。 図のように背景色や文字色も変更ができ、入れ子もできる。 しかもレスポンシブ対応！！！　これは個人的に神ブロックだと思います。
25. 3.基本ブロックについて ボタン 簡単にボタンを作ることができるブロックで す。 背景色、文字色も変更できます。 さらにボタンの種類も、 角丸・角丸なし・アウトラインの３種類から選 択することができます。
26. 3.基本ブロックについて メディアと文章 画像と文章を横並びにできるブロック。 テキストの総量(高さ)の中央に画像が配置さ れ、逆に画像のほうが高い場合はテキスト が上下中央に配置されます。 画像とテキストを左右逆転させることも簡単 にできます。
27. 3.基本ブロックについて スペーサー コンテンツ同士の余白を開けたいときにこのブロックを使います。 今まではエンター連打して間隔調整してませんでしたか？　それでは空の Pタグが生成されてしま いよろしくありません。このスペーサーを使えばそんな煩わしさともおさらばです！ 設定エリアでpx数を決めることができるので、思い通りの余白を作れます。
28. 3.基本ブロックについて 区切り 区切り線を引きたいときに使います。 図の上から、短い線・幅広線・ドットの３種 類スタイルがあります。 現状は短い線と幅広線は同じで、横目 いっぱいに区切り線が表示され、ドットは 見たまんま真ん中にちょんちょんちょんと 表示されます。
29. 3.基本ブロックについて アーカイブ ウィジェットでおなじみのアーカイブです。 リスト表示かドロップダウン表示か選択することができます。 投稿数なんかも設定できます。
30. 3.基本ブロックについて カテゴリー こちらもウィジェットでおなじみのカテゴリー一覧を表示させることができるブロックです。 アーカイブと同様に、リスト表示 /ドロップダウン表示、投稿数を選択することができます。 子カテゴリーも表示することも可能です。
31. 3.基本ブロックについて 最新の記事 投稿リストを表示できます。 カテゴリーで振り分けることができるので、このページには Aカテゴリーの投稿一覧を、別のページで はBカテゴリーを載せたいな。なんていうことにも簡単に応えることができます。 カテゴリーはエディター右の設定エリアで選択できます。 制作側からすると、ループコードを書かないでいいので、 個人的にこのブロックも 神ブロックだなと思います。
32. 3.基本ブロックについて Youtube Youtube動画を埋め込むことができます。 レスポンシブ対応もされています。 はじめにURLを入力しますが、Youtubeの埋 め込みコードではなく、ブラウザの URLを入 れるだけでいいのとても楽チンです。
33. 3.基本ブロックについて その他の埋め込みブロック 埋め込みブロックには他にも、 FacebookやTwitterなど定番のものから、 SpotifyやHuluなどあまり使わなさそうなブロッ クまで色々あります。 Facebookなどは、タイムラインではなく投稿記 事を表示させることができるようです。 右はタイムラインが表示できると思って試してみ た図
34. もくじ 1.新エディター「Gutenberg」とは？ 2.Gutenbergの基本的な使い方 3.基本ブロックについて 4.使ってみた所感 5.実際に使ってみよう
35. 4.使ってみた所感 ブロックについていかがでしたでしょうか。 個人的に使ってみた感じでは、旧エディターでできなかったことができるようになり 便利に感じた面もあれば、テーブルなどよく使う項目に関して、もっと旧エディターのように細かく 色や文字指定、入れ子などができるようになればいいなと感じました。 特にテーブル。もうちょっと機能が欲しいですね。 さすがにテキストだけしか入らないというのは不便だなと感じました。 とはいえ、まだまだリリース直後ですし、今後のアップデートに期待したいと思います。
36. さいごに 新エディターGutenbergいかがでしたでしょうか。 まだまだ仕様が固まっていない段階かなという感じもしますが、 今後さらに便利になっていくと思いますので追っていきたいと思います。 少しでも皆さんのお役に立てていたら幸いです。
37. ご静聴ありがとうございました。