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