Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Saitama WordPress Meetup Vol.1 「Gutenberg を知ろう!」
Search
daisuke0101
December 18, 2018
Education
0
1.1k
Saitama WordPress Meetup Vol.1 「Gutenberg を知ろう!」
WordPress5.0で導入された新エディター「Gutenberg」について、12/16時点での使い方をさらっとご説明します。
daisuke0101
December 18, 2018
Tweet
Share
Other Decks in Education
See All in Education
Introduction - Lecture 1 - Information Visualisation (4019538FNR)
signer
PRO
0
3.5k
全員参加型で会社を強くしていく活動を考えてみる
ikefukurou777
0
200
Microsoft Office 365
matleenalaakso
0
1.5k
6ヶ月間の授業でここまでできた。コンテスト参加に向けての授業内容と生徒の様子を紹介!
asial_corp
0
410
Sähköiset kyselyt, kokeet ja arviointi
matleenalaakso
1
16k
@ngrx/signals
yannickbaron
0
150
情報Iの「縦糸」と「横糸」を意識したプログラム教育の実践
asial_edu
0
200
合理的配慮を知るワークショップ/Understanding Reasonable Accommodations (Workshop)
freee
0
1.4k
LTをすべき100の理由
eltociear
1
260
第33回 JAWS-UG札幌 クラウド女子会コラボ 勉強会
nagisa53
2
350
Tangible, Embedded and Embodied Interaction - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
Earthquake and Disaster Prevention Information for UTokyo International Students
utokyoissr2360
0
620
Featured
See All Featured
Writing Fast Ruby
sferik
620
60k
How to Ace a Technical Interview
jacobian
272
22k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Web Components: a chance to create the future
zenorocha
305
41k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
What the flash - Photography Introduction
edds
64
11k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
GraphQLとの向き合い方2022年版
quramy
31
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Transcript
Saitama WordPress Meetup Vol.1 「Gutenberg を知ろう!」
自己紹介 堀内 大輔 株式会社コミュニティコム 【趣味】 スポーツ観戦(野球・バスケ) 週1でバスケサークルで汗を流してます。 最近、人の集まりが悪いので是非。 大型連休に楽天イーグルスの試合を観戦し に、仙台へ行ったり。牛タン食べたり。
はじめに 先日リリースした、WordPress5.0で導入された新エディター 「Gutenberg」について、実際使ってみた所感などを皆さんと共有していければ と思います。 もちろん、皆さんからのツッコミやご指摘も大歓迎です! 一緒に理解を深めていきましょう!
もくじ 1.新エディター「Gutenberg」とは? 2.Gutenbergの基本的な使い方 3.基本ブロックについて 4.使ってみた所感 5.実際に使ってみよう
もくじ 1.新エディター「Gutenberg」とは? 2.Gutenbergの基本的な使い方 3.基本ブロックについて 4.使ってみた所感 5.実際に使ってみよう
1.新エディター「Gutenberg」とは? WordPress5.0から導入された、新しいエディターです。 レゴのようにブロックを積み重ねていくだけで、人を惹きつけるすばらしいコンテ ンツを構築できる。という夢のようなツールです。(大ウソ) ブロックを積み重ねていくだけでコンテンツを構築することができるところは本当 です。 WordPress4.9.8までのTinyMCEエディター(旧エディター)とは、 インターフェースがガラッと変わります。
ちなみに。。。 「Gutenberg」の名前は、活版印刷技 術の生みの親である 【ヨハネス・グーテンベルグ】さんから 取ったらしいです。→→→ https://commons.wikimedia.org/wiki/File:Gutenberg.jpg フルネームは、 ヨハネス・ゲンズフライシュ・ツール・ラーデン・ツム・グーテンベルク 長い!!
もくじ 1.新エディター「Gutenberg」とは? 2.Gutenbergの基本的な使い方 3.基本ブロックについて 4.使ってみた所感 5.実際に使ってみよう
2.Gutenbergの基本的な使い方 ①ツールバー 選択しているブロックで使用可能なツールが表示されま す。 ②コンテンツエリア ここでブロックを重ねていきコンテンツを作成していきま す。 ③エディター設定 選択したブロックの編集やクラスなどの設定、 文章タブでは公開設定などがおこなえます。
① ③ ② 各呼び方は勝手にそう読んでいます汗
2.Gutenbergの基本的な使い方 ・タイトルの入力 [タイトルを追加]の部分にタイトルを入力しま す。 右図のSaitama Meet Upの部分。 タイトルを入力すると、パーマリンクの設定がで きます。
2.Gutenbergの基本的な使い方 ・コンテンツの入力 1.ブロックを選択する。 2.ブロックを編集する。 3.次のブロックを選択する。 4.ブロックを編集する。 これを繰り返してコンテンツを作っていきます … 旧エディターとの違いは、このブロックを次々と重ねていくところにあるかなと思います。
もくじ 1.新エディター「Gutenberg」とは? 2.Gutenbergの基本的な使い方 3.基本ブロックについて 4.使ってみた所感 5.今後に期待するところ
3.基本ブロックについて 2018年12月16日現在、全部で64種類も・・・!
3.基本ブロックについて 埋め込みブロックは他に30種類以上ありますが、使わなさそうなブロックばかりなので今回は 割愛します。
3.基本ブロックについて 段落 文章を書くときに使用します。ブロックのデフォルトはこの段落ブロックになっています。 中央揃え、右揃えや太字・斜体・リンクなどの設定が可能です。 また、設定エリアで文字色や背景色も設定することができます。
3.基本ブロックについて 見出し 見出しを書くときに使用します。ブロック上では H2〜H4までしか表示されていませんが、 設定エリアでH1〜H6まで設定できます。 ただ、段落ブロックと違い文字色や背景色の設定ができません。。。 (なぜ!)
3.基本ブロックについて 画像 画像を挿入できます。 設定エリアでサイズの変更やリンク、代 替テキストの設定ができます。 キャプションが簡単に入れられるのはと ても嬉しいですね。
3.基本ブロックについて リスト リストを作成できます。 順序つきリストやリストの入れ子もできます。
3.基本ブロックについて ギャラリー 写真を選択して、ギャラリーを作成することが できるブロックです。 写真にキャプションを付けられたり、設定エリ アで横並び数を設定することができます。 レスポンシブにも対応しています。
3.基本ブロックについて カバー 背景に画像を指定して、その前面に文字を入 れることができます。 設定エリアでオーバーレイの色や透明度を設 定できますが、文字色は設定できません。。。 固定背景をオンにすると、プチパララックスの ようなが設定できます。
3.基本ブロックについて テーブル はじめに列数と行数を設定します。 テーブルが生成されますが、現状入れ子やセ ル内に画像などを挿入できないので、とても不 便に感じるブロックの一つです。 設定エリアで表のスタイルを変更できます。 (下 の図)
3.基本ブロックについて カスタムHTML HTMLを直接記述できるブロックです。 前述したtableブロックが使い物にならな い少し不便なので、このブロックで代用す ることが結構ありました。
3.基本ブロックについて クラシック 旧エディターが使えるブロックです。 これにプラグイン「Tiny MCE Advanced」を有効化すると、ちゃんと拡張されます。 テーブルもこれでやれば楽勝じゃ。。
3.基本ブロックについて カラム 神ブロックです。 ・・・失礼しました。カラムブロックです。 これは旧エディターには無かった カラム分けができるようになる優れものです。 図のように背景色や文字色も変更ができ、入れ子もできる。 しかもレスポンシブ対応!!! これは個人的に神ブロックだと思います。
3.基本ブロックについて ボタン 簡単にボタンを作ることができるブロックで す。 背景色、文字色も変更できます。 さらにボタンの種類も、 角丸・角丸なし・アウトラインの3種類から選 択することができます。
3.基本ブロックについて メディアと文章 画像と文章を横並びにできるブロック。 テキストの総量(高さ)の中央に画像が配置さ れ、逆に画像のほうが高い場合はテキスト が上下中央に配置されます。 画像とテキストを左右逆転させることも簡単 にできます。
3.基本ブロックについて スペーサー コンテンツ同士の余白を開けたいときにこのブロックを使います。 今まではエンター連打して間隔調整してませんでしたか? それでは空の Pタグが生成されてしま いよろしくありません。このスペーサーを使えばそんな煩わしさともおさらばです! 設定エリアでpx数を決めることができるので、思い通りの余白を作れます。
3.基本ブロックについて 区切り 区切り線を引きたいときに使います。 図の上から、短い線・幅広線・ドットの3種 類スタイルがあります。 現状は短い線と幅広線は同じで、横目 いっぱいに区切り線が表示され、ドットは 見たまんま真ん中にちょんちょんちょんと 表示されます。
3.基本ブロックについて アーカイブ ウィジェットでおなじみのアーカイブです。 リスト表示かドロップダウン表示か選択することができます。 投稿数なんかも設定できます。
3.基本ブロックについて カテゴリー こちらもウィジェットでおなじみのカテゴリー一覧を表示させることができるブロックです。 アーカイブと同様に、リスト表示 /ドロップダウン表示、投稿数を選択することができます。 子カテゴリーも表示することも可能です。
3.基本ブロックについて 最新の記事 投稿リストを表示できます。 カテゴリーで振り分けることができるので、このページには Aカテゴリーの投稿一覧を、別のページで はBカテゴリーを載せたいな。なんていうことにも簡単に応えることができます。 カテゴリーはエディター右の設定エリアで選択できます。 制作側からすると、ループコードを書かないでいいので、 個人的にこのブロックも 神ブロックだなと思います。
3.基本ブロックについて Youtube Youtube動画を埋め込むことができます。 レスポンシブ対応もされています。 はじめにURLを入力しますが、Youtubeの埋 め込みコードではなく、ブラウザの URLを入 れるだけでいいのとても楽チンです。
3.基本ブロックについて その他の埋め込みブロック 埋め込みブロックには他にも、 FacebookやTwitterなど定番のものから、 SpotifyやHuluなどあまり使わなさそうなブロッ クまで色々あります。 Facebookなどは、タイムラインではなく投稿記 事を表示させることができるようです。 右はタイムラインが表示できると思って試してみ た図
もくじ 1.新エディター「Gutenberg」とは? 2.Gutenbergの基本的な使い方 3.基本ブロックについて 4.使ってみた所感 5.実際に使ってみよう
4.使ってみた所感 ブロックについていかがでしたでしょうか。 個人的に使ってみた感じでは、旧エディターでできなかったことができるようになり 便利に感じた面もあれば、テーブルなどよく使う項目に関して、もっと旧エディターのように細かく 色や文字指定、入れ子などができるようになればいいなと感じました。 特にテーブル。もうちょっと機能が欲しいですね。 さすがにテキストだけしか入らないというのは不便だなと感じました。 とはいえ、まだまだリリース直後ですし、今後のアップデートに期待したいと思います。
さいごに 新エディターGutenbergいかがでしたでしょうか。 まだまだ仕様が固まっていない段階かなという感じもしますが、 今後さらに便利になっていくと思いますので追っていきたいと思います。 少しでも皆さんのお役に立てていたら幸いです。
ご静聴ありがとうございました。