はい では 今日は今から今こと知りたいブロックエディターの使い方 入門ということで始めさせていただきますお越しと申します どうぞよろしくお願いいたします途中から入ってきた方のには ちょいちょい チャットであれをお伝えしますねURLをお伝えしますねはい では まず今アンケートをさせていただいておりますアンケート 次 変わります こちらです はい続きまして クラシックとブロック どちらのエディターを使ってますかという質問に変わったかと思います今の質問のURLは同じURLで質問の内容だけが変わったはずですそちらにご回答くださいませ 汗きねさんコメントありがとうございます よろしくお願いしますさあ どうでしょう 今きっと押していただいている方がいるはずすごい 見事に全部一票ってそんなことありますっていうぐらいの始まり方でしたがいかがですかどうでしょう どうでしょう100%と半々が一緒くらい なるほどみなさんいかがでしょうか 今ねポチポチっと押していただけたらと思います 828でクラシックエディターという方が同立ですねおー 割れてますね 割れてますねお クラシックエディターが増えた なんですかだとしたらとてもいいかもしれません あの今日はクラシックエディターがどうもブロックエディターが使いにくいなと思っていらっしゃる方やブロックエディターに行こうするの難しいんだよねと思ってる片向けというのが多いところにはなりますので そのあたりも含めてお話できればなという風に考えておりますはい じゃあそうですねあのもうちょっとちょうどターゲットに入ってるみなさんがあの来ていただいたということでありがたいですありがとうございますあの引き続きこちらも えっともしまだの方は投票いただけたら最後の方にか後で確認しますのでありがたいですでですね えっと今この画面だと思うんですけども私はそうですね8にやもう今100%とかな今の案件でクラシックエディターナイスもねはいこっちにしましょう でえっと今度こっち側の多分Q&Aっていうのがありますでここに質問を入力することができますね えっとこちらでですね今日一番聞きたかったこともしくは えっと今日こういうことが聞けたら嬉しいなっていうこととか今悩んでることとかブロックエディターについて えっと疑問とか不安とか何でも結構ですあのオープンなものとしてご記入いただけますか えっと何今日はとりあえず話聞くだけだわっていう方はあの書かなくてもいいんですけどももしかけそうだったら書いてくださいませあのこれはあの特命で書けます でかつあの後からご回答することもできますのでこちらあのこれからイベントを進めていきますがあのその間にどんどん書いていただいたら結構ですし一人お一人であの何個でも質問いただけます またあのいただいて質問に対していいねを押すこともできますでいいねが入るとあのその分あの皆さんが知りたい質問だろうなと思って取り上げますので あのそのように差し出きますおっといい間違ってましたか私質問がへっと あごめんなさいこれだからこっちあの分かりにくかったですけどそういう感じですあのえっと 確かに分かりにくかったですね上から順番に100%ブロックエディター80%ブロックエディター半々ぐらい 20%ブロックエディター100%クラスクエディターという意味ですねあのわかりますなんとなく比率が逆転していってるっていう風に感じていただけたらあのいいかなと思いますはいすいませんあの上手に言葉が間違ってましたねすいませんありがとうございますはいじゃあ行きましょう えっと本編入っていきますはいえっと今アンケートしましたってところですねえっと今日もしあのまだブロックエディターの手元の環境に慣れたことがなくてあの私バーって喋りながらワーってやりますけどももし一緒にあの 作業してみたいわという方はあのこちらの url からあの24時間だけ8作れる8ワードプレスの最新畑入ったんと仮環境ができます ポチって押すとこれインスタ wp っていうサービスを使ってるんですけどもあのこのように立ち上がってもういきなり いい加減なサブドメインであのサイトが立ち上がりますでこのマジックログインっていうのをクリックするとあのこちらから このようにですねからのワードプレスが立ち上がるようになってますこれは8ワードプレスの最新版の6点4点2で8日本語になっていて 外観が2024が入ってる状態というものになってますのでえっともしあのこの後一緒にされ作業してみたいわという方はあのこちらクリックいただいてですね サイトを生み出していただいてあの一緒に作業いただければと思いますあのどんなになってもこれ一般公開されてるサイトになるんですけども24時間後には消えますので あの気にしていただかなくて結構です8では始めていきましょうか 今もし声とか聞こえなくなるとかあのなんかあったら言ってくださいねあの私が何か見捨てるだけかと思いますのであの慌ててなんとかしますからあのその時はお声かけくださいといいかないいですねキット大丈夫ですねじゃあいきますはい とはいでは8始めていきますよろしくお願いしまーすはい大丈夫ですね ok えっとまずクラシックエディターとブロックエディターの違いというのを軽くお伝えするところから始めたいと思いますもう既にご存じかと思いますが一応ご連絡だけしときますともともとはワードプレスというのはクラシックエディターと今は呼ばれているもの当時はクラシックエディターなんて名前はなかったんですがそちらが主流でしたあのこのビジュアルモードとテキストモードで8切り替えができるタイミング c e というエディターを使われていましたねエリターが使われていました これをですね8新しくなったのがこちらのブロックエディターというものになりますで今はクラシックエディターは基本的にはデフォルトの状態では使えなくてクラシックエディターを使うためにはクラシックエディタープラグインを入れて有効化してあると使えますよという形になりますなので ワードプレスが5.0以上でありかつクラシックエディターの状態ですという人はおそらくクラシックエディタープラグインが有効化されている状態かと思いますでえっとまず注目すべきはもう2018年に えっと公開されたもの年末でしたけども公開されたものですから201920 21 22 23ですかもう丸5年になろうとしているというような形ですね2024 9123そうですね丸5年次もう6年目に入ろうというようなエディターになっております はいのでえっともうだいぶだいぶ支流になってきていますよということになっておりますで えっとブロックエディターはグテンベルクというグテンベルグというこのプラグインとしてのプロジェクトが一部ずつ コアに取り込まれていきながら本体ではブロックエディターという名前で実装されているものということになりますあのグテンベルクにねあのコミットして プルリクエスト送ってコントビューとして貢献しましょうみたいな話もありますがそれはこちらでやっているものですねでえっとブロックエディターにはロードマップというものがあります 将来的にこんな機能を実装していきましょうという4つのフェーズがありましてまずはブロックエディターでの編集をできるようにしましょうそしてフルサイトエディティング 8投稿だけじゃなくて投稿の画面だけじゃなくてヘッダーや蓋といったサイトの周りテーマを同じようにブロックで編集できたらいいよねというフェーズ そして次がこうエディティングっていうふうに書いてますけども8同時共同尻尾という内容です あああえっと google ドキュメントとかgoogle スプレートシートとか使われたことをございますでしょうか あの要は同時に複数人の人がオンラインで入ってきてフィグマンもそうですねこうやってこうみんなで入ると あのカーソルが動いてそこでみんなで失筆ができるようになるっていうのがありますよねあの機能が8今まさに開発中ということになっておりますそれさらにこのあとマルチ言語対応というのがありますという流れになっております でですねちょうどあの毎年マットマレメグさんっていうワードプレスの共同創始者の1人 今オートマティックっていう会社の社長さんですけどもがワードプレスのことについて1年のおさらいとこれからのお話をする ステイトオブザーワードというのが毎年開催されております最近はえっとコロナ以降 オンラインになっていて今年はオフラインでやりつつえっとオンラインでの同時放送もあったみたいな感じなんですけども その中でいくつかこのブロックエディターについても当然研究がありましてその中でも小エディティングの内容がありましたので まずはぜひそちらを見ていただこうかなと思いますきっとあのなんかちょっと楽しいかなと思うでこれを見て見てください このように今左と右が別々の人の別々のウィンドウだと思ってください右の人が触ったら左の人が動く 右の人が画像を差し替えると当然左の人の画像も差し替わるといったような機能ですね 実はこれもうなんかお話ではグテンベルクのプラグインを入れると見れるということになっておりますがえっともうすぐ将来的にはこれら えっとこれからの新しいフェーズのワードプレスにおいてはやってくるということになります結構すごいですよね アシャすごいなと思ってますがいかがでしょうか あの例えばエディターさんと一緒に作業するとかお客さんとお話ししながらじゃあヘッダーメニューこうしましょうか 合わしましょうかって言いながらサイトを作っていくとかっていうようなことができるという形になります そのほうがですねちょっとせっかくなんでこれもうついえっと先日行われたイベントの内容2日前かな 行われたなよとたんですがその中でもいくつかあの協力の内容あの面白いなよがあったのでそのあたりもちょっと本筋からは離れるんですけども今日せっかくこの日なんでお話しさせていただければと思います8ですね例えばですね ちょっと凄かったのは ai ですねまあ今や ai がすごくあの来てるよねっていうのありますけどもそれによってブループリントができるっていう内容が発表されてました コラボレーションパターンスタイルでこれかなインタラクティブエピアイでターン ai ディープリーココラボレーションパターンスタイルですねまあ今年はねキャット gpt とかが非常にあの流行った年でしたねその ai があのワードプレスにおいてどういうふうに働くかっていうことを紹介してもらってます例えばですねこれですね クリエイトアウーサイトウーアーワードプレスのショッピングカート用のプラグインですけどもウーを使ってショップサイトシューズのショップを作ってください そしてseo ツールとして何かを入れてさらにコンタクトフォームを入れてくださいそしてタイトルはハローマドリッドとホラーマドリッドというこれちょっとスペインで開催されてたので というように作ってくださいっていうふうにするともうこれで ai がいろいろ考えてワードプレスプレイグラウンドっていうものを使って必要なプラグインをインストールした状態でウェブサイトが立ち上がる状態になるというようなことが研究されておりましたまあ確かにまあドリートになってますしでカートやチェックアウト機能がもうすでにメニューとしてあって seo の設定ももう入ってる状態ということですねこの中ではショップなんでウーのプラグインが入って seo は用途のプラグインが入ってお問い合わせのほうがコンタクトフォームセーブンが入ってという形になってますけども こういったブループリントっていう青写真っていう表現がされていましたがこういうことも近い将来やってくるよだから一生懸命 ai のことも学んだ方がいいよねっていうような言及もありましたその他パターンっていうこれからちょっとお伝えするんですけども8ワードプレスの中ではそのブロックをまとめたパターンっていうものが 8を作れますこのこの中では今このグループブロックの中にカラムブロックがあって文字の見出しのブロックとボタンのブロックと画像のブロックがまとまっているみたいな形これが一つのパターンっていうものですね このパターンを8テーマ上のこのナビゲーションの下いわゆるメインビジュアルの部分っていうパーツの部分というエリアだけ決めておいてじゃあそこに入るべき最適なパターンを選べるようなインターフェースを提供しますよみたいなことが言及としてありましたこれはとても便利だなと思っていてあのこのようにメインビジュアルのところを自分の好きなパターンにまずは差し替えることができると実際その上で当然それぞれの文字や画像が差し替えられるということになります これはメインビジュアルの部分だけじゃなくてヘッダーやフッターやその他のコンデンズ部分にも適用されるというようなイメージになっているかと思いますこれもこれから先非常に便利で使いやすくなるんじゃないかなと思いますなので提供されているテーマはパターンとだいたい一緒になってますのでそのパターンもどこにどのパターンを配置すると一番最適かそれがある程度提案された上でユーザー側要は創生者側は好きなものを選べるようになるというような未来がやってきそうですさらにはちょっとこれはツイッター等々でももう日本でもちょっとあのお話でいろいろと拡散されていたのでご存じかもしれませんがエディター自体管理画面自体も今後ちょっと変わっていくだろうというような言及もありましたこれからその今までの見栄えをもっとよりカスタマイズできたりフルサイトエディティングの部分をよりモダンな見栄えに変更したりというようなことができるようになる機能がこれから拡張されていくよという話でした明確にいつの星にどのような用がなるかというのはきっとまだ未定だと思いますけどもこれもフルサイトエディティング編集のフルサイト編集における機能のユーザインタフェースの部分から派生してさまざまなパーツの部分がブロックエディティングとフルサイトエディングの雰囲気でそのやり方でいろいろ変更できるのと便利だよねっていう流れになっておりますという形ですちょっとあのこのステートオーブワールドの未来のお話をさせていただきましたこれなんで言ったかっていうとあの今見ていただいたすごい機能群あのいまいる濃厚度ツールとかって呼ばれている部分で提供されるような機能群だと思うんですけどもそういったものがワードプレスの中でもどんどん開発が進みますということになりますそしてそれらは基本的にはワードプレスなので無料で使えてみんなで一緒に開発していってみんなで一緒に方向性を決めていくものというものになりますとそれが基本的にはどれもこのブロックエディターのプロジェクトの中でブロックエディターを使う前提で開発が進んでいますということなんですですのでここでブロックエディターを使わないというのはこれから先今もたくさん提供されていてこれから先もっともっと提供されるたくさんの便利な機能を使わないというようなことを意味することにもなり得ますのでもったいないと思うんですですのでぜひまだブロックエディターあんまり馴染んでないんだよなという方は今回のこのセッションも一緒に聴いていただいてもしあれだったら一緒に作業もしてみていただいてその上でブロックエディターになれていただきこれから先の新機能群も使えるようになっていただければなというふうに思いますここまでが今日の前提の部分でブロックエディターの内容ということになりますちょっと質問戻ってみましょうか何か頂いてるかなあまだ頂いてなかったですねわかりましたじゃあこちらの部分がこちらの部分で今までの部分についてももし質問がございましたら基準数頂いて結構ですしそうですね今ねあの一人でずっと喋ってる感じになってますからあのへとかをとかあのチャットとかもとりあえずいただけとけるとあの僕が喜びますというところだけお伝えしててご協力いただけたら嬉しいなというところですお願い致しますはい音声届いてますよね大丈夫大丈夫ですよokですありがとうございますありがとうございますはいえっとじゃあここからはえっとブロックエディターの使い方についてえっとご連絡していきたいなと思いますあのさっきお伝えした通り8ここの中のこのこれですねえっとここからワードプレス立ち上がることもできますしあのまあとりあえず見とくだけっていう形でもあの後からこれビデオでも見ていただけますので今日はとりあえず雰囲気を知りたいわという形で見ていただくでも結構です私の方がデモをちょっとしていきたいと思いますじゃあデモの画面を出しますかなはいえっとワードプレスの画面にやってきましたはいでえっとこちらをとりあえず後半分にしときましょうかでこちらをこれをこっち側にしてこっちを見ながらこっちを作業するってことにしましょうえっとまずはまず新規追加ですね普通に新規追加しますはいこのように画面が出てきますあの何も考えずに普通に書き出しましょうはいあのまずはそれだけでいいと思いますあのまずはここタイトルを追加って書いてありますからね今日の晩御飯という風にしましょうかなんか晩御飯の記事を書くようなものなんでしょうねきっとねでえっとそうですね今日食べたもの今日の晩御飯はハンバーグでしたとまあ基本的にはこれだけですねはいこれだけですってあの特に難しいことなんもないですそのまま開業してもらえれば次の段落に行きますからえっとでも美味しかったですこれだけですねはいえっともう本当これだけですはいここまでは何も難しくないですよねと思いますで次コピペができますこれ今ちょうどテキストなんでえっと今リストとえっと見出しに見出し見出し1見出し2かなここをコピーしますこれをコピーしてこれ貼り付けます貼り付けえってやったらはいこれも普通にこのように見出しになってますし今 h1になってますねでこれが次が h2なってますそしてこれがもうリストタグになってるってことでえっとコピペもかなり賢いですあのワードとかドキュメントとかからのコピペも簡単にできますえっとコピペについて言えばえっと画面キャプチャーを取ったものをそのままコピペすることも可能です例えばえっとそうですねここに今画像がありますけども画像を右クリックからコピークリップボードにコピーされましたねこれをえっとこのまま右クリックから貼り付けはいこれで画像も貼り付けられますあのデフォルトの機能ですえっと最近はこういうクリップボードにも保存した画像を貼り付けられる機能っていうのが割と多くのところで汎用的にありますワードプレスも当然のようにそれが機能としてあります貼り付けると当然のようにメディアライブラの日本にもこのようにアプレートさアプロードされてますのでえっと割と何も考えずにそのまま貼り付けていただければ大丈夫かなと思いますでえっとこれを塗りつぶして不当時にしたりこれを塗りつぶしてリンクにすればリンクがかけますよというだけのものですねはいこのぐらいですまずはえっとまずはえっとコピペができる特に何も考えずに開業だけで文字が駆け出しますよいうことだけまず覚えていただければと思いますでさらにここからもうちょっと進んでえっとどんどんどんどんどんテクニック的なことのお話をしていきますということでやっていきますねはいでえっとまずはあよかった画像をコピペできるんですね知らなかったですよかったよかったできますあのワックドからとこうやってね範囲選択してこれでコピーされるんですけどこれペって貼ればえっとこれはあのテキストじゃなくて画像として貼れましたね今ね画像として貼れましたこんな感じであの簡単に貼り付けができますでえっと次えっと画像のちょっと6.4になりまして画像が良くなりました画像に対してクリックで拡大機能がついたんですこの子どういうことかというとサムネイルでちっちゃい画像だとしてちっちゃい画像に対してクリックで拡大機能がつきましたねこれをポチッと押しますこれですねえっとこの今はこれ段落ブロックっていうものをクリックすると段落ブロックに対しての設定見出しブロックをクリックすると見出しブロックに対する何かしらの設定画像に対して押すと画像に対する設定が出てくるんですけどもまあオルトを入れるとかねキャプチャーですとっていうふうになっているんですけどもここでクリック拡大ボタンがありますでこれポチッて押すとこれでえっと画面の画像の拡大機能が実装されます実装というか設定されますでこここうなってほらこうやってこう今分かります虫眼鏡のマークに変わったのでこれポチッと押すとこういうふうに拡大してこれでバツで閉じるという機能がありますこれもあの6.4からデフォルトの機能として画像ブロックに対してつきましたこれ今サムネルにしましたからこれ普通フルサイズにしてとかでこうしておいてこうするとまあこれはこれでちゃんとこうなってこうやって拡大されるみたいな感じになっておりますこれは画像ブロックに対して新しくできた機能ですね便利ですね便利ですねでこれら今あのちょっと私はもうブロックエディターが上手ですから分かれたか私はこれが見出しブロックでこれがリストブロックでこれが画像ブロックみたいに分かるんですけども皆さんはまだまだ最初は分かんないと思うのでここで一番使っていただきたいのがこのブロックナビゲーションっていうのを使っていただくということで次がパネルの活用になりますこれですこれこのマークポチッと押すとこのようにリストビューという形で今この記事を作るのにどういったブロックが使われているかっていうのが出てきますこんな感じですね今上から謎っていくと枠が出るんで分かりやすいですね段落ブロック1つ目2つ目3つ目で見出しブロック見出しブロックリストブロックでリストブロックの中はこの中パターンとするとこの中にさらにリストブロックの雇用素としてリスト項目が入ってますよとそして画像ブロックが入ってるという形になっています分かりやすいですねなのでこの画像ブロックは上側に持っていきたいというときはここからドラッグしてギューって持っていて移動することも可能です今腕に来ましたね画像一番上にしようと思ったらドラッグしていけばいいんですもしくはこの子をこの見出しの下にしてこの見出しは今H1だったけどもやっぱりH2にしようとかいう使い方もできますねでH2になるとこいつはこいつの中身だからH3にしたいとかということもできますでさらにこの状態でOutlineという方を見ると今の全体のOutline概要としての構造も出てきます見出しと文章構造がこのように出てきてH2 H3とかの親子要素に畑がないかなとか今何文字かなみたいなものも出てきますこっちはちょっとよりマニアックというか詳しい人向けなんでこっちだけまずは理解いただいてこの要素を使い分けるといいかなと思います例えば見出しがあってその下に本文がありますとかこれが本文だからこれをずらしといってこうですねでこれは1個いらないんでこれをここから削除しましょうこれで見出し弾楽画像がワンセットだとしますねこれを例えばグループブロックにすることができますここからグループかレイヤーの統合みたいなイメージですねグループかでするとこれが1つのグループになりましたここで新しい機能ができましたグループに対して分かりやすい名前をつけることができるように6.4からなってます6.3までできなかったんですけどもなのでここからクリックして名前を変更をクリックするとこのブロックに対して単体の名前をつけることができますこれ何でしたっけいい方って見えるんでいい方ってこともしましたけどうまい使い方かこれかじゃあこれをこれはグループ自体に名前を管理するためだけにつけているものですねこんな感じでこうするとこのブロック要素がグループとしてうまい使い方っていうグループでうまい使い方の見出しと弾楽と画像が入ってるんだなというのが分かるようになりますという形ですこれが必要ことか分かりませんが例えば背景に色をつけるともうちょっと分かりやすくなりますねこうするとパディングをちょっと開けましょうかこうすると今これがグループとして分かりやすくなりましたねこのように今このグループ要素にはこのスタイルがあってスタイルの中でこういうパディングとかマージンとかもなんとでもなるような状態になっておりますカドマルとかにもできますねカドマルを足らうとちょっといいかもしれませんね素敵に見えるかもしれませんこれをもうちょっと薄い色にすることもできます感じですねこんな感じで整いましたねこれでこれをまたじゃあ今度は右クリックこの3点リーダーから複製みたいなこともできます複製するとこれで2個できましたいい感じそしたらこれで間違った使い方みたいにしてこちらはダメですみたいにして画像は差し替えましょうか画像ブロック時間というのがありますからあらかじもアップロードして他の画像に描いてみたいと思いますこんな感じこれで2つできましたねこっちはうまい使い方の名前を複製してますけど間違った使い方なので分かりやすくするために名前変更から間違った使い方にしておくというようにしていただければこのようにグループ単位で管理ができますしその中で上下左右にする上下に動かすことができればという感じですで今グループブロックに背景もつけられるようになってますグループブロック結構すごくていろいろあるんですけど背景の画像というのも入れられるようになりましたメディアライブラリーから海の画像をポチってやると海の画像を背景にくるんですねすごいですねさらにじゃあこれはグループブロックを横幅全部にしましょうかよくあるパターンですけど前幅にポチってやるとここだけ切り替えて画像が全部に出るみたいなパターンってありそうじゃないですかこれでかどまる話にしてさらに上下にちょっとマージンというか分けたいと思いますからこの見出しの上にスペースを入れたいのでこのブロック要素に対してパディングをこうやってつけることもできますしこれで良さそうですねそしたらこの中身の字は白くしたいのでテキストを白にとかいうようなこともできますという感じですねこういうのはだんだん慣れてくると思いますこんな感じでご自由に作業いただけますまたこうたたんどいてこれうまくできたなっていうのがあったらこれを複製すればポチってなったら複製できますからこれでまた違う画像にすればこうですねメディアライブラリーから今度はこの意味ありげな森の画像にするとこうなるというようなことで自由に使っていただけます戻りますこれが今この右パネルで色々できるってやつでここのパディングとかマージンとかあと文字サイズもですねこの文字サイズもS、M、L、X、L、X、X、Lというふうにできますしさらにこう押すとさらにもっと大きい文字にもできますしになっておりますこの辺もポチポチ押していただければきっとだんだんわかってくると思うので慣れていただいたらいいんじゃないかなと思いますねこんな感じでどうですそんなに難しくなくできる気がしてきません今私ちょっと色々やりすぎてます?戻りましょうかちょっと調子乗りましたいきなりレベルが高かったかもしれませんまあまあこのぐらいのところまあ決してクラスチックイリターだとこういうふうにはできなかったはずなんですただそれをなんとなくこうお話ししながらポチポチするだけで作業ができてきっとこれは楽しいんじゃないかなと思いますし今までHTMLをかけない方はこういうふうに稼働までにしたいなと思ってもできなかったのが今できるようになりましたからねすごくいい機能かなと思っていますで次ツールバーの活用というのがありますそれぞれに選択したときに出てきているこの部分の話ですね今すでにもうちょっと使ってましたけど例えばグループブロックを選択した場合のツールは幅ですね幅広かなしか全幅かというのが選べるというのがこのツールになります見出しの部分に来ると見出し部分は例えば中央寄せか右寄せか左寄せとか左寄せか斜め増しかリンクかあといろいろここにもありますねいろんなものが打ち消しするとかいうのもできますさらにここに複製したりとかスタイルをコピーしたりとかいろんなものがありますたぶんですねこのツール部が普段文字を売っている方にはわずらわしいと思う方もいらっしゃると思うんです例えば長い文章をこうやって貼り付けてなんか文章書いてるとします書いていた時にここで解読したらここでこの前の段落の文字が見えにくくなっちゃうんですよね結果として何か書きにくいやっぱりブロックエッザーすごく使いにくいわって言わっちゃう方も結構いらっしゃるのでその時にはこのツールバー自体をこの点点点の部分からトップツールバーっていうのにチックをすることでこのツールバーを都度都度の位置じゃなくてツールバーをトップにとどめとくっていうことができますこれは今わかりますここにあったものがあ、ここにあったものこの近くにあったものがこの必ず上側にトップに出るようになったっていう状態なんですよねこれ当然やめたかったらこれをまた戻せばこっちに戻ってきますこれはもう好みでっていう形になるんですけどもおそらくブロックエッザーが使いにくいなと思われる理由の一つにあるかと思いますのでもし気になさる方はこのトップツールバー機能を使っていただければこちらに格納されて邪魔にならなくていいような気がしますで、このツールバーでもすごく使いやすいやつでして例えばこのグループブロック私はトップツールバーにするのあんま苦手でこっち側にいる方が近くていいと思ってるんですけどもこの上下マークとかでも結構使えるんですよねこれ上ポチって押すと1個ブロック上に行きます上に参りますですねはい、下に参りますと下にどんどん行きますわーってねこれ今こっち側見ていただくと1ブロックずつ上に動いているのが分かると思いますこんな感じで上下の移動ができるのはとてもいいかなと思ってますしあのこことここの間に入れたいもしくはこの画像の下に入れたいのにつかめないみたいなことってあると思うんですとあると思います今はこれ明治的にグループがありますけどこの画像の下にもう1個なんか入れたいのに押せないみたいなやつ一応ここでプラスマーから行けるんですけどもその時はこっちの方がいいですねこのツールバーの点点点から前もしくは後に追加っていう機能があります後に追加機能をポチって押すとここにも入力枠として今分かりますかねこっち側で見るとこの画像に対してここの部分が増えます後に追加を押すとここにポチっと増えますこうするとこのプラスマークも押しやすいですしここに早速かけますしということでこのツールバーの中から前に追加後に追加もしくはこっちのリストビューの中から後に追加同じようにここに入力枠ができるんですけどもこうしていただけるとすごく使いやすいかなと思いますめっちゃ分かるってコメントいただきましたよかったキャンペーン中です皆さんのよくあるブロックエディターコマルシューをお伝えすることによってブロックエディターを好きになっていただくキャンペーンを今実施しておると考えていただきたいと思います画像を中央へそこできますねこんな感じで作業していただけますそしてこれ複製もあります今複製見せましたけどもここのグループをつかんでグループから複製ってやればこれがいくつでも増えますねいいですね当然コマンズZで戻ることもできますあと同じようにこっちからも複製ができますこういう風にできますのでこれも何かしらいろいろ使えるんじゃないかなと思いますということでこのツールチップツールバーオーとこのリストビューをうまく使うことでブロックエディターはかなり皆さんにとって使いやすいものになるんじゃないかなと考えております今日のハイライトもうなんとったらこれぐらいだけでもいいところですがまだまだあるんでこれができます次にショートカットをお伝えしたいと思います普段こうやって記事を書いていてじゃあ次段落ブロックを書こう段落ですとこの次にこの下に見出しを書きたいでも見出しの書き方がわかんないからいつもキーボードからマウスに手をずらしてここでプラスマークを押して見出しマークを入れてまたキーボードに手を戻して見出しを入力しまたそこから今度マウスに手を戻してプラスマークを押して段落を入れて文章を入れてみたいにするとわずらわしいですね何回も何回もキーボードから手が離れますしそのたびにこうやって見出し隠れましたけど手のあるとブロック入りたら嫌だなと思われるかもしれませんここでキーボードショートカットをちょっとだけお伝えしたいなと思いますこれを使うと基本的なキーボードに手をつけたままで作業することが可能になります覚えていただくのはこのシャープと細な配布だけまずは覚えていただいたらいいかなと思いますシャープ半角Sでシャープですねシャープでスペースでやると見出し1になりますシャープ1つは見出し1あっ1つは見出し見出しそうですねシャープ2つでスペースを押すと見出し2シャープ3つで見出し3こうするとキーボードから手を動かさずに見出しを入力することができますまたハイフォンスペースでやるとリストになりますリストになりますこんな感じですねちょっと書いてないんですけど1.スペースでやると数字の見出しになります数字のリストになりますこういうふうに特別なリストカットがありましてまずはこのシャープとハイフォンだけ覚えていただくだけでもすごくいいかなと思いますあとブロックを呼び出すときにも今お話したとおりだとこのプラスマークから選んでくださいとここに何かしら出ますもしくは全てを表情すとこっち側に全てのブロックが出ますからその中から自分の使いたいものを選んでくださいってなるんですけどもブロックが多いんでブロックを選びたいだけなのになかなか見つからないなんてことになるかもしれませんなのでそこでおすすめしたいのがこのシャープじゃなくてこのスラッシュですねスラッシュって押したらこのように交互が出ます今わかります?スラッシュって押すと交互が出るんですで私は画像ブロックを入れたいといったらここからなのでスラッシュで今3つ目にありましたから下下下エンターでやると画像ブロックになりますそれ以外にもスラッシュimgってやるとこれで画像で絞り込まれます要は検索される感じですねテイブルとかグループとかでこれ日本語でもいけます画像っていると画像のタッグから選ばれますこういうふうにわざわざこのプラスマークを押さなくてもこのスラッシュだけでブロックを選べますしかもこちらは基本的にはこれまでに使ったよく使う頻度の高いものから順番にならみますということはちょっと使えば基本的にはよく使うブロックについてはすぐにこのキーボードだけで呼び出せるようになるという形になりますってことはつまり味について確かハンバーグの話でましたからね塩味いい肉だったで改良して今度はもう一回味出しにを入れて食べた感想いやー美味しかったですはいていうふうにでイメージ画像でで画像のメディアライブラリーからていうふうにもできますしキーボードから比較的手を離さずにえっと作業ができるかなぁと思いまぜひお試しくださいえっとあ、良かった吉田さんえっとツールバーとコンテントがかぶって編集したい箇所がクリックできないあるあるだったのでツールバーにちょうか入れるのは上にこてできのは良かったです日本語でもショートカットすごいブレーズですこちらも教えていただいて良かったです良かったです今日は良いことをしましたショートカット他にも実は3点リーダーのところからキーボードショートカットっていうのを選んでいただくとこちらにいろいろと出てきますのでその中からだんだん自分が使うものをよく覚えていただいたらいいんじゃないかなと思います私はそうですねコマンドBとかコマンドK太字にするとかあとリンクに変換するとかはよく使うかなって感じでしょうかコマンドKはこうやってバーって塗ってコマンドKってやると大抵こうやってリンクを入力するための枠が出てくるっていうのが一般的ですねこれって別にワードプレスに限ったこっちはなくてGoogleドッグでもできますしノーションとかでも同じような機能があります大体そういうこういうサービスにおいてキーボードショートカットは統一したほうが使いやすいじゃないですかだから1個ショートカット覚えるとここでもできるここでも使えるっていう風になるので入力がどんどん早くなっていくと思いますからぜひ少しずつでいいですいきなり全部覚えると使いにくいと思いますしわけわかんないと思いますからちょっとずつでいいんですけどもそのようにしていただくといいんじゃないかなという風に思っておりますなんか嬉しいです反応がいただけてやってて良かったなという気持ちにとてもなっていますありがとうございますここまでがもう基礎です今ちょうど50分くらいになりましたからここから先もうちょっとアドバンスなというかよりブロックを使った内容ということになっていきますただただ記事を書くだったら今のだけでも十分だと思いますそしてこの内容だけでもクラシックエディターでやるよりはかなり早いですしやっててきっと楽しいというか文字が良いという風に私は思うんですけどもエディターっていうのは昔で言うとノートと万年誌みたいなものだと思いますからだんだん手に馴染んでいくみたいなことがとても重要だと思っていますしその時に思う通りに思うようにかけるということにブロックエディターは割と近い状態に必要最低限でもできるんじゃないかなと思っていて慣れていただければきっと使いになると思いますしあの素敵な未来にも参加できるということになりますのでぜひお試しになってくださいじゃあここから改めましてもうちょっとブロックの圧用というところでパターンのところのお話をしていきたいと思いますそもそもパターンっていうのは何かっていうとブロックを使ったセットになります例えばこれですね今ちょうど使いましたけどもグループブロックに入っていてもともとあらかじめ背景が入っており見出しと本文と画像これを一つのカードブロックカードパターンみたいなイメージで名付けるということになりますあのこれをどういうタイミングでどういうふうに使おうかなと思ったんですけどもちょっと後でお話しするんですけども今ここで話しちゃってもいいと思うのでクラッシックエディターを使ってる中の人たちってある程度定型の文章とかある程度冒頭のご挨拶とか最後の締めの部分での宣伝とかあのスニペット的にっていうんですかねある程度固まった長文みたいなものをご準備されているケースがあるっていうのを前回伺ったんですねなのでそれを保存しておくっていうのもできます例えば冒頭に両ハンバーグ大好きブロガーの私はですね今日もハンバーグハンバーグハンバーグって書くと冒頭芸人さんと同じになっちゃうので意図せずにどうしようかなって思ってますけどきっとパクってはないという風に信じていただいてお世話になっておりますお越しはじめですっていうのは必ず書くとしましょう必ず絶対目指しに一番最初に書くだからそれを定型文として保存しておいてクイックタグとかっていうクラッシックエディターで完全にカスタマイズできるようなものがあるんですけどもそういったものを使ってましたよその時にパターンは使えますこの2つを選びますこの2つですねこのブロック2つを選んだらここからパターンを作成っていうのがありますパターンを作成自分で実はパターンが作れるんですパターンを作成ってやるとパターンを作成ってして名前を決めますご挨拶初めのご挨拶っていう名前にしておいたとしてカテゴリーはパターンにはカテゴリーが最近できるようになりまして今回はマイパターンとしておきます自分のパターンですからね同期パターンと非同期パターンがあるんですけどもまずは一旦非同期パターンのご紹介したいので非同期パターンとしておきますこれで生成します生成これでもこの2つのセットがパターンとして登録されましたどういうことかっていうと新しいブロックをご自身で作られたというふうに思っていただけたらいいんですけども例えばこのプラスマークから全てを表示しここにパターンっていうのがありますパターンの中からマイパターンですねマイパターンに行くとここに初めのご挨拶っていうのがありますなのでこれ初めのご挨拶をポチッと押すとはいこのように最初の挨拶がツニペットとしてポコッと入るという形になります当然このショートカットからも呼び出せますからプラスをして初め初めのご挨拶でやるとこうやって出てきます当然スラッシュからもいけますね初めここですねこれで出てきたのでこれでさせるという形になりますこのようにご自身で好きな定型分好きなセット好きなものをパターンとして保存できる機能が新しく強化されましたなのでこれもパターンにしちゃおうと思ったらじゃあこれをどっちから出るんですけどパターンを生成作成ですねこれについてもマイパターンからカード未来にしておきます一応これも動機外しておいて生成とする感じですねこれでもうこれがカードになりましたのでこの状態で次にここに入れたいとここで新しいプラスをしてすべてを表示パターンマイパターンの中にサムネイルも自動的に生成されますこれがすごいですよねここでうまい使い方パターンをポチって押せばこのようにこれが出てくるという形で一度作ったものをどこにでも使いまわせるみたいなイメージというふうに伝わるでしょうかこういったことが可能になりますこれが自身で作るパターンという形になりますねで伝わりました?伝わりました?今ねなんかチラッと見えましたね他にもパターンがいっぱいありましたねパターンとやるとこの実はパターンっていろんなところから提供されますテーマが提供してくれたりプラグインが提供してくれたりするんですけどもこの一番最新のワードプレイスのデフォルトテーマには合計35個のパターンがすでにあらかじめプリセットされていますすべてのパターンを選ぶとここにずれずれずれずれと出てきてここでこうやるとこうやって出てくるんですけども今自分たちで作ったのも出てきますしあらかじめ準備されているパターンがたくさんたくさん出てきますすごいですよねこちらにカテゴリー分けされているので例えばヒーロー注目注目の部分一番最初に出てきそうなところですねが出てきますここからポチッと押せば入りました突然かっこいいのが入って世界観がさっきとハンバーグの話をしてたのに変わって困りますけどもこれセットですね今グループ化されててこの中身にこういうのが入るよこれごそっと入りましたこれからやっていってもいいですし1番までギュッとドラッグ&ドロックして上に持っていくこともできるという形でこちらは後でページ生成する機能としてご紹介しますけども今このようにあらかじめ作られたかっこいいパターンを使って固定ページランディングページみたいなものキャンペーンのページとかをエンジニアさんがいなくてもみなさんの手だけでいわゆるノーコードでという形で未来がブロックエディターにはやってきておりますということになっておりますということで今お伝えしたのがパターンの活用でしたこの後もう一度ページ生成のところで同期パターンと非同期パターンについてお伝えしますのでこちらはちょっとお待ちいただくとしてここまでが基礎のできることでした今でも十分もう便利だなと思っていただけたかと思うんですがさらにブロックプラグインっていうものがありますこのブロックプラグインを使うとここからさらに便利なプラグインが増えます増えるんです今日ここでご紹介するのはスノーモンキーブロックスとVKブロックスとRKブロックスそれぞれ日本の作者の方が作ってられるプラグインという形になりますこちらがVKブロックスで増えるブロックの種類これがRKブロックスでFLブロックの種類こちらがスノーモンキーブロックスで増えるものの種類ということでまあ多いなということが分かっていただけるかと思うんですけどもちょっと画面を大きく広げてみるとこんな感じですね例えばよく見そうな吹き出し使いたいですよね使いたい気がしますねあとFAQ使いたい気がしますあとはこっち行くとアコーディオンなんかパカパカしそうですねその他にはQAタイムラインスライダーもありますねこうやってプロって書いてあるからプロってないとダメなのかな木地ブロックこっちはコンテンツスライダープロって書いてないから使えそうですね吹き出しもあります最近の投稿ボックスヒーローヘッダーカウントダウンタイムもありますねっていうようにそうなんですけども自由に使えますこれなんは基本途中から今この例えばスノーモンキーとアルケーもブッケーブロックスもそうですね途中からプロ版っていうのになって課金するとよりさらにブロックスは使えましたってなりますが途中までの部分一部のところは無料でそのまま使えますということでそこもちょっとご覧いただこうかなと思いますこちらはですねこっちはすいません今提供したやつの中には入ってないんですけど今ここにプラグインだけここに置いてあるのでスノーモンキーブロックスとVKブロックスとRKブロックスを板に動かしますこっちはい使いました使ってみたいですね嬉しいですこれ新規追加しますでですねではブロックステストみたいにしましょうでここでポチっとしたらここで今有効化しましたからね今までなかったRKブロックがここにいます確かにいるで次に下側に行くとここですねVKブロックスがここにいますそしてスノーモンキーブロックスもここにいるという形になってますねちょっととりあえず派手そうなコンテンツスライダーで言いましょうかポチコンテンツスライダーブロックっていうものがここに配置されましたでたぶんここになんですかねスライダーっぽいものが出てきますね矢印を表示.o表示フェードスライダーをずらすなどなどが出てきておりますたぶんここプラスマークを押す感じですかね高さ100%配置かの配置かのRなるほどで画像でメディアライブラリから画像を1個選びましょう選びましたいいのかなこれででまた2個目で画像メディアライブラリから別の画像を選びます選びました3枚ぐらいは入りときましょうか画像メディアライブラリから別の画像はい今このように3枚の画像が配置されましたねでコンテンツ自体のスライダーの設定はこの一番親ブロックでやるっぽいのでとりあえず全部つけてみましょうか矢印表示.表示フェードフェードはスライダーの方がいいなこれで公開してみますはい公開で表示とさどうなるかなあへー素晴らしい素晴らしい昔だったらねこのスライドするだけでお台がいただけたんですけどねお客さんに入れろって言われたらじゃあこのブロック入れておきますねって言って終わりですねはい終わりですねはいこんな感じのものが今入りましたじゃあ次行きましょうあとに追加して今度はパターンからVKブロックの吹き出しブロックを入れてみましょうかこっち吹き出しブロックがなんかやってきましたね画像からちょっと人の画像はないですけどこれにしときましょうはいで吹き出しに文章こんにちは私ですでこれに対してここにアイコンに目が名前って書いてあるんですか私ですかメガネにしときましょうでこれに対するセッティングは何かあるんですねきっとね吹き出しはいはい吹き出しまず右か右か左か右かあーなるほどあれですねということはこれを一旦複製すれば会話風になりますねこうですねこっちがこうでもはやもうすいませんただ遊んでるだけみたいになってますけどもで吹き出しのタイプもあーなるほどでもくもくあーこのちょっと思うかなっていうのと喋るタイプなるほどでカド丸丸抜きあーここも丸く抜いてくださるんですねなるほど便利ですね便利でこれはじゃあ丸抜きがいいなで幅は100%すると横に伸びるなるほど軽線を入れると軽線が入るなるほどアニメーションプルプルプルプルさせてきましょうちょっと楽しんではいすごいプルプルしてますけどどうなるんでしょうかプルプルしてますねこれ伝わってます?プルプルしてる見えてますよねきっと見えてますよねはいはいあのこれこれもCSSで作ろうと思ったら結構大変じゃないですかでしかもブロックエディターでやろうと思ったらどうしたらいいのかなってなるじゃないですかでもそれももうここでできましたねよかったですでこれをさっきみたいにいろいろセッティングするの大変なのでこれがもう私の拭き出しブロックだってなったらこれをパターン化するといいですねパターンとして作成してマイパターンからえーとプルプル拭き出しみたいな拭き出しってしとけばこれで生成されるのでいつ何時でも本当私はプルプル拭き出しをあ、動いたあったはいいつでもプルプル拭き出しが出せるということになりますはいあのーここではブロックエディターをすいてくださる人が増えればいいと思ってますから楽しいといいなと思っていますはいあとはせっかくですからこっちのRKブロックもいくとブログカードとかですかねなんかここにちゃんと出てくるんですねえーとリンクをポチってやるとはいいくソリーって出たあ、そっかそっかこれあれかブログのカード埋め込みのやつですねなるほどなるほどじゃあ私のメガネブログ自分のブログを埋め込むことにしましょうこれをこうしてこうしてこうですねあ、ちゃんと保存されましたそして素敵なブログカードが出てきましたねなるほどリンク先のブログのあのー格好良く成形されたものが出るという機能だということですねこのようにいろんなブロックをブロック作者の方テーマ作者の方々が作ってられますのでこれらを組み合わすだけでも十分素敵なコーディングができるかなと思いますということでぜひ使ってみてくださいという形ですで、これってスノーモンキーブロックスVKブロックス、RKブロックスってなってるように実はそれについになるテーマもありますそのテーマと一緒に使うとベストマッチというか他のテーマでももちろんこうやって今全然これ関係ない2024というテーマで使ってますからそのテーマとも違うんですけどもよりベストマッチングな形でこれについてお伝えするのがこの次のテーマのパターンシューというものがありますよって話です進みますねパターンシューというのはまたこれがこれですごくて今は皆さんも分かっていただけましたねパターンというものがあるパターンはブロックの塊だったというのがありますけどもそのパターンの塊をさらに固めてまるまる1個提供しようというのがパターンライブラリーがやっているものです例えばこれは有料版のプレミアムなものになりますけどもこういう軸なのかな軸のためのコンテンツ全部が一気にパターンになっていてこれをコピペするだけでここまで出来上がるというものですこれだとプレミアムだと試せないので無料のものを出ししたいと思いますVKさんベクトルさんには無料のものがあるのでここにそれが出てきますねでここのギャラリーレンタルというのがありますギャラリーレンタル屋さんなんでしょうかこういうのが出てきますねこれらをパターンをコピーするというのがありますこれをコピーしますコピーしましたでこれを今ちょっと緊張してますけどね普通に私できるかなと思ってうまくできるのか心配ではありますがやってみましょうポチっと貼り付けるとVKブロックでもこれはある程度は何とかなってるかなやるとどうかしらできましたねここはちょっと別のプラグインが必要になってくると思いますがこのようにある程度形になったものがこのように出来上がりますでここから先ここの中でさらに編集が可能ですからここから文字を打ったりして変更していくことができるという形になりますこんな感じですねでここも行を増やそうと思えば増やせますしという形で作業が可能になりますサウンの使い方という形になりますでもう一つもRKの方もブロックが同じようにありますね例えばこれをコピーして今ねもう私それちょっと作ったんでそれを見せしたいと思いますけども外観を今度はRKに変えておきますさっきねちょっとライトニングにしなかったんだRKにしてページにしてどれだったかなこれですねこれはRKの中のブロックの円滑ブロックっていうのをここに貼り付けていますもうなんかかっこいいですよねかっこいいでこれかっこいいし私は多分もうちょっと足したいのでここにこうやって複製していくとこうやっていくらでも歴史がかけるようになりました結構すごくないですよかったすごいって言ってもらえてる結構すごいですよねここまで無料ですねはいでメディア変更すればメディアは好きなものに変更できますからこれにしようかなと思ったらこれになると今変わりましたねオバレーがきっと色が違うんですねちょっとかっこいいちょっとなんかいいじゃないですかいいじゃないですかこれえっとみたいなことができますはいもちろんちょっと今これは色々とハショってお伝えしてますけどももう少しだけ時間をかけて色んなものをギンにして選べば皆さんでもすごく簡単にテーマがあの中でページが今まではお知らせしか作れませんでしたよねドプレスがCMSで何でもできますよって言われてもせいぜいお知らせのところでノーコードでできるところの限界だったんですがブロックエディダーになったとたにこのように例えばアバウトのページとかサービス紹介のページとかトップページだって変更ができるようになりますっていう未来がもう来ていますそしてそれを助けるためのツール群がいっぱいありますなのでこのブロックの基礎さえこの使い方の基礎さえを覚えていただいて先みたいにこういう風に親込になってるんだなじゃあここの部分をきっと複製すればやっぱ増えたねじゃあここ2020年にすで打ち替えられるよねじゃあもしかしたらこのタイムラインの設定はここにあるかなここにはないのかじゃあこの項目の中にはあーあるねあるねっていう風にしたりとかしたらそのルールはワードプレスの中である程度決まっていてそれにそういうようにすれずの作詞さんが作ってられますかな覚えていけるということになりますぜひお試しになってくださいでここまでがいかがでしょうちょっと楽しくなっていただけたら嬉しいかなと思っておりますでクラッシックエディターからのティップスについてというところを話しますあの今回クラッシックエディターについてクラッシックディターってすごいねエディターに向こうについてもう我々そのワードプレスにかかわって長くてプロでやっているものはもう本当にクラッシックエディターからブロックエディターに完全にこうしたわけですけどもSNSなどを見るとまだまだブロックエディター使えにくいよねとかどうしていいかわからないとかクラッシックエディターでいいのに言っていた声があったのでそういった方に何人かにちょっとインタビューをさせていただきましたそしたらたまたま私が声をかけた何人かの方はもうすでにブロックエディターに実は移行してますよっておっしゃっていてそうですかって言ってたんですけども実際にはもう要は心理的障壁というかなんかこう腰が重いなということが一番の障壁でしたっていうふうにおっしゃっていたのでもうエイヤで移行したら行けますよっていうのは割と行ける可能性があるなというふうに感じておりますでなるとちょっとソリューションではないので根性論になってしまいますからクラッシックエディタープラグインの設定で両方を使えるっていう設定に変更されることをお勧めしております設定の投稿のところにおいてクラッシックエディターをプラグインをこのQエディターを使うように入ってるんですけどもここの部分はどっちでもいいんですができることならブロックエディターを先にしておいていただいてユーザーにエディターの切り替えを許可っていうのをハイにしときますデボルトだと多分いい絵だと思いますこれハイにしとくとですねどうなるかと言いますとこの投稿の一覧においてこのようにマウスオーバーしたときにブロックエディターで編集しますかQエディターで編集しますかっていうのを自分で選べますQエディターで編集しているときにここにも出ますブロックエディターに切り替えましたかっていうのが出てきますからこれ切り替えるとブロックエディターとして編集になりますっていうふうにどっちでもできるようにしておいて最悪だめだったらクラッシックエディターを戻るけど一応ちょっとブロックエディターも使ってみるかみたいな状態にされるのがステップの位置としては良いんではないかなというふうに考えておりますという形ですクイックタグについてはさっきお伝えしたとおりご自身での独自パターンを色々使っていただくことでうまくいけるんじゃないかなと思いますまた基本的にはブロックで書いたものそれぞれ全てコピー&ペーストができる状態になっていますですからさっきちょっと書いた一ページでも2ページでも書けばもうそれは皆さんの資産になるってことですねこれですねこれ例えば作ったとしますもう記事にしろ固定ページにしろ使えるのでここからコピーするだけですコピーして今度新しいページに行って新規ページに行ったときに貼り付ければ同じものが貼り付きますこれ便利ですよね例えばこうやって注文住宅のなんかガンパタページを作りましたとした場合にも今度はここから全てのブロックをコピーコピーですねこっちからでも結構ですしここで全部を選択してここからブロックをコピーでも一緒ですでは全部のブロックコピーされた状態になりますからこの状態で新規追加をしてここで貼り付ければ全く同じものがボコンと出てきますっていうように一回頑張ったものが今後ずっと使い回せますこれも何か良くないですかきっと慣れれば慣れるほど良いことがいっぱいあると思いますのでぜひ使ってみてくださいということでただですねここは今までブロックエディーター良いことばっかし言ってましたけどもいくつか簡単には行かない場合もあると思っていますまず一番パターンとしてありえそうなのが以前に買ったテーマでずっと例えばブロガーさんとかでずっとずっとブログを書いてます特に困ってることはありませんとブロックエディーターにテーマが対応してない場合っていうところがあります今の機能のままで十分でそれでいいんですだったらいいのかもなんですけどももしブロックエディーターの今までのさっきの機能とか触ってみたいとかってなった場合にはテーマがブロックエディーターに対応してくるためのお願いをするか期待してますかもしくはもう切り替えましょうっていう感じですねその時に今お紹介したような機能のベクトルさんのテーマだとかライトニングとかですねとかスノモンギとか本当におすすめですそしてあとページビルダーを使ってる場合これはエレメンターだとかビーバービルダーとかいくつかページビルダーといってブロックエディーターが出るよりも前にプラスチックエディーターより使いやすいブロックエディーターみたいなものがあった方がいいよねっていうことで提供されてたことがあってそれも今もどんどんどんどん進化してずっと続いているのがありますブロックエディーターは似たようなものになっているけども異なる部分も結構あるみたいなものがありましてそこはページビルダーの提供しているメーカーさんごとに方向が多分違うと思いますもう我々は自分たちのビルダーでいくんだなのかそれともブロックエディーターになるべく合わせていくようにしようなのかはビルダーさんごとのページビルダーソフトウェアごとの方向性がいろいろとありますからそこを見極めて追従いただくのがいいかなと思います追従するのか2回目から決めていただくのかいかなと思っていますあとカスタンフィールドを使ってる場合っていうのも結構あるかもしれません昨今ですとヘッドレCMSみたいなものもありますけどもお客様にこういった自由に入力させるのは帰って良くないんじゃないかだからこそより限定的に入力枠をもう固定の名前とか値段とか感想とか星の数とかっていう入力枠を分けてしまってそのデータとして保存した方がいいんじゃないかっていう内容の世界観もあるにはあると思いますただブロックエディター今見ていただいたとおり自由に楽しくできるんでお客さんがそういうふうにもっともっとやっていきたいと思った時には一番入力を発揮する機能だと思うんですよねなのでそちらに使ってみたいなという場合にはカスタンフィールドを使った過去記事は過去記事としてそのまま置いといてこれからの記事についてブロックエディター化することでも頼みいただけるならそのやり方がいいんじゃないかなと思いますこの辺りについては現状のテーマをどういうふうになってるかどういうポッシュの状態になってるかもしくは運用の体制とか皆さんの予防がどうなってるかによっても変わってくると思いますので政策いただいた方もしくは政策者我々のようなものにご相談いただいて何かしら決めていただくのがいいかなというふうに考えておりますこれからパターンを利用した効率的なページの作成というのをお見せしますこれはもう半分魔法みたいなもので2024が本当に素晴らしいテーマだからこそできることなんですけども今ご紹介した日本のテーマたちでブロックパターンライブラリーがあるものとかはほぼほぼ同じようなことができると思いますのでご覧になってください2024は新しいワードプレスの6.4から提供されている公式のテーマという形になっていますまず2024に有効化します既にトップページが何だかかっこいいんですけどねこれが簡単に作れる機能を搭載しているという状態ですどういうことかというと固定ページを新しく作りますそれといきなりまずページテンプレートのスターターキットみたいなものが出てきますこの中から好きなものを選んでページのスタートができますというインターフェスになっていますとりあえずこれを選びますねこれをポチッと選ぶとこれだけでもう今はここにその内容が入りました嘘みたいですけど入りましたでちょっとこれ2マチだわと思ったらじゃあ今回FAQいらないからこれはもうケースを決めたら終わりですデリート今しただけですその下にもう1個入れたいなと言われた時には今覚えたやつですね後に追加を押してここに新しいパターンを追加しますプラスからすべてそしてパターンに行ってここに好きなだけパターンがありますねギャラリーに行けば写真がいろいろ出てきますここにギャラリーそうですねこれにしましょうかねポチッじゃあとりあえずなんか素敵なギャラリーが1個増えましたねぇねぇって言ってますけど本当にねぇって感じがするんですよねそしてここにすべてを表示からもう一度パターンに行ってやっぱり最後はCTAですかねCTAというのはコールドアクションの意味で最後にお問い合わせの場所を回復みたいなものですけどもわかりやすいコールドアクションがいいのでこれにしましょうかこのこれポチッこれで今Join900プラスサブスクライバーズサインアップしてねっていうのが入りましたこれでこう返って押せばそうかこれでテンプレート上はあれですね唯一タイトルがあるとダサいので固定ページのテンプレートでノータイトルを選びますタイトルなしですねこれでもう今ぼんやり喋りながらやってるわけですけどもこのようにかっこいいモダンなページのひながたがもう出来上がりましたという状態になっています当然これはレスポンシブに対応してレスポンシブになってもかなりきれいにちゃんと収まるようになっていますここがねなんかワードプレスのすごさですよねワードプレスのデザインチームの人たちがみんなで一生懸命考えた結果がここにあるのでなんせかっこよくなるっていうという状態になりますはいでこれを今からのページ製作の流れとしてはこんな感じですパターンを選ぶパターンを並べるパターンをカスタマイズしてブロックごとにまとめて独自に使いますみたいなことができるということになります例えば使い回すっていうのは今変更が出来ますよっていう話をしましたけども例えばこれが1個の製品のページだとしますなんかこう5種類くらいの製品があるとしてこれが製品1の変品01の紹介ですというふうになったとしますスーパーフルートラー何がしみたいなねこれが所有品1ですねネイチョープローダクト1としましょうゼロ1としておきますでここを保存してじゃあプローダクト2位にした時どうしたらいいかっていうとまた新規ページ作ってこの中身の内容全部フルサイトコピーしてでここに貼り付けてよいしょここで貼り付ければもうプロダクト2が始められるという形になりますね2ゼロ2っていうふうにすればこれでOKですでこれでここの部分をノータイトル選んでまた公開すればこれで2つの商品ができましたという形になりますすごいことですよねでさらにもっと高機能できますこの中身の内容は全部バラバラなんだけども一部例えばここに間にあるFAQについては同じものにしたいみたいなことがあるかもしれませんFAQについてはどこの商品も共通のものなんだよねみたいなパターンですねこのFAQについてはみんな共通のものとしましょうっていうのがあるかもしれませんこれも実現が可能ですこれが同期ブロックと呼ばれるものになりますこの子はこのブロック自体は完全にどこでやっても同じものが表示されるという内容になっていますちょっと分かりにくいと思うのでこれ更新しておいてこっち側にも同じブロックを入れますあとから追加してこれ貼り付けますこれで更新しますでここと今このプロダクト2とプロダクト1はそれぞれFAQのブロックを持ってるという状態ですねここFAQを持ってますしこっち側もFAQを持ってる状態という形になりますここだけが同期されていますここは今製品1と製品2ってなってますからこっちがわわわわって書いてもこれはこのままこっちはわわわわですこっちはウルトラスーパーの逃がしのままですただここはフェイルブロックなので同期のデモですというふうにしておいてこれで保存をしますそうするとここで聞かれますここですねパターンのFAQも一緒に保存するけどいいかいっていうふうに保存されますねつまりこのブロック自体も上書き更新がされたという状態になりますでこの状態でこっち側プロダクト2のほうをするとこっち側はここですね同期のデモですというふうに今変わりました伝わりました?使い回すブロックとそれが同期するのと同期しないのと持たせられるっていう感じなんですこれらをご自身で自由に設定することができます例えばじゃあこのブロック同期にしようと思ったら最後に入れた後でここでグループ化さっきパターン化しますねパターン作成の時にこの同期を入れておくだけです同期のチェックを入れておくとどこで使っても同じ変更点が同じ変更点になる同期を使わない場合にはそれぞれでパターンとしては入力されるけどもここに配置された時にはもはやバラバラなものとなって自由に変更できるただのひながたとしてなるという形になっています嬉しいですね伝わってたらいいんですがこういったものを組み合わせることで本当に自由度高くブロックが変更できてページが格好良く作れる時代がやってきたという感じになっております今ちょっと2024だからじゃないのっていう話もきっと出てくるかと思いますからいくつかちょっと準備しておいた他のテーマでのいろんなものを見ていただこうかなと思っていますこれとかこれはRKブロックで価格のお問い合わせとさっきの円滑を縦に並べていただくものですこれも全部RKのパターンブロック内から提供されているものでそれらを組み合わせてただコフィペしただけですそしてこれらは全てブロックとして変更収が可能ですこっちは注文住宅の内容でこれをデフォルトのテンプレートにしておいてここをレイアウトを位置からにするとこれで格好良くなるこのように注文住宅についての内容がそれぞれ変えて出てきてこの内容をもとに変更して画像を変えて本文を変えてというような形で作業ができますもうちょっとうまくパターンができればいいですけどもこのあたりプラグインを有効化するとここからリンクになってたりする今あれだパターンが有効化されてないから余計なんだブロックパターンを有効化してこれでこうするとこれでより格好良くなりましたこれも何したかというとここのVKブロックライブラリンからあるパターンのやつを戻ってきてコビペしただけですだけなんですこっちのRKもそうでRKブロックからRKのパターンからコビペしただけなんですもちろん途中からね結局自分たちでお客様のためのことを考えたら自分たちでやるということになってくるかもしれませんけどもこれで成り立つならこれでそれだけで十分かと思いますしさっきのスライダーもありましたし今までのビジュアルエディタークラシックエディターではできなかったことが本当にたくさんできるなというふうに感じていただければと思いますではちょうどお時間になりましてこのブロックエディターの便利さに驚いてもらえたら嬉しいなと思いますそして常にもう私たちのところだとこういった機能をご提供しておりますのでお客様がお客様自身で新しいサービスページとかが増えたときにもう複製して作っていただいているサイトも割とありますまたですねこれから冒頭に申し上げました通り共同編集だとかAIが作ってくれるだとかそのパターンを特定の場所で好きなパターンを選べるようになるとか本当にいろんなものが拡張されてやってきますぜひまだブロックエディターそんなにだなと思っている人はこの機会に触っていただいてブロックエディターお友達になっていただいてぜひ素敵に楽しくサイトやページを作っていただければなと思います今日はちょっとご紹介しなかったんですけども今はコンテンツ部分だけでと同じような感じでヘッダーやフッダー記事の一覧などなども少し学んでいただくともうなってますつまりコードを書かなくてブロックを操作するだけでその箇所も作れるようにワードプレスになってきていますそしてブロックエディターを使ったテーマ編集のワークショップもベッドありますのでもしよろしかったらそちらも過去のアカイブご覧になっていただければと思いましたということでお時間になりましたので質疑応答につきましてはいろいろと皆さんもまだ聞きたいことがあるかと思いますので後から6日止めてからそれだけちょっと取りましょうかわかりやすい説もありがとうございます今クロエクスケディターというかカスタムフィールドのようにで構築してまっているんですがこれからブロックエディターではパターンに置き換えていけばいいのでそうですねそちらのほうが今は推奨になってきていると思いますもちろんカスタムフィールドがいいところは記事詳細と一覧とでそれぞれで表示しないといけない場合ページでも乗ってるし詳細でも乗ってるあ、今なんか消えた?大丈夫?大丈夫かな?画面出てます?出ているかな?はい、そういったところでこれからカスタムフィールドの場所はだんだん少ないと思います少なくなると思います簡単な表テーブルを作りたいときのお勧めのほうがあったら教えてくださいこれはフレキシブルなんとかブロックっていう秋浜野さんが作ったのが最高ですテーブルバグインこれですねフレキシブルテーブルブロックっていうのがありますこれがもうセルの結合からセルごとの色分けからもう何でもかんでも一番上手にできますからこちらを使うことを強く強くお勧めしますということですいませんお時間となりました一旦ここで録画を修了させていただいて今日のセッション今こそ知りたいブロックエディターの使い方にも修了させていただきたいと思います長い間ご清聴ありがとうございましたどうぞブロックエディターを使って素敵なワードプレイスライフを作ってくださいありがとうございました