はい みなさん 改めまして こんにちは今日もまた 日本語のオンライン ワークショップへようこそ来てくださいました今日は 業 建積ブロックで デスポンシブデザインを体験というテーマで行います僕 個人的にも今まで何度かやってきた ワークショップの中でちょっと楽しみなほうなので皆さんにも その楽しさが伝わればいいなと思っています僕はベンといいます 1992年から日本に住んでいますもっというと 北海道にずっと住んでいるので来日してから30年ということになりますワードプレイズは2014年から いろんなサイトを作ってきて数年前には ワードプレイズのカスタマサポートを行いそして今は トレーニングチームという ワードプレイズのコミュニティチームの中でフルタイムで貢献をしているところです特に みなさんが なるほどと理解する瞬間が大好きですのでこれ毎回のセッションと言っているんですけど何か新しいことを知ったとか なるほどという瞬間があった場合ぜひ ズームのザットになるほどと 入れていただきたいなと思います私もそれを見ながら 行きたいと思いますはい オンラインワークショップ 毎回見せているスライドなんですけれども共に学ぶ場ということで いつでも質問してオッケーです私の話を再議ってもいいですし チャットでもいいですしまた音声でも質問してくださっても構いませんオンラインワークショップは録画され後日 ワードプレイス.tvにアップされますそしてオンラインワークショップは ワードプレイスが好きでコミュニティに貢献したい人たちが ボランティアで開催しているものですのでもし皆さんも開催したければ ぜひ 電話区くだされば開催の方法も教えられますはい では 内容に入る前に皆さんに一つ質問です皆さんのブロックエディター経験は どれくらいですか先ほどレスポンシブデザイン録画 始める前に尋ねたところ皆さん結構知ってるようですけど 改めてブロックエディターの経験はどの程度でしょうか 十番 ベテランですと一番は 教画 初めての参加です今日 参加者のデディーさん なるほどで気付いたわけ参加 二回目だったと はい ありがとうございますさて 皆さんのブロックエディター経験 どれくらいですかデスニーさん 七くらい 高さん 四から六かなぁとデディンさん HTML CSSはよく知ってるんですがブロックエディターの経験は 少なくて 五をくらいです私の感触ですけど まだ日本の ワードプレイスコミュニティにブロックエディターって 浸透式ってない部分がありますよねまだ昔のエディターとか 昔のコーディングのままやっている方も多いので 今日もまた一つ ブロックエディターの良さを皆さんに知ってもらえることが できたらいいなと思っています僕も六かなぁ 七くらいかなと思っています自分でブロックをコードで作るとか結構そういうことをやる デベロッパーもいてまだちょっと自分は そういうのに手が出せないので六かなぁ 七くらいかなぁと思っていますさて 今日の内容は 業をブロック そして 建積ブロックに焦点を当ててデスポンシブデザインを 体験しようという話にしていますそもそもまず デスポンシブデザインは何なのかという話をした後に 今日はクイズを用意しています事前に私の方でブロックで作った ページを皆さんにお見せしますのでこれがどのブロックでできているのかそういうことを皆さんに当ててもらう そういうクイズを用意していますそして その後 業ブロック 建積ブロックでデスポンシブデザインを少し体験するコーナーと最後には 水平 ピラミッドギャラリーと私が勝手に命名した画像をかっこよく表す表現するギャラリーの作り方を 一つ教えたいと思いますなので 前半にさらと 知識的な部分をやった後に後半はいろんなアクティビティで それを実践していけたらいいなと思っていますここまで始める前に何か質問とか ないでしょうか 大丈夫でしょうかでは 始めましょう デスポンシブデザインとは何かデスポンシブデザインの定義をウィキフェディアの方から引っ張ってきました するとですねデスクトップ版のウェブページを 閲覧者の画面サイズまたはウェブフラウザに応じて 表示できるようにするデザイン手法という説明が書かれてきました正直 ちょっと古い考え方かなと思いますというのは デスクトップ版のウェブページを最初に作っている前提の定義なんですね これはデスクトップ版があって これを他の端末でも見えるようにくるというそういう説明なんですけど 今はモバイルファーストのデザインもそういう考え方もあるので ちょっとウィキフェディア古いかなと思いました私なりの定義を書いてみたんですけれどもウェブページをどの大きさ 形の端末で見てもその内容が効果的に表示されるように デザインすることと先ほど皆さんもチャットに入れていただいた説明と大体同じだと思いますデスクトップとかパソコンは大きな 横長の長方形の画面ですけどこういう携帯端末は縦長になったり 細かったりまたタブレットは横で見たり 縦で見たりといろんな形で見ることがあります今後ももしかすると デバイスの形って変わるかもしれないですわかんないですけど 回るいスマートフォンが出てくるとかいろんな形があり得るのでそういうどんな形にも合わせて デスクトップウェブページの内容が表示できるようにデザインすることを レスポンシブデザインといいます基本的にワードプレイスはもう レスポンシブデザインを踏まえてコアのプログラムが構築されているんですねなので 一般のユーザーがいちいちレスポンシブデザインを考える必要がそんなにないと思うんですけど今日は裏で働いている レスポンシブデザインをあえて取り上げて自分たちで意図的にそれを操作していくそういったことを見ていきたいなと思っています一般的にウェブページの表示の順番なんですけれどもブラウザはコンテンツを左から右に向かって表示していきますで 一行目がいっぱいになったところで二行目に今度ものを表してで 三行目にものを乗せてというふうに行きますなので 例えば右から左にものを見せたいとか横じゃなくて 縦にものを見せたいといった時にはこれは特別に指定してあげなければいけないですねウェブページは基本的に左から右と西洋の文書と同じ順番で内容を表示していくのでそれ以外の表示順序がいいなという時にはそれを特別に指定しなければいけませんで Wordpressのブロックエディターの中にも少しずつ別な表示方法の設定が出てきていますまだそんなにたくさんあるわけじゃないですけど今日それをブロックの中で少しお見せしたいなと思いますまず いくつかブロックを紹介しますWordpressの中にデザインブロックというグループがあるんですけど今日のそのレスポンシブデザインデザインとついてますねに関係する話もこのデザイングループのブロックを主に使いますディスティニーさんがコメントくださいました画面サイズによってデザインがよく表示されることじゃなくてサイトの機能も全部使えるようにも必要と思っていますそうですね 全部出てるけど例えばギュッとなりすぎてボタンが押せないとかそうなってしまうとレスポンシブデザインとは言わないですねやっぱりその画面に合わせてきてると機能も働くようにすることが大事だと思いますそのとおりですここでちょっと頭を切り替えていったんいくつかブロックの紹介をしてその後にそれを組み合わせていきますまずワードプレイスのブロックエディターにカラムブロックというものがありますカラムというのは日本語で言うと列です行が横向きの並びで列は縦向きの並びなんですけどカラムブロックは要するにコンテンツを列に収めて表示するブロックになりますここの例にも縦にABCという文字がありますけどこれ縦のこのカラムこの列に収まっていて2列目3列目4列目というふうに内容が入っていますでカラムブロックの一つ特徴はこのカラム列がそれぞれ同じ幅になるということです細かく設定することも可能なんですけど基本的にはカラムは同じ幅の列を表示するためのブロックになりますなのでこの例を見ていただくと例えばJKLと文字の幅が狭いときにはちゃんとそれが1列になっているんですけどMNと幅の大きい文字になるとカラムは調整されないので幅が大きくならないので文字が縦にずれてしまったとこういうことがカラムブロックで起きることがありますカラムブロックはこのカラムとカラムの間の隙間を変更可能ですここでグレーになっているんですけどこれたぶん今年のアップデートでここのカラムとカラムの間の隙間を変更可能になりましたそれを見たときちょっと僕は嬉しかったですそしてもう一つカラムブロックにはモバイルでは縦に並べるという設定がありますここが今日一つそのリスポンシブに関する設定になるんですねちょっとこれを実際のサイトで見てみたいと思います今日はワードプレイス6.0.3のサイトを用意してますプラグインはありませんプラグインもないですしテーマも基本の2022このテーマを使っているので何もカスタマイズしていない一番一般的なサイトになりますこういう感じですねここに一つページを用意したので見てみたいんですけどカラムブロックこれですねこれをもう公開して見てみましょうここにカラムブロックがありますリスポンシブを見るときに一つ便利なブラウザのツールがあるんですねインスペッターツールというのがあるんですが日本語は検証っていう翻訳だったかなこのインスペクトを押すとですね携帯でこれを見たときどう見えるかというのを見ることができますここのボタンですねこれが今デスクトップ版でカラムが綺麗に1 2 3 4 5 6と並んでいるんですけれどもモバイル版で見るとこのように同じ6列が保たれるんですけどぎゅっとこれが画面に収まるために狭まって文字が縦に動いてしまうんですねブラウザはグーグルクロームを使っています他のブラウザでも似たこの機能はあると思うんですけど僕はここでクロームを使ってます今これはある意味デスポンシブでないデザインなんですこのデスクトップに出ているものをそのまんまの順番でそのまんまの形で表そうとするからぎゅっとなって文字が読みにくくなってしまうとでカラムブロックにはこれを1つ変える設定がありまして固定ページを編集通すとカラムブロックのモバイルでは縦に並べるという設定がありますこれを付けた時に何が変わるか見てみたいんですけどこちらで再読み込みにしてモバイル版の表示はそのまま変わらないですデスクトップ版の場合はこのまま変わらないですモバイル版に切り替えるとさっきまで6列ギュッと収まっていたのが縦1列に並ぶようになりました文字がしっかり読めるようになったんですねなので1つそのカラムブロックのレスポンシブさんといいますか付けることができるレスポンシブさんになりますただこれも万能ではなくてカラムはこのモバイルでは縦に並べるというのを設定するとモバイル版では絶対1列になるんです例えば今回のこの例を見ると正直6列は狭かったですけど2列3列ぐらいは入れてもよかったんじゃないかなと思うんですねけどカラムブロックは2列3列をうまく入れることはできなくて今はモバイル版だと1列になってしまうのでそういうちょっと誕生もあるかなと思います自分の利用例に合わせてこの設定はつけたり切ったりするといいと思いますで高さも便利とチャットに入れてくださってますありがとうございますカラムブロックとデスニーさんが質問が入りました6個のカラムを使わない方がいいデザインルールとかあるでしょうか多すぎかなと正直多いと思います今日後半の方で一つギャラリーをするんですけど水平ピラミッドギャラリーはあえてカラムをたくさん使ってるんですそれは文字がない画像だけのギャラリーなんですなので文字が入ってくるとやっぱり少しこのレポンシブサバ検討した方がいいかなと思うんですけど本当にデザイン性だけの時にはありかな情報を出すときにはちょっとカラム6本っていうのは多いかなと僕も思いますはいではなるほどはいありがとうございますカラムブロックと一つ似ていて違うのが業ブロックです今日の目玉がこの業ブロックになります業ブロックは複数のブロックを1本の水平業に収めると水平業って2回っているようなものなんですけど業ブロックは何が入ってもそれが必ず同じ業になるようにそこから画面が狭いから次の業に落ちるってことはないですね絶対同じ一業に表示されるようになりますこれを使うとパソコンでもモバイルでも同じようにものを表現することができるんですねこれを後で実例を見せます業ブロックとカラムブロックの一番大きな違いは業ブロックの場合は幅が不均等になることですカラムブロックは各カラムが絶対同じ幅になるんですねデフォルトだとして買えることも可能ですけどデフォルトだと同じ幅になります業ブロックはその内容に応じて幅が自動的に変わってくれますなのでここの例だとこちら10文字が入っていてここ3文字なのでここを自動的に大きくして繋げたくして綺麗に一業に全部収まるように業ブロックは変更してくれますこの業ブロックなんですけれどもこちらも一つ例をお見せしたいんですがこちらも公開してみましょうこの業ブロックこれですね今これデスクトップ版で検証してモバイルになるとこれ同じ一つの業に収めるそういうブロックなので画面からはみ出すちゃうんですあまりに大きいときは画面からはみ出したんですけどけど同じ一業に収めるというルールだったのでブロックは画面からはみ出してもいいから一業に残ってなさいといってこういう表示になりますこの業ブロック例えば複数業に織り返すという設定もありますこうした場合画面に合わせて複数業になることもできますただこれ今どうだろう本番もデスクトップも変わっちゃうかなモバイルはこれ縦になって見やすくなったんですけどデスクトップも複数業にまたいじゃいましたね多分今のこのカバーブロックを使ってるんですけど文字を表現するのにカバーブロックがなるべく広く取るというブロックなのでこの設定をつけたったときに複数業にまたがってしまいました業ブロックもこれがあります個人的に私はあんまりこれは使ったことないかなこれを使うならカラムブロックとか使うんですけど一応このレスポンシブさを求める設定もありますなのでカラムブロック業ブロックそして立てずみブロックというのがあります立てずみブロックは普通ブラウザは横にものを表示させるんですけどあえてそれを縦に表示させるためのブロックですいくつのものを足しても絶対それが縦1本になると例えば例えばですけどちょっと1つページを簡単に作ってみましょうテストページでおっと今業ブロック入れますほら業ブロック入れますここに例えば画像を入れましてもう1個業ブロックに画像を入れましてもう1個ぐらい入れますかここ3つぐらい入ったところでこれ業ブロックなので全部同じ業に入るはずですプレビューで見てみると同じ横1列になっているしモバイルで見た時も同じ横1列になっていますでこれを業ブロックはここのブロック設定で簡単に立てずみブロックに変更できるんですね立てずみブロックに変更してもう1回プレビューをしてみると絶対立てになっているとデスクトップ版にするとこんなに画像を大きくしなくてもいいかもしれないですけど必ず立てに積むように横にならないように画像を拡大して見せてくれるブロックになりますちょっとこの単体だとなかなかその良さがわからないですけど今日の後のこれから見るそのクイズでこれを組み合わせていった時に良さが見えてくるかなと思っています最後今日もう1つ簡単に触れたかったのがグループブロックなんですけど業ブロックや立てずみブロックは横に表示する立てに表示するという表示設定が入ってくる一種のグループブロックだったんですで普通のこのグループブロックを使うと横とか立てとかの表示順序が設定されないグループになりますブラウドの標準の表示順序になるというブロックになりますなので実は3種の切り替えができるんですここでグループブロックに変えたり業ブロックに変えたり立てずみブロックに変えたりで何で変えるかというのは本来は全部グループブロックみたいなものなんですけどこの業と立てずみの場合は表示方向が設定されたグループブロックこのグループブロックにすると表示方向が設定されてないグループブロックというそういう違いがあるのでここで3つの切り替えができるようになっていますはい面白くない説明はそこまででいよいよ今日のクイズの時間に入りたいと思うんですけどここまで何か質問はないでしょうかちょっとクイズやってみましょうクイズやってみましょうクイズに行きたいと思います4つ4も用意しました次の例ではどのブロックと設定が使われているでしょうかぜひこれ皆さんズームのチャットに書いていただきたいと思いますせっかくなんでワードプレイする4つ問題を用意したのでこれが何ブロックかを当ててくださいまず質問1番これら画像は何ブロックに入っていますか今日はせっかくレポンシブデザインの話なのでこのデスクトップ版とそしてモバイル版もちょっと見ていただきたいと思いますデスクトップだとこう表示されていますモバイル版だとこう表示されますさてこれは何ブロックを使っているでしょうかデスクトップ版だとこれモバイル版だとこうなっていますぜひズームチャットに何ブロックか当ててみてくださいデステニーさんギャラリー カラムタカさん 業ブロック皆さんクエストマークついています自信があまりないみたいなんですけどポイント1つポイントはまずそのモバイル版でデスクトップと同じ形になっているかを見てみます業ブロックはモバイル版でも一業にできるというのが売りでしたよねモバイル版で見てみると一業ではないです一業ではないので多分これは業ブロックではありませんもう1つ実はポイントとなるのがこの画像の幅ですさっきちょっと言ったんですけどカラムブロックは基本同じ幅になります業ブロックは違う幅になりますで今この3つを見てみるとちょっと分かりにくいかもしれませんけど実は同じ幅なんですねあのちょっとこれを見てみると見えますか今ここ236という幅が出てますこの画像は236この画像も236というふうに全部同じ幅になっているので答えはせっかくですか投稿を編集してみてみましょう答えはこれらはカラムブロックに入った画像でしたデスクトップ版とモバイル版で形が違うそして幅が全部同じ幅になっているのでこれはカラムブロックが正解でしたお、デニーさんもなるほどとはいありがとうございますでは次第2問目に言ってみましょうフィーズクエストのクエストに行きます同じですこれら画像は何ブロックに入っていますかとさっきとすごく似たページですすごく似たページなんですけどデスクトップ版だとこうでモバイル版見てみましょうモバイル版だとこうなりますデスクトップだとこういう形でモバイル版だとこうなりますデニーさんこれが業ブロックですねとですねもうそうだと高さもこちらが業ブロックですねはい正解ですこちらが業ブロックになりますポイントはいくつかあるんですけどまず一つはこうモバイルでもデスクトップでも同じ形を維持していますこの次の列に落ちたりとかしていませんでもう一つこの画像の幅を見てほしいんですけど真ん中が左と右より細くなっているのがわかるでしょうかこれもその業ブロックの特徴なんですカラムだと同じ幅になっちゃうんですねちょっとページを比べてみましょうかカラムブロックだと真ん中の写真が拡大されて全部同じ幅になっているのに対し業ブロックだと大体全部同じような大きさになるんですけど幅がまちまちなのでここも一つその業ブロックを見分ける違いになると思いますはいでは3問目にいきましょう3問目これら画像は何ブロックに入ってますかとまだこれでもかというくらいですけど画像は何ブロックに入っているでしょうかデスクトップ版だとこう見えますモバイル版だとこう見えます何ブロックでしょう何か少し誘導している感じですけどデニーさん縦済ブロック答えが縦済ブロックですもう一つ覚えてほしいのは多分これを実現するブロックの組み合わせって一通りじゃないと思うんですよ縦に全部表したいなら例えばカラムブロックの中に全部入れるとか画像ブロックだけをうまく重ねるとか多分いくつかやり方はあるんですけど私がここで使っているのは確認しましょう縦済ブロックで画像を3つ表示している4本目で最後ですけど見てみましょう4本目このデザインにはどのブロックを組み合わせていますか今度は1個だけじゃないです1個だけじゃないのでどのブロックを組み合わせているか考えてみてくださいデスクトップ版こうなりますちょっと小さくしたらもしかして見やすくなるかなデスクトップ版をいけますかちょっと縮小してみましたこうなっていますこれはモバイルでも見てみましょうデスクトップだとこうでモバイルだと何ブロックを組み合わせているでしょうかデスクトップだとこう見えてモバイルでも結構似た感じで見えていますはいデニーさん業ブロックと立てずみブロックデステニーさん業ブロック高さんは業プラス立てずみとはい正解は確か業プラス立てずみでちょっと見てみましょうこれをもう1回確認戻してブロックの種類は業ブロックの中に立てずみが2つ入っていますはい見方としてはまず左と右の幅ですよね左の方が右の幅よりも細いので多分これはカラムじゃないですでモバイルで表示した時もしこれがカラムだったら多分ガチャッとこうなって4つの画像が上に重なる感じ上下に重なる感じになっちゃってたんですねモバイルでも変わらないので1つ業ブロックは入ってますでそれぞれの業ブロックの中でも画像が動かないで上下のまま配置されているので立てずみブロックという形になっていますなのでデニーさんも高さんも正解でした業プラス立てずみで実装していますはいクイズはここまでなんですけど皆さんどうでしたか楽勝だったよそれとも考えてみたらちょっと難しいなって感じでしたかね両立てブロックを使ってこのデザインができるのは初めて見る難しいですねで多分今までのマードプレイスだったらこれはコードになってくるんですよ画像を表示したいとかこう表示したいっていうのはMSSを使ったりコードで組み込まなきゃいけなかったりあとはテーマファイルに組み込んだりで今日皆さんに知っていただきたいのはこれは全部プログラミングを使ってないんで業ブロックと立てずみブロックだけそのブロックの基本的な組み合わせだけで実装ができますなのでこの業と立てずみをうまく組み合わせることでいろんなレスポンシブデザインが作り上げることができるっていうこともぜひ知っていただきたいなと思います皆さん結構経験があるのであれなんですけど録画を見ている人のためにサイトのデザインを考える時の僕個人的なおすすめなんですけれどもまず最初に紙にデザインを書き出すのがいいと思いますそれは文字の内容ではなくてここにも少し例があるんですけどここに画像があるとかここにビデオがあるとかここに見出しがあってっていう大まかな内容を紙に書き出すのがいいと思います高さんはチャットの最初の方でまずPC版をデザインしてその後タブレット版をデザインしてモバイル版のデザインその順番でコーディングをしていくっていう話をしていて僕もそういう順番ですその後特に慣れるまでは携帯と同じ大きさの紙を切ってパソコン版と携帯版で紙に書いていくのがいいと思うんですというのは初めてサイトをデザインする時にパソコン版をそのままモバイル版にギュッて押し込めようとするとデステニーさんからコメントがあったんですけど押しにくいボタンができちゃうとか文字がやたらと小さくなっちゃうとかあるんですねなので実際に携帯と同じ大きさの紙の中にじゃあどうやって物を入れていこうかっていうふうに考えるとデザインが考えやすいかなと僕個人的なやり方なんですけどそう思っていますで今度は逆ですさっきは実際に出来上がった皆さんに見せてどのブロックを使ってるか尋ねたんですけど今度は皆さんがデザイナーで僕がクライアントだと思ってくださいお客さんだと思ってくださいコンピューターではこう表示したいけどモバイルだとこうなるようにしたいといった依頼を受けたとしますこれをブロックだけで実現してほしいんですまたちょっと今数分取るのに皆さんは考えてほしいんですけどコンピューターではこういうレイアウトなのがモバイルだとこういうレイアウトになるこの資格は1個1個画像かと思っていただいていいんですけどこれは今日見てきたブロックをどう組み合わせたら実現できるでしょうか皆さん紙とかに書いてもいいんですけどちょっと2、3分書いてますのでどういうブロックの組み合わせでこれが実現できるかちょっと考えて見てくださいデニーさんがチャットにカラムの中にカラムを入れて縦積を2ついいですね答えは人取りじゃないので皆さんそれぞれ考えていただいて大丈夫ですこの中に画像と左側に画像があって右側行ブロックはいデニーさんと全然違う全然違う内容なんですけど多分これも実現できると思います実際にちょっと作ってみましょうこれをホームページで作ってみたいと思います課題なんて言っても是非やると苦労ポイントはいくつかあるんですけど僕が最初見るのはここの幅ですね幅が左と右で一生かどうかとか見ます今回はこの大きいこれとこの2つを比べたら幅が一緒なのでカラムを最初入れようかなと思いますカラムブロックを入れます今回は左と右で同じ幅なのでカラムの5050にします左側はこれは適当に何か画像をホンと入れときましょうまた今度右なんですけど4つのものがあってコンピュータ上でもモバイル上でも同じように表示されます僕だったらコンピュータでもモバイルでも変わらないのでここは業ブロックを入れてくると思いますなので業ブロックを上と下に2個入れたいです2個縦に入れたいのでそこに縦済みを入れてきますこの中の業の前にここに縦済みを入れて縦済みの中に業ブロックを入れてもう1つこの後に業ブロックを入れて上と下に2つできましたあとは適当に画像を1つ選んでこの業ブロックの右にもう1つ画像を何でもいいですけどちょっと見栄えが悪いので同じ横方向の画像にしましょうこれのプラスをして同じ画像でいいか画像を入れてこっちの業ブロックにも画像を入れてもう1個業の中に画像を入れてはいとりあえずデスクトップ版はいいですけどモバイル版でもちゃんと重いように機能するか確認しましょうデスクトップ版だと左と右4つこれをモバイルで表示すると左の画像が上に来て右4つが下に来るという感じで私がここでやったのはカラムの中に右のカラムに縦済みを作って縦済みの中に業を2つ入れたという感じです高さも業ブロック2つというのを入れてたんですけど多分業ブロックを剥かす縦に入れるためには縦済みかカラムか何かが必要になるかなという感じですなのでこうやってデザインをまず考えた後にそれをブロックに落とし込むという作業をすると結構いろいろなレイアウトがこの業ブロックと縦済みブロックでできるということを見たでしょうかはい最後にもう1つちょっとセッションの説明にも書いた水平ピラミッドギャラリーこれも作っていきたいと思いますちょっとここで止めましょうか皆さん質問とかないでしょうかもう1回これは見てみたいとかこれもう1回説明してほしいとか皆さんなるほど2%ですなるほどが3回入っているので僕としては大変満足なセッションかなと思いますはいでは最後もう1つピラミッドギャラリーというのを見せて今日はおしまいにしたいと思いますそれにあたって録画のためにも簡単に画像ブロックとカバーブロックの違いを説明します結構この2つ似てるんですねそれ以外的な違いが1つあるのでぜひ覚えてもらいたいなと思います画像ブロックはどんなときにも画像全体を表示するブロックです画像がクロッピングされることはない切りに来されることはないなのでこの場合画像が全体出ていてモバイルにしたときもひゅっとそれが小さくなってちゃんと画像が全部表示されるようになっていますこれからは縦に長い画像を入れてみたんですけれども1つの画面には入りきらないですねなのでスクロールが必要になるんですけれどもスクロールすると必ず画像全部が見えるように画像ブロックは画像全体を表示するブロックですこれに対してカバーブロックはお!なんか変になってますけど変になった変になっちゃいましたしょうがないカバーブロックは車に欠けるカバーとか上に欠けるカバーとか何が欠けるカバーそれは大うって意味なんですねカバーブロックはある範囲を大うためのブロックと考えてくださいなのでこの面積を大うために画像が拡大縮小されたりテーブルクロスをテーブルにかけたときに横に垂れ下がる部分があるんですけどそれも画像の場合一緒でクロッピングされる部分が必ず出てくるのがカバーブロックカバーブロックは画像全部を表示することはできません必ずクロッピングがされるんですけれどもクロッピングされるときに焦点ピッカーという機能でクロッピングされたくない部分を選べるんですちょっとここの例がなくなったんですけど例えば自分が左に座っている人だとします右側を写ってるんですけどカバーブロックを普通に入れた場合自分が消えちゃうんですねモバイルでこういう表示になっちゃうというスイデーでした焦点ピッカーをちゃんと設定することでこの3人目の人もクロッピングされず全員がモバイルでも表示されるように調整することができますただかなずクロッピングされるのでデスクトップ版もモバイル版も全く同じように画像を表示するというのは難しくなりますなので画像ブロックとカバーブロックの決定的な違いが全部表示されるかどうかという部分になりますここまで見た来たことを組み合わせて水平ピラミッドギャラリーというのを作ってみたいと思いますこれですワードベースにギャラリーブロックもあるんですけどこういうちょっとしゃれた感じはそういう設定はないので自分でこれを作っていきますこれデスクトップ版だとちゃんと5人の顔が出てますしモバイル版になってキュッとなってもそれでも5人の顔がしっかり出ている感じになりますこれをどうやってブロックを組み合わせて実現できるかというのを最後10分くらいでお見せしたいと思います始める前に確認したいこと聞きたいこととかなかったでしょうか大丈夫ですかね見てもらうと下の方が画像が細くなってクロッピングされているので使うのはカバーブロックです画像ブロックは絶対画像全部出てあるので今回使うのはカバーブロックそしてデスクトップもモバイルも5個必ず横に並んでいます必ず横に並んでいるので使うのは行ブロックです行ブロックとカバーブロックでこれが実現できます後ほどスライドを見る方のためにもここに作り方は書いているんですけど今このワークショップでは実現をして皆さんにお見せしたいと思いますなので新規作成で水平ピラミッドやがりを作ってみますまず行ブロックが必要ですどこの写真を収める行ブロックを入れます写真はそれぞれカバーブロックで入れますなのでメディアライブラリーから選んで最初ちょっと画像を入れる時1回1回行に戻ってここのプラスマークを押していただくと次の画像を入れることができますもう1回行に戻って右下のプラスを置くと押すと次の画像が入れられる行に戻ってプラスを押すとAが入れられるもう1回行に戻ってプラスを押して最後の5つ目を入れますはいでカバーブロック入れると必ず弾楽ブロックがついちゃうんですけどこれは今回のギャラリーではいらないので消していきますはいさっそくクロッピングがここで起きているのがわかると思うんですけれどもこの少女の顔が消えてしまってるんですねなのでこの焦点ピッカーというのを調整します今右にずらすと女の子の顔がまた出てきてこれはカバーブロック絶対クロッピングされるんですけどこの丸は絶対クロッピングされない部分なのこの丸を残してそこから遠い部分を順番にクロッピングするという設定なので絶対に切れてほしくない部分にこれを置いておくといいと思いますあともう1つこれですかね顔が片寄っているのでこうしてこの上線ももうちょっとだけずらしますはいこのように焦点ピッカーを調整しますでカバーブロックもう1つデフォルトでついちゃうのがこの不透明度設定ですねこれを今のこのギャラリーの場合は全部ゼロにしちゃって大丈夫ですはいでこれが狙ってるのは隙間のないギャラリーですねでこの隙間の調整が今年ブロックエリーター導入されたのでで業ブロックのブロックの感覚という設定です業ブロック全体のブロックの感覚というのが最初20か30かなんか適当に入っているのでこれは今マウンスでドラッグしてすると上下にドラッグすると数字が変わるんですけど下まで持っていってゼロにしますもちろんキーボードで入力もしていいんですけどゼロにしましたはいだいぶこう近づいてきた感じですね最後高さがだんだんになっていますこれはカバーブロックのカバー画像の最小の高さというのが設定がありますカバー画像の最小の高さまきらわしいのは今これ何も数字入ってないように見えるんですけど実は300か350か何か数字が入ってるんです裏の方でさっきのブロックの間の感覚も数字を見えてなくても感覚ができたって言ったのがワードプレイさデフォルトで何かしら数字を裏で書いてるんですねなのでこの数字を自分で調節していくと全部同じ高さにならないようにすることができるんです例えばこのあかちゃんの場合は100150とかにしてみますか全部50ずつ大きくなるように設定していくと300350という形にするとギャラリーが出来上がりましたプレビューでこれがモバイル版の場合もどうか見てみましょうこれデスクトップ版ですねちゃんと皆さんの顔が中央に出てきている感じでこれモバイルで見てみても横に並んだままの水平ピラミッドギャラリンが出来上がりましたデニーさんなるほどありがとうございますいろいろ応用も作ると思いますけれども350例えばこれを200にしてこれを100にしてもう一回これを200にしてこれを300にして長ネクタイ風にすることも出来ますしいろいろご自分で変更が可能ですやっぱり業ブロックを使っているのでモバイルでも同じく出るしカバーブロックを使っているので必ず顔が中央に来るようにして設定ができるという特徴があります高さもなるほどありがとうございます水平ピラミッドギャラリーぜひ皆さんも自分のサイトでやってみてくださいコード何一つ使わないブロックの設定だけで実現できる面白いギャラリーかなと思いますはいデニーさんも面白いですねありがとうございました他にも協議したいけど訪ねたいけど皆さん質問などなかったでしょうか最後質問があればぜひ書いていただきたいんですけど次回予告をして終わりたいと思いますまた明日きょうと同じ内容で午前10時からワークショップやりますので明日同じテーマでやるんですけど来月11月には今度はクエリループブロックというブロックに商店を当ててこのクエリループブロックは何かこのクエリループブロックでブログページを作ろうというセッションを用意しています従来のワードプレイスはテーマファイルを編集しないとレイアウトの変更ができなかったんですね投稿ページとかアーカイブページはけど今はこのクエリループブロックを使うとコード何一つ使わずに自由時代にアーカイブページ投稿ページなどのデザインを変えることが可能になりますなので次回のセッションではクエリループブロックの紹介と実際にこれを使ってみんなでブログページを作っていくその様子を見せていきたいと思いますデニーさん最初の高さの単位は何が選べますか多分これのこれですねカバー画像の最初の高さ今私ピクセルを選んでいるんですけどパーセンテージEM、REMVW、VHが選べますプログラミング慣れている人はCSSに慣れている人はそれぞれに分かると思うんですけどコードあまり詳しくない人はピクセルのままでいいと思いますVWは画面の幅をもとにVHは画面の高さをもとに設定もできるので少しコードなことをやろうと思ったらここら辺も変えるかなと思いますはい高さもデニーさんの質問を助かりましたとはい以上で今日のセッション終わりたいと思います参加してくださった皆さん本当にありがとうございます楽しかったでしょうかいつもスラックのリンクを貼ってたんですけどTwitterも始めましたそういえば今日のスライドを皆さんに送っていなかったかもしれないですね今日のスライド今からZoomチャットにリンクを送りますのであとが終わった後に何か質問とかぜひTwitterでも連絡いただければと思います初めました慣れていないので最近始めたばかりなのでちょっと使い方勉強しながらいきたいと思いますはい今日のセッション参加いただきありがとうございましたぜひまた来月も会いましょう