導入
自己紹介
村上直子（フリーランスのデザイナー。ビジュアルを使ったコミュニケーションを研究中。ブロックエディター好き。山口県山口市在住）
本日のワークショップ参加者の想定
- HTML・CSSとは何か？ざっくりご存知という前提（むしろ私より絶対詳しそうな皆様！）
- 前半だけ申し込まれている人いないので…
- YouTubeをご覧の皆様の中には、HTML・CSS初耳の方いらっしゃると思います。
それが何かは簡単に説明いたしますので、ぜひ今日のところはいったん「そんなものがあるのね」と思って聴き進めていただければと思います！
今日すること
- ブロックエディターとは？
- 概要
- ざっくりイメージ
- 本日使う主なブロックの紹介
- ブロックエディター でどんなことができるの？
- ワークショップ
- 進め方の説明
- どこかで見た！デザイン練習帳
ブロックエディターとは？
- 2018年12月から採用されているWordPressの編集画面です。
- ブロックと呼ばれるいろんなパーツを組み合わせてウェブサイトのページを作ります。
- ブロックの正体はHTML（厳密に言えば、そうでないものもありますが）。
「公開」したときに、「ここの位置にこのHTMLを配置します」というお約束をとりつけます。
ざっくりイメージ
詳しく知りたい方は ゼロから学ぼう！ブロックエディター（Gutenberg） – WordCamp Tokyo 2019 p52 – 72 スライドをご参照ください。
本日使う主なブロックの紹介
単体系
単体で成立するブロック
- 段落ブロック：文章を入力するためのブロック（<p>）
- 見出しブロック：見出しを入力するためのブロック（<h2>〜<h6>）
- スペーサー：スペースを確保するためのブロック
- ボタン：ボタンを入力するためのブロック
組み合わせ系
レイアウトするためのブロック。複数のブロックを組み合わせて使う。
カラムブロック
画面を縦に分割し、横並びのレイアウトを実現します。
グループブロック
複数のブロックをひとまとめにします。背景色を設定できます。
メディアと文章ブロック
縦に半分に分けた、片方には画像か動画を設定し、残りの一方には何でも入れられるブロック。
カバーブロック
画像と、色（オーバーレイ）とコンテンツを３層に重ねたブロック。
ブロックエディター でどんなことができるの？
- ブロックエディターで作られたサイトを見てみよう
- ブロックエディターで作られているかどうか、どうやって判断する？
- Detective Wapuu
- Google Chrome の拡張機能。
- 制作元サイトによると、見出しや段落などのブロックを除き、どんなブロックが使われているか検出してくれるとのこと
- 「W」ロゴが青いとブロックが検出されたということ
- Detective Wapuu
- どんなブロックでできているか見てみよう！
今日の進行
練習用WordPressにログイン・エディター表示
- Zoomでご参加の方には一人一人に練習用ページを準備しています。
- YouTubeをご覧の方は、メールやconnpassでお知らせしている「YouTube視聴参加の方へ」からデータをダウンロードできます。
- Zoomチャットで案内した、スプレッドシートの「 B列１行 」のURLをクリックします（もしくはこちらのログインページ）
- ご自分の名前の行の、ユーザーとパスワードを使ってログインします。
- 練習用ページのリンク（E列）をクリックして、画面上部の「 固定ページを編集 」をクリックします
- これからワークショップを進めるにあたり、進捗を書き込む欄を用意しました。できたら、「できた！」などご記入ください
ワークショップ
- 村上の解説・レクチャーをご覧ください
- 「やってみようスペース」を消して、皆さんに再現してみてください
- 「プラスワン」にチャレンジしましょう
質問・ツッコミ大歓迎！
- 分からないこと・操作できないことなどぜひマイクをONにして教えてください。チャットでもOK！
- 「分からない」「できない」と言っていただけると、みんなのプラスになります。ぜひ！
- 「こういう説明の方が分かりやすいんじゃない？」というツッコミも大大大歓迎です◎