はい じゃあ皆さんおはようございますおはようございますそして今年も明けましておめでとうございますおめでとうございますはい ぜひまた今年もオンラインワークショップたくさん参加していただきたいなと思いますはい よろしくお願いします今日のテーマはサイトエディターでのテンプレート編集になれようということですここ数回ワークショップでブロックエディター全般の説明ですとかクエリーブロックの説明とかいろいろブロックエディターを見てきましたで 前回のワークショップはワードプレース6.1の更新内容を見てみよう内容でテンプレート編集がかなり協力になってきたということを見ましたなので 今日はそのテンプレートとは何かそしてどういう仕組みで自分のサイトにどう適用していけるかというそこに卓目して皆さんに紹介したいと思いますはい いつもと同じスライドですが私ベンと言います2014年からワードプレースを使っているのでもう今年で9年になりますね今年ワードプレースは20周年を迎えるのでワードプレースのその人生の半分くらいを私も見てきたということになります人がなるほどと理解する瞬間が大好きですなので今日の話の中でもこれが好きだなとかなるほどと思った瞬間があればぜひチャットに入れたりあれはもう声を出してなるほどと言っていただけたら私もそれをエネルギーにしてお話し進めたいと思いますはい これもいつもと同じですがワークショップはともに学ぶ場で今日は参加者まだ一人なんですけれども皆さんいつでも質問してOKですしお互いの質問に答えてもOKです6日が5日ワードプレース.tvにアップされますのでどなたでもいつでも見れるようになりますはい では今日始めるにあたってサイトエギターでの特にテンプレート編集の経験はどのくらいありますか今日初めてテンプレート編集を見る方は一番毎日とよりテンプレート編集毎日と言う人もいるのか分からないですけど10番だとすると皆さんの経験どうでしょうか西原さんどれくらいだと思いますかあるのは知ってたけど使ったことはほとんどないですうんうんうんはい では1、2くらいかなとはいはい あの多分ですね今回の6.1の更新で使い物になったというのが私の個人的な感想です今までもあるはあったんですけどちょっとこう思うように使えなかった部分が今回の6.1でだいぶ更新されたのでこれでようやくプログラムコーディングのできない人もテーマが作れるようになったいよいよ最後までやってきたという感じですピコだから私はすごいなと思ってるんですけど一般イメージが使うにはなかなかちょっと難しいかもしれないので今日の説明を聞いて少しでも馴染みを持っていただけたらいいなと思っていますはい ザクリ 今日の内容ですがまずサイトエディターの紹介西原さん多分ご存知なのでもうここはあっさりにしてホームページの編集についてちょっとここ癖があるんでちょっとこの説明を丁寧にしたいと思います昨日のプレゼンでもこれを説明して今日初めて分かりましたと納得してもらえた人がいたのでちょっとここを丁寧に行きますその後テンプレートを編集するに当たってまずテンプレートパーツというものがあるのでその編集の流れを紹介しそして今日の目玉は最後のカスタムテンプレートを作ると既存のテンプレートを編集するだけじゃなくてもう1から自分で新しいテンプレートを作りそしてそれをどうサイトに適用していくかこれを紹介したいと思いますで 今日実はスライド版もそれくらいですあとは全部実演なのでやりながら質問があったどんどんそれは聞いていただきたいと思います一応参考までにスライドのリンクは今チャットに入れますけれども中身はほとんどこれで以上になります今日またローカルで立ち上げたタイトでワードフェース6.1.1 最新版ですねテーマは2023一番最新のデフォルトのテーマを使っていきたいと思いますで1つこちらが今日使っていくカラフォのサイトになりますテーマが2023ですねいつもながらフラグインはなしですこれちょっと何をしたかというとメディアとかちょっとサンプルの投稿いくつかインポートしたのでさっき見えてましたけど基本的にプラグインはなしで全部基本的なコアのワードプレイスをお見せしたいと思いますこの状況でサイトこうなっていますここ私がちょっと足したサンプル投稿なんですけどテーマそのものは2023そのままですでという結果のサイトがこちらになりますこれも既に作ったものなのでここに持っていこうと思うんですけど見ていただきたいと思いますヘッダーが全然違う形になっていますそれからあとはフッダーも全然違う形になっていますフッダー部分そして今日一番の目玉はこのテンプレートなんですけどここ投稿がたくさん並んでるんですけど投稿を開いた後にこの川沿いの花火とハッピーニューア開いてみますけどここのレイアウトが違うんです川沿いの花火はアイキャッチ画像だけデデーンとありましてフッダーもサイトのフッダーと違うシンプルなフッダーになっていますこれなんですけれどもこの投稿に関してはフッダーがもう違うフッダーに変わっていますこちらの投稿に来るとまた全然違っていてアイキャッチ画像がなんか黄色くなってタイトルがあってテピストがあってコメントを残すとかいろいろあってサイトの通称のフッダーを使っていると私の今日のデザインのイメージとしては例えば同じサイトでブログを2個持ったイメージですこれが普通のブログで投稿記事があって例えばもう一つ自分は写真家で写真ブログを持っていたいという時に写真の方は別に投稿の内容もないですしもしかしたらタイトルもいらないので本当に写真だけデデーンと見せられたらいいので同じ全部投稿なんですカスタム投稿ではなくても全部同じ投稿なんですけど違うカスタムテンプレートを適用させることで見た目を全然変えることができるといったこれをお見せしたいと思いますなんとなくゴールははい分かっていただけたでしょうかはいシャラさんもどこかブログ臭さがあったワードプレイスが雑誌みたいになってきましたねありがとうございます私は別にデザイナーではないんですけどまあこれをテンプレートでやっていく家庭をお見せしたいと思いますはいではまずサイトエディター初めての方もいらっしゃるかもしれないので外観のエディターというところを押していただくともう直でサイトエディターの中に入ってきますでそれではホームページの編集になっています一度ここを開いていただいて今日はここの中身を理解するのが目的なんですけどテンプレートこの2023が用意したテンプレートがこれだけこれもテーマで用意されたテンプレートなのでお使いのテーマによってこのテンプレートがもっと多かったりそういうこともあり得ますで右目の新規追加化が自分でいろんな種類のテンプレートを足すようになったのが今回の6.1の大きなアップデートですね特にこのカスタムテンプレートを最後の方見ていこうと思いますもう一つテンプレートパーツというのがありますこれは同じテンプレートパーツを複数のテンプレートの中で使うことができるんですで再利用ブロックみたいな考え方でテンプレートパーツを編集するとそれを使っている全てのテンプレートにも更新が反映されるようになっていますなのでこれまたテーマによって用意されているこうするとか変わってくるんですけどこの2023はまずヘッターとフッターテンプレートパーツが用意されていますで先ほど見たこちらのテンプレートそれぞれでヘッターパーツとかフッターパーツが紐付いているのでテンプレートパーツで編集をするとその編集がこちらのテンプレートにも反映される形になっていますもう二つこのテーマで用意されている投稿メタとコメントというものなんですけどこの投稿メタというのは投稿の下に現れる投稿日とか投稿者とかタグとかカテゴリーとかあのちょっとこちらのこっちを見たほうがいいですこれ今まだ編集をかけていないサイトなんですけれども投稿の下まで来るとこの部分ですねここをこのテーマはテンプレートパーツとして定義しています今のでここのレイアウトを変えたいここのデザインを変えたいタグとかカテゴリーはもう思い切りたいとかそういったことがあればここのテンプレートが投稿メタのテンプレートパーツを変更することでそこのデザインが変えられますでコメントというのも一緒でこの投稿の下のコメント部分ここのデザインもテンプレート編集の中で変更が可能になりましたこういった部分は従来のワードプレイスだと編集がかなり難しかったというかテーマファイルにプログラミングコードをしてそこのテーマファイルで変更しなきゃいけなかったのがこのテンプレートとかテンプレートパーツの導入でもうユーザーがブロックエディターを使う感覚でこのあたりも編集が可能になりましたはいとりあえずなるほどありがとうございますとりあえずここの金屋ですねテンプレートパーツとは何かそしてテンプレートとは何かという話でしたで今日少しお話する中でホームページの編集について大事なことがありますで今私設定の表示設定を開きましたで今ワードプレースをデフォルトでインストールするとホームページには最新の投稿が表示される設定になっていますつまり固定ページを開いてもここにホームページはないんですね固定ページではなくて最新の投稿を表示する形になっていますでもう一度外観のエディターを開いて最初これホームにしてますけれどもこのホームをホームのテンプレートを編集することで最新の投稿を表しているホームページの編集ができますただ私今まで実は自分のサイトを作るときには従来のワードプレースだと最新の投稿ページの編集があったのでいつも固定ページに変えてたんですね自分でホームページを固定ページで作ってここで割り当ててで投稿ページもここで割り当てるということをしてましたで今テンプレートの一覧にホームというのがあるんですけれどもこれはこちらで固定ページを投稿ページのレイアウトになりますだからホームという名前なんですけどホームページのテンプレートであるのは最新の投稿の設定にしているときだけです固定ページという風に設定を変えるとこれもホームと変えていて詫びらしいんですけどホームではなくてこちらの投稿ページのデザインがホームで変わるという仕組みになっていますここがちょっと難しいですねもしご自分で新しいホームページのデザインを作りたければここのフロントページという新規テンプレートを作ることもできるんですけれどもなんかテンプレートでいじってもホームページが変わらないなというそういう問題にもし出会うことがあればここの設定を逆にしなきゃいけない可能性があるのでそれを一つ注意していただきたいと思いますここに書いてはいるんですけどちょっと紛らわしいのでこれは最新の投稿を表しているときにはホームページのデザインですしホームページが固定ページになっているときにはこちらの投稿ページのレイアウトがこれで変わってしまうということを覚えていてください最初からフロントページを決め打ちでも使ってしまったほうが混乱しないですかねそうだと思います私はそうしますそうした場合もしそうした場合なのでここで固定ページでここで何か決めた場合にホームページにはこのテンプレートが適用されます固定ページよく多分ホームページだけちょっとデザインを変えたいというサイトは結構あると思うんですねなのでここの固定ページがホームページにも他のページにも全部適用されるとちょっと気に入くはないので今日やるカスタムテンプレートというのがその時使えると思います大丈夫ですかこのネーミングがややこしいと思うんですよホームとかフロントとかここの設定がこれ一つ注意していただきたいなと思うんです今日は最新の投稿のままでいきます最新の投稿にしてなのでこのホームページを編集すると変わるというその流れでいきますはいホームページを一旦テンプレートを開きましてここのリスト表示これ非常に便利ですこのホームページのレイアウトは大まかに3つのパーツから内立てますヘッダーそしてページ本体大きなグループブロックに入ってますけどページ本体とで先ほど見たようにヘッダーもフッターもこれテンプレートパーツですなのでここのフッターをもしここで編集をすればフッターというテンプレートパーツを使っている全部のテンプレートに変更が生えされます私個人的にはちょっとややこしくなってくるのでヘッダーやフッターはここで編集するのではなくてテンプレートパーツで取り上げて編集した方が分かりやすいかなと思いますホームページを編集していたはずがこのページも変更されちゃったとちょっと感じがびっくりすることもあるのでこちらで編集したいと思いますテンプレートテンプレートパーツで編集したのは全部のページには影響されちゃうされるんですけどまぎらわしいのは例えば例えばここの空間を広くしたいからここにスペーサーを入れるとします今ここに入ったからいいんですけどもし挿入の位置を間違っちゃったらここに入っちゃうこともありえるんですよここの見た目は全く一緒なんですけどここに入っちゃうと全部のページでスペーサーが変わったりするのでここを慎重に見てればいいんですけど私は今はフッター編集モードって頭が切り替わってるときはここでやるよりかは一緒のことこっちでした内容にしてここで編集の方がシンプルかなと思いますはい個人の好みもあると思うのでご自分にあった編集方法でいいと思いますはい今編集するのはヘッターですヘッターの編集からいきますここをクリックすることで色々設定を変更もできるんですけど今日は特に使わないでこのままでいいと思いますとりあえずヘッターの編集をして今ヘッターはこれなんですけどこのヘッターをこうしちゃいたいロゴがあってサイトタイトルがあってメニューがあるこれをまたリスト表示で私はどうしたかというとこれを全部消しちゃいました消しちゃってここに実はパターンを導入したんですねパターンのヘッターを選ぶといくつがここにあるのでこちらでしたこのロゴマーク入りのヘッターをポンと入れるとここにたくさん入ってますこれ画面がちょっとなんか変なのはワードプレイスのクセなのでちょっと保存して画面を再表示させるとちゃんとここに先ほどのテンプレートの中にパターンを導入したことになりますここで今ここにですねロゴ サイトのロゴブロックとサイトのタイトルブロックとナミゲーションブロックがある今まで従来はサイトのロゴを設定するときはカスタマイザーという機能の中でやってたんですけれども今はブロックエディターの中でこれができますこれをポチっとしてこの画像を選んでこれで導入しましたさらにですねここにサイトアイコンとして使用するという設定もあるんですこれを今は付けておくんですけれどもこれで保存をかけるとブラウザーのタブに見えているこのアイコンもこの画像に変更されるということになってちょっとやってみましょうかこれを保存するとちょっとサイン読み込みしますがこの通り ここのロゴンをここで編集がされましたなので本当にもうカスタマイザーは必要ないんです全部このエディターの中でできます今私はたまたまテンプレートパーツの中でサイトロゴブロックを編集したんですけどこれがテンプレートの中であってもあるコテンページやある投稿の中であってもどこでもこのブロックに編集をかけるとここのアイコンだったりサイトのロゴが全部変更されますなのでこれはサイトを通して気も付いているという理解を持っていただくといいと思いますそれからサイトのタイトルも同じ原理ですこのサイトのタイトルというのはここと同じものになり設定の一般のサイトのタイトルなのでこちらを変更したらこちらに変更が変えされますしこちらを変更してもこちらに変更が変えされます今日はちょっとやってみますけども今日のテンプレートというふうにこちらで保存をかけてこちらを対読み込みすると今日のテンプレートとちゃんとこちらも変わっていますなのでここら辺の設定もブロックエディターで変更が効くようになってきました最後メニューですねはいすごいですねありがとうございますメニューも今作ってしまいます新規メニューの作成でここに例えばホームというリンクを入れるとかあとは固定ページがあるのでそれを検索して入れることができます例えばお問い合わせというページをお問いでやると出来上がっているお問い合わせページですねお問い合わせとかあとはサンプルページというページもすでに用意していたので検索をかけてこのページを足すということができます今ホームというのはとりあえず文字だけ打ったんですけどリンク先が設定されていないです今回ちょっと私ローカルのサイトなんですけどホームページのリンクなのでこれをコピーしてこのホームというメニューアイテムのこのリンクをこれに変更しますこれでロゴもできましたしサイトのタイトルも設定しましたしメニューも設定したので全部保存を押してこちらを更新するとサイトのヘッダーが変わりました今ずっとこれはテンプレートパーツの中で編集をしてましたヘッダーというテンプレートパーツを編集してそれがサイトに反映されたということです今のホームをURLじゃなくてこのワールドプレスサイトのトップみたいな相対的な指定できないんでしたっけできるんでしたっけ私もこれはですねホームというローカルで作っててホンカドーンとか持ってた時に忘れそうでそうですね固定ページがいけんならホームを面倒見てよってちょっと思いますよねこれちょっとこれをもう一回やってみましょうスラッシュだけとかうまくいかない気もしますちょっと出てみますかこうしてちょっと別なページに飛びホームを押すとあれいったスラッシュだけでいいのかはいうまくいったっぽいですそれで他のページに飛びここにカーソル当てると左下小さいですけどちゃんと私のホームページのURLになっているので使えますねスラッシュでありがとうございますダメ元でやってみたらうまくいきましたはいありがとうございますだからもしかすると全部もしかしてできるんじゃないかなこれも今のサイトのURLが左にあるんですけどこれをスラッシュからだけでもしかしていけるかスラッシュここ断り合わせっていう日本語なので公開ましたこれでちょっと保存してやってみましょうこれをサンプルページから断り合わせに飛べますなのでスラッシュから始めればURLの指定はしなくてもいいということですあのえーとなんていいんですかPいくつとかそういう方式を変えるときと飛んじゃうんでしょうねダメなかもしれないです試してみますはいこれがヘッダーでしたはい続いて今フッターが面白くないこういうフッダーなのでこれをこういうフッダーに書いていきますこちらもあっで今私編集をしたがここにアウンポチがつきましたでこれはテンプレートがカスタマイズされましたというアイズでのでえーとまああのカスタマイズされましたもし色々編集した後に思った場合にはここの3つからカスタマイズをクリアというオプションが出ますでこれを押すと自分の加えた編集が全部消えて元のテーマのヘッダーに戻りますただ注意していただきたいのはこれを押すと本当にクリアしますかというかそういう確認画面なしで即座にクリアされますのでこれを押すと全部消えてしまうで使う時は注意してくださいはい次フッターの編集をしようと思いますフッターも実はこれ全部消してパターンを利用しました今回はパターンデレクトリーというものから持ってきましたパターンデレクトリーはご存知でしょうかパターンデレクトリーここだとこういうURLかはい こちらがパターンデレクトリーになりますちょっとURLをズームのちゃんとに落としますけれどもはい これはワンドプレイスのU3の皆さんが投稿というか提出をしたパターンたちになりますこのプラスマークからパターンを選んでワードプレイスのデフォルトでついてくるいくつかパターンをここでここから選んだんですけれどもパターンデレクトリーというところから検索をして他のユーザーさんが提出したパターンを自分のサイトに言えることも可能です例えばここでヘッダーというのを選ぶといろいろなヘッダーが出てきますのでこれをご自分のサイトに入れることができますパターンデレクトリーのこのパターンは全部審査済みです審査をしているチームがあって不適切な内容がないかとか確認はされているので安心して利用してもらえると思います私は事前にちょっと自分のほしいものを探して今 こういう蓋を見つけました自分のほしいやつを見つけたらここを例えば変えてモバイルだとどう見えるんだろうとかもうパターンサイト上で確認もできるのでこれ結構便利ですこれにしようと思ったら自分のサイトへの導入は単純でまずポッピーパターンボタンを押しますそしてエディターにやってきて今段落ブロックが1個残っているのでここでペーストをしますこれだけでこのパターンディレクトリーの何千というパターンから好きなものを自分のサイトに入れることが可能です今 コピーしたそのパターンの正体っていうのはHTMLかなんか出ていてテキストデータ出ていてテキストデータなんですよ画像も来るんですね画像も来てますね簡単にちょっと待ってくださいテキストをお見せしましょうかこれ多分見えてますよねアンタイトルドーのここに同じようにペーストしてみます何がペーストされたかというとHTMLではなさそうですかHTMLなのかHTMLですね多分でブロックの設定が色々含まれてますねパディングとかマージンとかこの画像に関しては画像はネットから読んでるんですかね多分そういうことですかねどこかここらへんにありそうですけどここありましたねカバーの画像はここから引っ張ってくるという形になっていますありがとうございますじゃあ今コピーしたのワードプレイスを持っていかないで例えば自分のテキストデータに貼ってストックしとくこともできるあ、できますねはいというと自分のもできちゃうんですねカスタマイズしたのもパターンをそうです今すみません私英語版開いてますけどあれだったらお気に入り登録もできるんですよなのでもうこのサイト上でお気に入りに登録して後から多分ここですねフェイバリットっていうのを押すと自分が今までお気に入り登録したものがここに出てくるということもできますマイパターンはたぶん私が提出したパターンですね私は出してないんですけれどもということができますはいで今回はこれを他人の画像を使うのはあまり好きじゃないので自分の画像に描いていきましたこれも割と簡単で変更はこの置き換えボタンでできますメディアライブラリを開いて自分の画像に変更この写真も置き換えでこちらに変更ちょっと大きいのでこれを小さくしてもうちょっと小さくして250250とか150の150でこういう感じで変更できましたあとはもちろん文字もご自分のように編集ができるのでこれは全3ではありませんこういう形で復習できるけど全部フッターというテンプレートパーツを編集してました保存をかけるとうわーこちらのサイトのフッターがこれに変わりましたはい例えば固定ページを開いた時のフッターもこれに変わっていますしトークを開いた時のフッターもこれに買ってるサイト全体でフッターが変更されていますはいこれがちょっとテンプレートパーツの話でしたでせっかくなんでホームページもちょっと変更したいと思います先ほど私スペーサーとか入れたり消したりしたので青丸ついてますけどホームページを変更していきますフッターとフッターは私が先ほど編集したものにすでに変わっているのであとはこのグループの中を変えていきたいと思います例えばこのタイトルを変えたりあとはですねおすすめのほうがありますかこれ2023のデフォルトで入ってるんですけどこれいらないので丸ごとカランを消してしまいますスペーサーもいらないですねごめんなさい大丈夫かな一旦これで保存をしてもう一回サイトを確認しましょう違う方針するとタイトルがありますし下のここのおすすめのほうなくなりましたはいあとですねこれ実は背景色とか自体がちょっと変わっているんです今の私のファイトだとこうなっていてこれをこう変えましたこれも一つ一つ変更していってもいいんですけれどもこの2023はスタイルボタンを押すと10個のスタイルバリエーションが既に用意されていますもうテーマファイルの中にいろんなバリエーションが用意されていてこれらは色もそうですし自体もそうですし例えばこういう写真が全部赤がかってますけど角が丸くなるとか色々下のフッターとかも含めて変更してくれるもう本当に一つのテーマファイルの中にたくさんのテーマが入っている感じです私が今回ここで選んだのはこれかな確かマニゴールドマニゴールドですねこちらになっているので1個1個もちろん背景色変えたりこれを変えたりとやってもいいんですけど思い切ってマニゴールドスタイルにとやるとこのサイトが急にちょっとこう大人っぽい感じの色味に変わりましたはいホームページの編集はここまでなんですけどとりあえず大丈夫そうでしょうか1個1個色とか指定しちゃうとスタイルは優先されないんですねそうですねそのスタイルの背景色が変わるそのスタイルの色が変わるってなっちゃうんですねじゃあなんか統一した感じにしたい時はスタイルでまずやったほうがそう感じですねはいはいありがとうございますじゃあ次なんですけど投稿のデザインを見ていきたいと思います今デフォルトのデザインですと大きいアイタチ画像があってサイトのタイトルがあって記事があってメタ情報があってコメントがあってフッターが来るというこれがこのテーマのデザインですただ私たちは写真家だと思っていただきたいんですけど写真だけ目立たせたいんですもうフッターもシンプルにしたいしフッターの写真は邪魔なのでフッターもシンプルにして投稿のタイトルとか記事とかもうそれも全部いらないというふうに書いていきたいですでここにどうやっていくかなんですけどまずフッターがサイトの他の部分と違います他の投稿もちゃんとこのフッターがあるしホームページもこれがあるんですけどここはフッターが変わってしまうので新しいテンプレートパーツでフッターを一つ作成しますどういうことかというとテンプレートパーツでここフッターがあるんですけど私のオリジナルのフッターを作ることができるんでなので今新規追加を押して一般のテンプレートパーツが下手がフッターが選べるので私は新しいフッターを作りますでここにテンプレートパーツの名前をしているんですが昨日のワークショップで発見したんですけどこれを日本語にしてしまうと後々エラーが発生してサイトが壊れますのでこれはワードフェイスのバグなんですけれども今はテンプレートパーツの名前は英語で指定するようにしましょうなのでシンプルフッターという形で新しいフッターを提出しますはいどういったフッターかというとここにサイトのタイトルがあって実はこれはサイトのタグラインですこちらに今からのフッターなんですけどまたパターンを使ってフッターのこれ単純なこれを元に変えていきます今サイトのタイトルと弾楽なんですけれどもこの弾楽を消してしまってここに新しいブロックを足しサイトのキャッチフレーズがキャッチフレーズというのがこれをちょっと足すんですけどサイトのキャッチフレーズというのはこの一般設定画面のこれですここのキャッチフレーズの話です先ほどタイトルブロックを変更するとここが変わったということをお見せしたんですけど逆も可能なんですここでキャッチフレーズとかタイトルを編集するとこちらでも変更が効くとちょっとそれをお見せしたいと思いますなんか適当にここにキャッチフレーズを入れまして保存をするとエディーターの方でこれをちょっと再読み込みしなきゃいけないんですけど再読み込みすると有名膨らむサイトデザインとこちらに入ってきますなのでブロックで編集してもいいですし設定画面で編集しても大丈夫ですもう私たちが欲しいシンプルフッタはこれで以上になりますここからテンプレートパーツに戻ると先ほどのフッタはここにテーマのフッタ登ってもしてさらに私が追加したシンプルフッタもここにパーツとしてできましたパーツとしてできたんですけどまだサイトにくっつけてないのでサイトのどこにも出てきますとりあえずパーツの完成ですここでいよいよ新規追加のカスタムテンプレートを作りましょうもし投稿全部のデザインを変えたい時は単一というこのテンプレートを変更すると投稿のデザインが変わりますこれがこの名前が難しいですなんで単一が投稿の変更になるのかっていうのは色々ちょっと難しいですけど単一は投稿のテンプレートだと覚えてくださいはいけど今回僕たちは新しいのを作るのでカスタムテンプレートでまたここの名前後でバグってしまうのでかなず英語にしましょう例えばフォット、ブログ、ポスト写真投稿用のテンプレートを作成しますはい今とりあえず普通の投稿のデザインがここに引き込まれましたで私たちはまずこの大きいフッタはいらないので削除それからこのグループ投稿の中身は投稿のアイキャッチ画像とか投稿のタイトルとか投稿コンテンツというブロックが今ワードプレイズにはありますこれを使うとその投稿その投稿のアイキャッチ画像を引っ張りその投稿の投稿タイトルを引っ張り込んでいくという色になっていますもしこれを例えば画像ブロックとか見出しブロックにしてしまうとすべての投稿でその同じ画像同じ見出しがついちゃうんですねなので投稿タイトル投稿のアイキャッチ画像というこういうブロックを使うことでそれぞれの投稿のデータが引き込まれるようになりますが私たちは自分で作りたいのでこのグループも全部入れますなのでヘッダーだけになりましたヘッダーの下に今はアイキャッチ画像だけ入れたいのでこの後に挿入ここに入れたいのがブロックのアイキャッチ投稿のアイキャッチ画像これ写真入ってるんですけど大丈夫ですそれぞれの投稿のアイキャッチ画像がここで表示されることになりますさらにこの下に先ほど作ったシンプルフッダーを加えますどういって加えるかというとこれまたブロックの中でご自分で設定したカスタムテンプレート面を探すと出てきます私シンプルフッダーというのを作ったのでシンプルと検索するとシンプルフッダーが出てこれを押すともう私の作ったカスタムテンプレートパーツがここに入りますなのでヘッダーがあって投稿のアイキャッチ画像があってシンプルフッダー私のシンプルフッダーがこれを保存してとりあえず私のカスタムテンプレートができましたがもう一歩なんですねまだこれはどの投稿にも紐付いてないので実際にこのケンプレートを投稿に紐付かせる操作が必要ですこれもまたやり方はいくつかあるんですけれども投稿のクイック編集を押すとここにテンプレートというのがありますデフォルトテンプレートはさっき単一って書いてたあのテンプレートがデフォルトテンプレートですこっちとあちで名前が統一してないんですけど単一っていうのがこれです私の作ったフォトブログポストというテンプレートがここに出てきましたのでハッピーニューイヤーに適用するんじゃなくてかわぞいの花火ですねかわぞいの花火のテンプレートをポストに更新をしてこれでようやく私の作ったカスタムテンプレートがこの投稿につきましたこれがもともとの投稿で今テンプレートも変えたので更新をするとじゃじゃーん写真だけ一個ついていてもう投稿のタイトルとか記事もなくフッターもシンプルなフッターになってますなのでこのここでテンプレートの変更がまず聞くのでこれで変更していただいてもし新規投稿を作る場合は開いた後テンプレートはここで編集ができます今これ単一ってなってますこれがそのデフォルトテンプレートの意味で単一というのをフォトブログポストに変更するともう投稿を作成する段階でこれを適当にでテスト投稿アイキャッチ画像だけが表示されるので適当にアイキャッチ画像を指定して交換してこの投稿を表示するとじゃじゃーんこうして1個だけの投稿になりましたで確認なんですけれどもサイトに戻ってこのテンプレート適用していないこちらの投稿はまだそのまま従来通りのテンプレートをちゃんと使ってます本当に自分で指定した時だけそのカスタムテンプレートを適用させることが可能でどうでしょうちょっとカスタムテンプレートの使い方分かったでしょうかまだ具体的なこういう時使いたいまでは言ってないけど面白いなと思いました投稿一覧で特定のテンプレートだけ寄せることってできるんですか特定のテンプレートだけっていうのは多分できないと思うんですけど例えばそのテンプレートを使っている投稿にカテゴリーを設定しちゃってもフォトブログとかで投稿一覧でカテゴリーを指定することが可能ですのでフォトブログだけ見せるみたいなことはできますあるいはタグでもいいわけですねタグでもいいわはい そうですねこのカスタムテンプレートのすごいところは固定ページにも私の作ったさっきのフォトブログテンプレートというのは固定ページの方にも使うことができますなので投稿にも固定ページにも適用させる場合ってあるんでしょうかねなんかちょっと私もユースケースはわからないんですけれどもこういった形で同じ流れでカスタムテンプレートを作って固定ページに当てるとか投稿に当てるとかということがまあ負担のないページとか下手を縮小したページとか色々あるかもしれないのでご自分で作ることが可能最後にもう一つカスタムテンプレートと直接関係があるわけじゃないんですがこの写真出れへんとなっていて本当は私こうしたいんですね画面に収まる形で見せるとこれをどう編集するかお見せしたいと思いますなんか色々開きすぎてあれなんですけれどもテンプレートの私が作ったフォトブログポストですねここの今投稿の相立画像というブロックなんですがこれ幅を変える設定がここにはないんですよないのでどうしたかというとこの方で私マージンを足しました先方でマージンを足してこのままだと上下左右全部かかっちゃうのでこれですねリンキングを外して右を例えばこうマージンつけて左をマージンつけてという形で保存をするとちょっと横にマージンが入りましたもっと言うとですね私スライダーは便利ではあるんですけど思うように設定が変更できないので例えばここで150ピクセルそしてこれを押して左も150ピクセルという形で変更してこれを更新するとだいぶ願いに近づいてきましたただもう一歩なんでなんでかというとデスクトップだとまわりといいんですけどモバイルで見るとじゃん同じピクセル同じピクセルなのでこうなっちゃうんですねこれはちょっとよろしくないのでお勧めはこれをVW今見えている画面幅に対して何%かという指定になるなので例えば右を20%左もVWの20%としましてまずデスクトップからいきますけどもこれでこの画面幅に合わせた20%の余白が入るにモバイルにするとモバイルの画面幅の20%の余白が入るという形ですここはある意味CSSの退院指定の方法なんですけどVW画面幅に対してどれくらいのマージンを設定するかというものなので退院中にある%は画像に対しての%になっちゃうんですから%はそんな気もしますねちょっとやってみますかこれをもし更新するとあいや多分ですね画面幅だと思います画面幅多分ブラウザーが画面からはみ出ている時そのブラウザーの幅を見るVWというのは本当に見えている画面ブラウザーがもし画面より大きくなったとしても見えている範囲の何%かという違いだった気がしますじゃあブラウザーを画面一杯に使わないマック系の人たちにはVWのほうがいい感じですねそうかもしれないもしれないですね私は%使うこともないなユースケースあると思うんですVWはい高さに対しても同じことができるので高さに対してはVHビューポートはいというのがあるのではい使えるとはいなので今日のポイントはテンプレートパーツとテンプレートそしてご自身でテンプレートパーツを作ったりカスタマーテンプレートを作った時にどうやって投稿や固定ベージに割り当てるかといった流れでしたけどいかがだったでしょうかなんとなく分かっていただけたでしょうかはいすごい勉強になりましたありがとうございますはい最後にいつもすごくおしたいと思うんですけれどもはいまた2月に行います今までは私たちに大きなプランにしたがって話をしてたんですけれども色々なブロックについて学びましたサイトエディターについて学びましたブロックエディターですねサイトエディターについて今度はカスタムテンプレートについて学んで今回使わずにテーマをもう作る技術がこれで備わったわけなんです今日も白紙からヘッダーを作ったりフッダーを作ったりテンプレートを作ることができたのでそれを組み合わせていくともう自分オリジナルのテーマができちゃうんですクリエイトブロックフィームプラグインという公式のプラグインなんですけれどもこれを使うとこの作ってきたテーマをテーマファイルとしてエクスポートして他の方に渡してその方がご自分のワードプレッサイトに適用するということができるんですなので次回はこのクリエイトブロックフィームプラグインをどう使うかこれを使うともうプログラミングコードがわからない人も誰でもテーマ作成者になれちゃうので私はワクワクしているんですけれどもなるほど皆さんにももらえたらいいかなと思って用意していますすごいプラグインがあるんですねはいワードプレースが出している公式プラグインなのであれなんですけどある意味テーマ作成者は嫌かもしれないですね誰でももうテーマ作成者になれちゃうのでどこで自分のスキルを売るかというのがちょっと難しい話かもしれないですけどぜひ皆さんに紹介したいと思いますテンプレートパーツができてデザイナーさんが大変なのと同じ感じになる感じですねそうですねもしかするとデザイナーさんの仕事が楽になるかもしれないですデザイナーさんも行動一切かかずにテーマを作ってこのプラグイン使えば出力してお客さんに渡すということができるので彼らの仕事も楽になるプラグインかな現場の方に声を聞かないと私はわからないですけどはいという感じですパーツを売れる時代が来るかもしれないですねそうですねパターンブロここは無料で配布なんですけど例えば自分のカスタムプラグインを使ったパターンとかもしかするとプラグインの有料製品としてこのパターンを買いますかこのテンプレートを買いますかというそういうのがやっぱり日本語にするとこのパターンディレクトリーのってちょっと使いに感じ違うなというのは結構その辺を改善したやつを配布できるようになっちゃうということですよねそうですねまさにその通りですワクワクしますねこういうの見てはい元々これ英語だけでの配布だったんですけど私とほか何人かのボランテの方で翻訳を頑張ってますのでワークショップを開催する時にはここらへんも含めて全部日本語にできたらいいなと私も頑張ってやってますはいちょっと時間伸びましたけど聞きません今日はこういった内容になりますご生徒ありがとうございましたありがとうございましたぜひまた次回もお会いしましょうよろしくお願いしますお願いしますありがとうございましたはい失礼しますはい