皆さん改めまして こんにちは 今日のワークショップ 10種類のテキストブロック 使い分けのコツというのを始めていきたいと思いますどうぞよろしくお願いします 今スクリーン見えてますか? Can you see my screen coding?はい では始めていきたいと思います私はベンチャミンと言います ぜひベント呼んでください1992年から日本に ずっと北海道に住んでいます2014年からワードプレスを使って サイトを作ったり前はそのワードプレスのカスタマサポートの仕事もしていたのでワードプレスに困った人を助けて その人がこう思うようなサイトが作れるように導くという仕事をしていましたいろいろ自分教えたりする機会があるんですけど聞いている人がなるほどと理解する瞬間が大好きですなのでぜひ今日のセッションも 何か新しいことを知ったりしたときになるほどと チャットなどに入れていただければ私も大変嬉しく思います今日のスライドを皆さんに共有します少々お待ちくださいこれは終わった後にもオンラインでシェアをしますけど今 ズームのチャットの方にも落とし込みましたこのセッション中も終わった後もスライドを見て何か質問があったら 最後の方には連絡先も書いてますので何でも聞いていただけたらと思いますさて 内容に入る前に皆さんのブロックエディター経験はどれくらいですかと1が 今日が初めての初心者ですという方10がベテランです もう使いこなしてます自分でも もしかするとブロックコードを書いたりしてますみたいな この経験だと皆さん1から10何番くらいでしょうかトーストマスターさん 2といただいてます今日は参加者が少ないですのでどんどんどんどん 何でも聞きたいことは聞いてくださいいろいろ準備はしているんですけどインタラクティブに知りたいことをぜひ提供できたらいいなと思っていますでは オンラインワークショップはlan.wordpress.orgで提供されている皆さんで共に学びましょうというそういう勉強の場です私みたいに講演者がネタを提供しますけど基本的にはお互いに質問し合ったり教えあったりまた講演中も自由に質問していただいたりする本当にインタラクティブな勉強の場を狙っています英語では週 5、6回いろんな予備のいろんな時間で開催しているんですけど日本語のワークショップは先月始めたばかりでまだまだ立ち上がりの段階ですけど今後どんどん開催していこうと思いますのでぜひ楽しみにしていただけたらと思います誠書は録画されて後からwordpress.tvにアップされて参加できなかった方も見れるようになりますはいではブロックエディター今のワードプレイスの基本の編集画面ブロックエディターなんですけどそこで使えるブロックというのが実は90種類以上もあるんですね今ワードプレイスバーション6.0.2なんですけれども確か96個ぐらいブロックがありますこれを全部駆使するというのはなかなか難しいですね特にテキストを書きたいといった時のテキストブロックここだけでも10種類あるんですねなので他の文字を書きたいだけなのにどのブロックを使えばいいんだろうとちょっと悩ましいところかなと思います今日皆さんに教えたいのはこれには理由があるということです10種類もテキストブロックがあるんですがそれぞれのブロックは2つのものサイトに加えます1つはサイトの表面皆さんの見える部分に独特なデザインを加えますそしてもう1つ大事なのはサイトの裏に違ったプログラムコードを加えているんです私たちブロックエディーターを使う人は基本的にこのコードは見ないんですけれどもこれを利用して検索エンジンがサイトの内容を理解したりアクセシビリティの観点でサイトの情報をわかりやすく提示したりしている重要なものなんですねなのでこの表のデザインだけじゃなくて裏にも大事なコードがあるんだよということを知っていただけたらなと思っています今日は大きく4つの質問に答えますまず1つ目それぞれのブロックは何が違うのか2つ目文字を書くためだけになぜそんなにもブロックが必要なのか3つ目使うべきブロックを見分けるコツはあるのかそしてアクセシビリティは大事って聞いたことあるけどもしかしてそれが関係しているとかということで10種類のテキストブロック使い分けのコツ始めていきたいと思います始める前に質問とかなかったでしょうか大丈夫そうですかねはいでは今日はどういう環境を使ってテストサイトを皆さんにお見せするんですけどこのローカルワードペーストとこのっていう環境を使っています自分のコンピュータの上でサイトを立ち上げてお見せしていますテーマは2022今のワードプレイスの基本テーマそしてワードプレイスは最新の6.0.2ワードプレイスはプラグインをというものを入れるとたくさん機能が増えたりするんですけれども私が今日お見せするテストサイトはプラグインは何もないですテーマも基本的なテーマだけなので本当にワードプレイスのコアにある基本の機能をぜひ皆さんに知っていただきたいと思っていますさてワードプレイスの10種類のテキストブロック一つずつ見ていきたいと思いますまず一番基本となるのが段落ブロックワードプレイスのデフォルトのブロックで何も他に選んだりしなければ段落ブロックがどんどんページに刺さっていきます一番基本的なところでもあるんですけど実際にちょっとページを書いてお見せしたいと思いますこれは今タイトル何でもいいんですけどこちらに何か文字を書くときここですねもうすでに最初段落ブロックが一つここに入っていますページを作った時点でここに文字を書くとエンターを押して開業すると新しく段落ブロックが加えられましたこれも段落ブロックという感じで開業を押すたびに新しい段落ブロックがページに加えられていきますこれが一番基本なのでこの辺でいいと思うんですけれども基本は段落ブロックということを覚えてください次によく使うのは見出しブロックです見出し僕名前の通り自分の書いているものに見出しをつける機能を持っていますページにブロックを足す方法はいくつかあります一つ目はここの黒いプラスマークこれを押すとブロックを追加することができます英語で検索ができるんですねヘディングって入れると見出しがでたりあとから紹介しますけど例えばカラムって入れるとカラムがでたりここでブロックの検索ができますもう一つの方法としてこの左上のプラスマークここも押すことによって先ほど見せた90何種類というブロックを選ぶことができますここですねここの見出しブロックを今見ていますが見出しを入れて見出しを加わることができますもう一つブロックの確かたとして今ここに入り色で出ているんですけどブロックを選択するにはスラッシュを入力というこの機能もありますキーボードでスラッシュを入れた後いろんなブロックの種類があってもしかしてこれが欲しいのかなとすでに予想しているんですねワードプレッサー例えばここで英語の読みを入れなきゃいけないんですけどヘディングっていう単語を入れると見出しブロックがあるんですねなので慣れてくるともう本当キーボード操作だけでブロックをどんどん足していくことができますヘディングブロックに関してはさらに便利な機能があって今これヘディングのレベル見出しレベルを変更と出ています見出しレベル2番です一番大きい見出しは一番なんですけどウェブページを作るときのお決まりとして見出し一番はページタイトルだけに使うその一箇所だけという決まりがありますなので基本的にはページの本文の中で2番から始めると必要に応じてこれを3番4番5番というふうに変更することができますこれヘディングのHに番号が付いているんですけどこれをスラッシュの後に入力するとそのレベルの見出しが刺さるんです例えばHの3ってやってエンターを押すとレベル3の見出しと例えば極端な話 H6エンターとやると見出し6レベル6の見出しを加えるとこういうキーボードのショートカットがありますさらにこの見出しに関しては他にも書き方がありましてシャープの数で見出しをレベルを決めることができるんですね今シャープ3つのスペースとやるとこれレベル3の見出しが入りました例えば1,2,3,4,5とやってスペースを押すとこれは見出しレベル5の見出しという感じです見出しは弾楽ブロックの次に一番多く使うブロックなのでこういった感じでキーボード操作でも簡単にたくさん出せるようになっていますここまでで弾楽ブロックと見出しブロックで何か質問などないでしょうか大丈夫ですかねでは続いてリストブロックリストブロックは過剰書のリストを作るブロックです過剰書リストもできますし番号を振った番号付きリストというものも作ることが可能ですこれもちょっとじゃ作ってみようと思うんですけれどもこちらからこのプラスですねプラスマークからこのリストというのを選ぶとリストが入りますこういう感じですねリスト項目は右にインデントすることができますなので親項目子項目キーボードでもスペースを入れるとさらに右にずれた項目を足すことができます親で入れられますしバックスペースキーを押すとこれを左にずらすことできますこれも同じなんですけど右にずらしたりキーボードだとバックスペースを押すと左にずれてスペースを押すと右にずれていきますで番号付きリストにも変更できるんですね番号付きリストはプラスのリストのここに番号を選ぶと1番から始まったリストを書くことができますリンゴオリララッパーこんな感じでここの番号は普通は1から始めるんですけど時々別な番号から始めたいことがあるんですね何か過剰書を始めてちょっと説明を加えてまた過剰書を続けるといったときこの右のブロック設定を開いていただくとここの番号を変えることができますここに番号付きリスト設定の初期値とあるんですけどこれも例えば7とかにすると7、8、9とリストの開始番号を変更できますさらにリストの数字を逆上にするというオプションもあってこれを押すと7から始まって逆上なので7、6、5と数字が戻ってきます何かランキングとかを紹介するときに10位、9位、8位と組み上げていて最後に1位を示すとかそういうときに使える機能かなと思いますこのリストブロックも使うことが多いのでキーボード操作だけで作成が可能です例えばこの反格なんですけど反格のアスタリスクスペースとやるとリストを作れますこれですねまたキーボードだけスペースで右にずらしたりバックスペースで左にずらしたりできます番号付きリストはこれは一番限定なんですけど1位とスペースで番号付きリストを作ることもできます番号は1位とスペースでこういった感じでリストも多く使うブロックの種類なのでキーボード操作だけでいろいろ作れるようになっていますこれがリストブロックです質問とかそこもう一度見せてほしいとかそういうことないでしょうか話している大丈夫ですありがとうございます話で最中でも何が聞きたいことがあったら何でも教えてくださいさてここからがちょっと面白くなるんですけどここからは少しデザインを加えていくものになります今までの3つは基本的なブロックですけど今後テキストにデザインを加えていきますまず最初に引用ブロックメインの文章から分けて引用内容を強調することができます引用元を記載することも可能です実際に使ってみようと思うんですけどプラスから引用ここに縦線が入るんですけどもこれは引用ですここに縦線元が入りますという感じですねここのデザインはテーマで決まりますなので2022というテーマはまにとこシンプルなデザインなんですけれどもテーマによってこの文字が色が変わったり大きさが変わったりするテーマも用意されていますあとはこの縦線これが気になるという人はこちらのまたブロックセットを開いてスタイルのプレーンというのを選ぶとここの縦線が消えるこういった機能もありますちょっとこれをプレビューしてページを見てみましょうかこれですねこれがその引用です引用なんですけどもうちょっと際立たせたいもう少し目立たせたいという時もあると思うんですねそういう時に使えるのがこのプルクオートブロックあのよくよくわからない翻訳されたのがされてないのかわからないような名前なんですがプルクオートブロックプルクオートブロックは同じ引用などに使うものなんですけどさらに強調させたい時に使いますこちらのプルクオート上と下に線が入ってさらに強調したい引用です引用元は書いても書かなくても大丈夫という感じでこれをプレビューするとこうなりましたさらに強調したい引用ここの詳細もまた手まで少しデザインは変わってくるんですけど引用とプルクオートブロックこんな感じになります設定の方でこのプルクオートブロックは枠線をいろいろ いじることが頼んですこの上と下の線ですね例えばこの角丸角丸何て言うんでしょうね角丸は数字を変えることでこっちはの線を迷くすることができたりここで転線に変えたり幅を太くしたり細くしたりこういうことがいろいろできるのでちょっとこう遊んでみると面白いことが たくさんできるかなと思いますちょっとデフォルトに戻しますか プルクオートブロックそしてもう一つここにCブロックっていうのがありますCブロックは開業や空白などを 入力した通りに表示するブロックですちょっとこれは新しいページを作って 新しいページを作って見せたいと思いますこちらですね 新しいページでここのブロックを見ていただきたいんですけど 何も入力をしないと段落が入りますでエンターを押すと新しい段落が始まります3つ目例えばこれはちょっと右に寄せたいなと思ってスペースを使って右に寄せて こういった感じでスタイルを作ったとしますこれをプレビューしてみますとせっかく右に寄せたのにこれが左にまた戻っちゃうんですねこの段落ブロックというのは余計な空白や開業をなくすそういう機能というかそういう仕様になっていますので例えば仕様書くとき特にそうなんですけど例えばここの感覚もこんなに大きく開いちゃうんですね開業すると新しい段落がどんどん入っていって 開業も大きいし右に寄せたりしたいと言った時にその距離が守られない私は仕様書く人ではないんですけどしこの s 試習とかを見ると結構この開業に意味があったり2個入れたり3個入れたいと思ったり少しインデンドさせるとかこういうことを仕様書く人は意図的にやっているんですねこの段落ブロックだとそれはちょっとうまくいかないのでそういった方のために4ブロックというのがありますでこれは1行目ですとでもう1回ここのリスト表情を見ていただきたいんですが段落はエンターを押すとどんどん次の段落次の段落って始まるのに対してこの4ブロックはエンターとしても同じ4ブロックの中にとどまりますなので入業名ですと書いてこれ全部一つのブロックなんですねでさらに例えば3行目です右にインデントさせるとこれプレビューで見てみましょう4ブロックの場合はちゃんとここの開業の幅ですとか右に寄せるこの空白の数をキープしてくれるそういうブロックになってます例えばここに3行くらい開けても全部一つの4ブロックのままですしプレインピューで見てもちゃんとここの空白が維持されるとなのでここまで6つのブロックを紹介してきました段落ブロック見出しブロックリストブロック引用ブロックプルクオートブロックそして4ブロックそれを6つ使ってページを書いてみるとここに出ているような例が作成できますここに6つのブロック入ってるんですね一番上に見出しブロックがありその下に段落ブロックがありここはリストブロックを作っていますここは右にこう寄っているのはこれは4ブロックですで縦線が左に入っているこれが引用ブロックで右と一番下にあるのがプルクオートなのであのただの段落ブロックを使って文章を書いても全然 ok なんですけど見た目的にこういったブロックを使い分けることによって見た目が少しこうデザインされた文章がワードフレーズで書けるようになりますこういったようにブロックはまず表面に特別なデザインを加えていますここまでで何か質問とかもう一回見せてほしいこととかそういうことはないでしょうかはい 大丈夫ですありがとうございますもう何個かブロックがあるので簡単に紹介をさせていただきますコードブロックコードブロックは名前の通りプログラムコードを書く時のブロックですで開業や空白を維持するというのをしブロックと同じなんですけど 2つ違ったこととしてブロックの周りにあの 線8 枠をこう書いてくれるっていう機能ともう一つ8東幅フォントというフォントを使ってくれます 東幅フォント東幅フォントがこのコードブロックの味噌なのでちょっとこれもまたあのお見せしたいと思うんですけど4ブロックと比較してみましょう 4ブロックでネットこれは4です これは4です文字の半端に注目してくださいで日本語はもともと東幅フォントが多いのでちょっと日本語だとわかりにくいのでここに英語を入力します英語は文字によって文字の幅が違うんですね 例えば幅の広い w とあの例えば小文字の l なんていうのを比べていただくとわかりやすいと思いますこの大文字 w と小文字の l だと文字の幅が全然違うんです でこれを8コードブロックで入力するとどうなるかというと コードブロックは文字の幅を全部等しくしますなので w と l の幅が全く一緒なんですねこれあの他の文字もそうなんですけど例えば幅の広い文字 q とこれを こちらで入れると普通の c ブロックなんかで入れると幅が違って出てくるんですけどコードブロックはこれが一緒になります これをあの表で見ても同じなんです幅が全部の文字が一緒になりますでこれはまあプログラムを書く人はうちの方がコードが見やすいというまあ理屈でこれを使っていますなので c ブロックとコードブロックの一番の違いはこの等幅フォントを使っているかどうかという部分になります もう一つ a 成形済みテキストブロックでこれはやっぱりちょっとプログラム用のあの自体とかになるけど 例えば申し出すとその c を書く上で幅を一緒にしたいとか普通に文章を書く上でも等幅フォントの方がいいなというときに成形済みテキストブロックを使うとこちらにも等幅フォントが使えますえっと会業や空白を維持するのは c ブロックと一緒で今度はブロックの周りにはあの線はなくてと等幅フォントを使ってくれます 成形済みテキストも今ここに書いてみますが俺も で私が今こう書き始めて見ると 等幅フォントを表示してないんですここで実はあの成形済み文章は本当は等幅フォントを使うはずなんですけど出てないですでこれは今回のプレゼンを用意する上であの見つけたんですけどワードプレイスを日本語設定にしている時のバグと思うんですね今このページここに注目してほしいです本当は成形済みテキストも等幅フォントになりますで今私このサイトの設定のここの言語が日本語なんですねこれをもし英語に変えて英語に変えてこのページを公式ます そうするとちゃんと成形済みテキストも等幅フォントになるんですこれはちょっとプログラミング用の本となんですけどまあもう少し読みやすいのかなえっと本来は成形済みテキストはこのように等幅フォントになるはずですがなぜかサイトの設定を日本語にしてしまうとえっと等幅フォントが等幅フォントでなくなるというちょっとバグを見つけたのでまあこれはあのいずれ治るかもしれないですあの ちょっと報告をしなきゃいけないんですけど基本的な成形済みテキストも等幅フォントになるということを覚えていてくださいあと2つブロックあるんですがこれは簡単に紹介だけしますテーブルブロックというのはまあデータを表形式で表示させるためのブロックですあのマイクロソフトのエクセルとかあの google スプレッドシートとかで表計算できますけどテーブルブロックはその表示用に設計されたブロックですでクラシックブロックというのはえっと今ワードプレイスはブロックエディターがえっと基本のエディターなんですけれどもえっと2年3年ほど前までは別なエディターがあったんですねでそれはまあクラシックエディターと今呼ばれていてあの 基本的に使うことはもうないと思いますただちょっと昔のエディターがどんな感じだったかなぁとかあのまあ少し体験ができるので興味があったら見ていただいていいと思うんですけど基本的には今もワードプレイスはブロックエディターなのでこれはあの使うことはほぼないと思いますはいで文字を書くためだけになぜそんなにもブロックが必要なのかという質問に到達するわけなんですがえっとそれは理由はそれぞれのブロックは違ったコードをサイトに加えるからなんですちょっと極端な話8を見ていただきたいページがあるんですけれどもこれです ちょっと大きくしましょう今ここに2つの文字が書いてありますこれは弾楽ブロックですこれは見出しブロックですで表から表面から見るとすごくあの似た自体ですしブロックの違いがよくはわからないんですあの違ったブロックを使ってそのフォントを変えたりサイズを変えたりまいろいろ編集をしていくと表面的に一緒にすることが可能ですただ裏のプログラムコードを見るとこれを全部理解する必要ないですが今見ていただきたいのはここのピーという文字そしてこっちの弾楽ブロックの場合これが h の後になってます上だとこれが p でこれが h の後で p は弾楽パラグラフの8カシャ文字で h5 の h はヘディング見出しのカシャ文字なんですなので表のデザインは一緒にしてもウルテはプログラムコードが違っているんですねこれはあの検索エンジンとかそういうコンピューターが読むとあの弾楽だっていうのがこれここであのわかるわけですしこっちも見出しだっていうのがすぐわかるんですねなので このブロックが10種類あるっていうのは実は裏にあるコードも10種類全部違っているからなんですでその裏に加えているコードを一覧ここに出しましたこれは別に覚える必要もないんですけどもし興味がある方があのいればと思ってまとめてみましたで8弾楽の場合は p 見出しの場合は h リストの場合は ul 四ブロックの場合は p re引用ブロックはブロックコードフルク音はフィガーとブロックコードコードブロックはプレー p re とコード清潔済みテキストはプレー テーブルブックはフィガーとテーブルとそのほうがものでここで気づいていただきたいのは同じ組み合わせがないんです まあ唯一似てるとせばこの4ブロックが p re で清潔済みテキストも p re なんですけどこの2つはまあ裏のコードは一緒なんだけれども表のデザインが違うというそういう違いがあるんですね本当はこちらは東幅フォント 日本がといったら出てるんですけどバグがあるんですけど本来ならば表は清潔済みテキストは東幅フォント4ブロックは普通のフォントという違いがあります でこのコードの違いがあの 検索エンジンですとか8アクセシビリティの観点で何かこうアシストサービスを使っている人たちにとっては非常に重要な内容になってくるんです a 正しく構造化されたコードはサイトを読みやすくするとまあ書いているんですけどまあネットを使う人の中には目の見えない方 というのもいらっしゃいますね彼らは小画目に表示されているものがわからないのでスクリーンリーダーという 8道具ですとかサービスを使ってあのサイトを見たりしますスクリーンリーダーというのは直訳すると画面を読む あのそういう機会のことなんですけれども例えばあの音声で読み上げるソフトというのがあります今画面に表示されている内容はこれこれですとでこうあの目の見えない方にもわかりやすくするとか今ここ写真出てるのは展示でサイトの内容を出しているんですねその画面の文字を展示であのちょこちょこ表示させてそれを指で折って画面を読みやすくするとでこういうサービスを使っている方々がそこにもいろいろアクセシビリティのあのサービスはあるんですけれども私たち検証者がサイトを読むときに例えば google で検索をしてサイトを拾ったときにもともとサイトを全部を読んでいる人は少ないと思うんです多分 あの一番上にあるその木事をパラッと見て自分の見たい内容があるか確認したりあるいはさちょっとこうパラパラとか斜め読みをしてあの画像をパラッと見たりあの見出しをちょっとこう拾ったりしてで興味がありそうだなとか自分の検索した内にあってそうだなと思うと中をこう 見ていくそういう段階を経てると思うんですね でこういったスクリーニーダーを使っている方々も同じことをしていますこのスクリーニーダーはまず最初に例えばページの見出しだけを読み上げる であのその人が本当にそのページの内容まで知りたいかどうかをそれでまず判断するとか あれはその一部の見出しだけ読みたいときにそのスクリーニーダーに対してこの見出しまで飛んでと指示を出してでその見出しの内容だけを読むといったそういうこともできます あとは例えば課書書リストの場合あの私たちはこう読んでいて今のなんだっけと思った時にあの 戻ってそれを読んだりできますけれども8スクリーニーダーも同じなんです課書書1個戻ってとか番号付きリスト1番に戻ってとか10番に進んで といったように彼らはまあ操作をしてページの中身を読むことができますとかテーブルさっきあのテーブルブロック簡単にお見せしましたが それもこう上の見出しだけ読んでてとかあのテーブルの中のここまで飛んでというその指示を出したり あるいはあの今から読み上げるコンテンツが 引用なのかプログラムコードなのかということもこのサイトリーダーは教えるんですねあのただの文章ではなくて次に読み上げる内容は引用ですとか えっと次に読み上げ内容はプログラムのコードですとか教えてくれますでこの時サイトリーダーが見ているのはこれなんですそのサイトの表面のデザビンではなくてうるにあるこの行動もとにその あの列乱者にそれに合わせた情報を提供していますなのでデザインが一緒だから別に段落ブロックでもいいじゃないか 見出しブロックでもいいんじゃないかとあのちょっと思うこともできるんですけれど実はあのそれは違っていてどんな方にでも読みやすいサイトを作るときにはやっぱりその裏の構造も意識して 構造がきれいなそういったえっと サイトを作ることも非常に重要になってきますここ長く話したんですけれども アクセシビリティとこのスクリーニーダーに関する内容で何か質問とかコメントとかないでしょうか大丈夫そうですかねん はいもうちょっとじゃあ先に進みます 正しく構造化サイトサイトを読みやすくするわけですが 検索エンジンも正しく構造化されたサイトを好むと まああの私たちグーグルで検索してあの自分でサイトを作っている人はなるべく上位に出たいと多分思うんですねでこのいろんなブロックを使い分けることによって検索エンジンにも好まれる サイトを作り上げることができますいろんなブロックを使った時の方がは断落ブロック一色よりも文章が読みやすいというのはさっきあの 例えであの見せたと思うんですねちょっと戻ってみますここですあの 断落ブロックだけでなくリストを入れたり引用を使ったりこういろいろすると見た目がちょっとこうかっこいいというかデザイン化されてあの読む人も読みやすい文章になります 検索エンジンも断落ブロックはバーっと流れている文章よりも適切にいろんなブロックを使って文章の方が読みやすいことを知ってそういうサイトをあのまあ検索結果でこう 転送を高くする上位に持ってくる傾向が報告されていますこの時検索エンジンはコード内のそのブロックの種類を読んでいますあの 見出しはどうかとか断落の内容はどれくらいかものすごい長い断落があったそれも読みにくいので断落は適切にこうこわけされているかとか やっていますあと8検索エンジンが強調スニペットというものを出すようになったんですね例えばなんでしょう たで始まる食べ物はいで今ここにあのどこかのサイトの内容がこう抜粋されて表示されているんですけどこれその強調スニペットの一つなんですねで この強調スニペットは過剰がきとかテーブルとかそういった断落以下の構造を使っているページが選ばれやすいことがあの 報告されています例えば実際このページを開いてみると 8いろんな情報が書いてるんですよねこう絵があったり8なんかこう導入があったりしてるんですけどグーグルは何を見たかというと これですこのあの木事を見てここの内容を過剰がきに変更して一部罰税で表示していると はい大根体図対対根体図ここですね でこれももうすでにこのいいよあの木事ブロックがちょっとプログラムを見てみますけどここに8リストを使っているんですul というリストブロックでlyly っていうふうにまあたくさんものを並べてますこのコードは覚えなくてもいいですけどこう言ってリストブロックを使った構造を使っているのでgoogle もこれはリストなんだと解釈してで私が調べたたで始まる食べ物に対してそれの結果をあの強調スニーペットとして持ってきたと まあこれあの一つの一例なんですけれどもこのように8件構造化されたサイトを検索エンジンもこのそういう傾向がありますではテキストブロックたくさんありますけれども実際に私たち使うときにどうやってこれを選べばいいのかその選ぶときのコーツがあるかどうかまずブロックは目的を元に選ぶべきですデザインではなく目的を元に選びましょう例えばブログの一部を強調したいときちょっとあの例をお見せしましょうあの今適当に何かお話を書きますが僕が道を歩いていたら どうしましょう例えば光るものが100円玉だった まあこんなお話があるとしますねこのあっていうのを強調したいと大きくあってこう見せたいからあの例えば見出しのしかもこれを h1番なんかにすると僕が道を歩いていたらあ光るものが100円玉だったまあ強調されてますねで視覚的にはこれは強調として8いいんですけど裏のコードではこれが見出しだというそういうコードが刺さっちゃうんですねなので検索エンジンはこのページを見たときに僕の物語の下にあっていう見出しがあってこのあっていうのに意味があると解釈したんですけどこのもの方の場合多分このあっての別に見出しという意味はなくてただの強調なんですねなのでこれは大きいからといってあの見出しブロックを使うわけであのべきではないですむしろ普通にこれ段落ブロックでいいのでもし大きくしたいのであれば段落のこの設定でこういった感じで大きくすることこっちの方が適切ですこの方が表現的には強調したいものが強調されて裏でもしっかりその意味のあるコードを残しているまあ一例なんですけどこういった感じでブロックはデザインベースではなく目的を元に選んで選んだブロックを後からデザインを設定で書いていく方がいいかと思いますそれから見出し見出しはよく使うんですけど見出しは規則を必ずあの守るようにしましょうこれは検索エンジンの場合もそうですしそのアクセシビリティのスクリーンリーダーとかそういった機会も見出しで結構文書内容を解釈しているのでこの構造が変だとえっと他の方に読みにくい文書になってしまいます見出し規則は何いくつかあるんですけどまずレベル1の見出しは1つだけこれはページタイトル ワードプレイスの場合はかなずページタイトルが見出し位置になるので自分で別なあのレベル1をつける必要はないと思いますページには必ず複数の見出しをつけましょう もし複数も見出しが要らない短い内容のページだったらえっと なんか他の文書とつなげたりすることももしかしたら必要なんじゃないかなと考えてみてくださいあの基本的に検索エンジンは少し中目で見出しが複数あるそういったページを優先して検索結果に登場させますそして見出しレベルの代償を正しく並べる 8にの次に4が来て3に戻って6が来てという感じではなくてあの親子関係にの次には33の次に4 でもう1回にに戻ってといった感じでこの代償関係を正しく意識することも大事になっていきますもう1つのコツとして段落の長さは適切にしましょう8段落の国は8エンターをスタビにこう新しいブロックに変わっていきます1つ1つのその段落の内容が長すぎたに短すぎたりすると検索エンジンなどはこれは読みにくい文章だと判断して検索結果であの下の方に落としちゃうこともあるんですね なので例えばあのどうしてもその一両が短くなっちゃうような文章は段落ブロックではなく相手4ブロックを使ってちゃんとサイトにもこれは特別な意味があるから短いんですということをコードで伝えられるようにする あと長すぎないよ長すぎる場合も検索エンジンはあの嫌う傾向があるのであまりにも長くなってきたらちょっと段落を開けてみようかなとかあの 意識していただけるといいと思いますはい 最後ちょっとかけ足になったかもしれないですけど10個のテキストブロック なんで10個あるのかそしてその使い分けのコツをいくつか説明してきました何かこう全体を通して質問とかないでしょうか質問とかコメントとか 政権済みブロックの使い方が今1つ分かりませんとはい政権済みブロックなんですけど a 実は8と8これちょっと復習になるんですけど 政権済みテキストブロックと4ブロックはだいぶ似ているんですで政権済みテキストは頭幅フォントを使うブロックで4ブロックは頭幅ではない普通のフォントを使うブロックになりますもうちょっともうちょっと戻りましょうもうちょっと戻りましてですね政権済みテキストブロックは開業や空白を維持する もう一回ちょっと実例で見せようと思うんですけど普通段落ブロックを使うと これは一分です自分です エンダーを捨て開業すると次の段落が生まれてしまうんですねこれは2分目です 例えば8ちょっとインテントさせたいと言ってこれは3分目です例えばこういった文章を作ったとします これも段落ブロックは3つできちゃうのでちょっと検索エンジン的には短すぎてよくないんですけどプレビューをするとせっかくインデントしたこのスペースが消えちゃうんですね段落ブロックはこういった余計な空白とかを極限減らすそういう仕様になっています生計済みテキストブロックはそれを維持してくれるブロックになります なのでいいが健康変換を覚えて欲しいんですけどこれは1分目ですって今開業しても同じ生計済みテキストの中にありますこれは2分目ですで例えばこうしてこれは3分目ですこれをプレビューすると生計済みテキストはここのインデントをしっかり覚えて書いてくれますであの段落はこれ開業するたびにブロックが変わってしまったので検索エンジンからするとこの段落短すぎこの段落短すぎとまあ解釈されちゃうんですけど生計済みテキストの場合は開業しても同じ1つのブロックの中にあるので検索エンジン側からするとアプリは1つのまとまりの分手のんだなということがわかりますで8続けて質問があります生計済みブロックとしブロックは同じなんですね違いは等幅か田舎そうすると等幅ブロックを使うse 以上のメリットは何ですか結果は正しいです生計済みブロックとしブロックは一緒で本物が違うだけse 以上のメリットは何かse 以上は seo 上seo というのは検索エンジン最適化検索エンジンに合わせてサイト構築するというものでおそらく裏のコードが一緒である以上 seo 的には同じ意味を持つと思いますここはあのむしろビジュアルを意識した2種類のブロックという捉え方でいいじゃないかなと思いますあの等幅フォントはやっぱり普通のフォントとちょっと変わってきます日本語だとほぼ等幅なんですけど英語とかあの欧米の文字を入力すると幅がいろいろ変わっていてその方が読みやすいはずなんですけどあえてこれは等幅にしたいって言った時に生計済みテキストブロックを選ばながらいいかなと思いますはいわかりましたありがとうございますでは残り1分になりましたので今日皆さん参加してくださいありがとうございますで来月にまた次の8オンラインワークショップを企画してますのでぜひ皆さんお集まりください来月は業ブロック盾ブロックでレスポンシブデザインを体験レスポンシブデザインというのはマコパソコンの画面だったり携帯のスマホの画面だったり画面の大きさに応じてウェブサイトのそのデザインが変わるそれに合わせて変わることをレスポンシブデザインと言うんですけど次回は実際に皆さんであの業ブロック盾ブロックを使ってこのレスポンシブデザインを考えていく体験していくそういうセッションを企画しています10月21日金曜日の午後3時からそして10月22日土曜日の午前10時からまた同じ内容で2回開催予定ですのでぜひお集まりください今日のこの録画は後からワードプレイスドットTVワードプレイステレビにアップされますのでぜひそこでまた閲覧していただけたらと思います今日の講演便でした今後もまたぜひお会いしましょう今日は参加ありがとうございました