カッコいい！ブロック組み合わせのレシピ / WordCamp Japan 2021 Winter03

WordCamp Japan 2021 Day3 Winter track 03 「カッコいい！ブロック組み合わせのレシピ」のスライドです。

フォローアップページの全文は、「カッコいい！ブロック組み合わせのレシピ 登壇後フォローアップページ」にてご覧ください。

Transcript

1. 森和恵 WordCamp Japan 2021 カッコいい！ ブロック組み合わせのレシピ
2. 📣📣 森和恵（Kazue Mori） インストラクター歴2X年 ウェブ制作のノウハウを伝えるYouTuber ブロックエディタに感動してWordPressに出戻り “WordPressの組み込み方 2021年版” をライブ授業中 生まれは神戸の浪速っ子
3. 今日、伝えたいこと。
4. WordPressのコンテンツレイアウトでは、
5. ブロックエディタを使うのが、最高！
6. ブロックエディタを使うのが、最高！ コンテンツの最小単位＝ブロック ブロックを積み上げて コンテンツを作る
7. ブロックエディタを使うのが、最高！ ブロック単位で自由に配置 できて、Good！ ↓
8. ブロックエディタを使うのが、最高！ ↓ ブロック単位でCSSの追加が できて、うれしい！
9. ブロックの登場で、コンテンツデザインが HTMLとCSSを知っていれば 手軽に行えるようになった
10. ブロックエディター前は CSSの追記はどうだった？ 10
11. Classic EditorでのCSS追加 コンテンツが本文でひとまとまりで CSSクラスを追記するには class=“xxxxx” をHTMLコードで直接追記していた 11
12. コンテンツが本文でひとまとまりで CSSクラスを追記するには class=“xxxxx” をHTMLコードで直接追記していた 読むのがめんどう 入力をミスりそう 12 Classic EditorでのCSS追加
13. 本日のコンテンツ紹介
14. 使用するテーマ WordPress バージョン 5.7 の デフォルトテーマ Twenty Twenty-One へ CSSを追記し コンテンツをカスタマイズ 14
17. 17 今回は、ランディングページで そのページのみ利用する、CSSの追加を検討
18. 18 ヒーローエリア ブロークングリッド
19. 19 パターン 再利用ブロック
20. Contents • 「カバー・メディアとテキスト」で、ヒーローエリアに • 「カラム」の位置をずらし、ブロークングリッドレイアウトへ • 「全幅・幅広」を指定して幅を広げ、開放感・抜け感を演出 • 「再利用ブロック」と「パターン」で、コンテンツを管理
21. カバー・メディアとテキストで ヒーローエリアに
22. • ファーストビューに表示する ヘッダーイメージ • 誘引、訴求、アピールのエリア ヒーローエリアとは 22
23. 23 • 複数のブロックをまとめる枠 • 「画像、動画、色」を背景に指定 カバー ブロック メディアとテキスト ブロック • メディア（画像など）と 文字を 左右に並べて配置する枠
24. ❶ ブロックを配置し、幅を広げる 24
25. カバーを全幅へ 25 全幅では、ブロックを画面の幅いっぱいに広げられる
26. メディアとテキストは、初期設定が幅広 26 幅広では、ブロックを標準幅よりも広くとれる
27. 標準幅・幅広・全幅のサイズはテーマに依存 27 公開側の表示 ブロックエディタ側の表示
28. 標準幅・幅広・全幅のサイズはテーマに依存 28 今回のテーマは 標準幅 610px・幅広 1240px・全幅 100%
29. ❷ 書き換え部分を調べ、CSSを追記してみる 29
30. 30 ターゲットとする ブロックの「追加CSSクラス」へ クラスセレクタを追記 📌📌左の画像は直接選択できないので ［メディアとテキスト］にクラスを指定 ※左の画像は、アウトラインに現れない ❸ 該当のブロックに、クラスセレクタを指定
31. 31 ❹ 独自のスタイルのCSSコードを追加 .heroimg .wp-block-media- text__media img { border-radius: 50%; object-fit: cover; } • HTML構造 • CSSの詳細度 を考慮し 追加するセレクタを決める メディアとテキストのHTML構造
32. 「カラム」の位置をずらし ブロークングリッドレイアウトへ
33. Broken Grid Layout グリッドにそって配置した レイアウトの配置をくずして 重なりや奥行きを表現 33 ブロークングリッドとは
34. • 外枠 「カラムブロック 」で カラムの数を指定（最大６つ） • カラム ごとに「幅」を 指定できる カラムブロック カラムを横に並べて 段組のレイアウトができる 34
35. ❶ カラムとコンテンツを配置 カラム に「全幅」と「背景色」を指定 35
36. ❷ 書き換える部分を調べ、CSSを追記してみる • カラムには、Flexbox （ display:flex ）が指定 レイアウトの自由度が高い • 外枠、左と右カラムに CSSクラスを追記 • !important 指定で 詳細度が調整しきれない部分 を補う 36
37. 37 ❸ 独自のスタイルのCSS コードを追加 モバイル（600px）より大きな画 面で有効とするため メディアクエリー @media (min-width: 600px){…} をつけて、CSSを追記
38. ❹該当のブロックに、クラスセレクタを指定 外枠 bgl-wrapper 左カラム bgl-leftabsolute 右カラム bgl-rightflexbox のクラスセレクタを 「追加CSSクラス」へ 38
39. WordPressへCSSを追加するには
40. カスタマイザーの追加CSS • カスタマイザーの［追加CSS］に CSSコードを追記できる • コードは、全ページに適用される • サイトの設定を変更した時に コードが消えてしまうことも • カスタマイザーで、編集しづらい 40
41. 追加コードをちゃんと管理したい……
42. 独自の外部CSSファイルを マイ・プラグインで組み込み
43. 43 「独自CSS」をマイ・プラグインで組み込み 1. CSSファイルを読み込むための WordPressテンプレートコード をPHPファイルへ書く 2. pluginsフォルダへ フォルダを作り、ファイルを配置 3. このプラグインを有効化し CSSファイルを読み込む
44. 44 44
45. 45 Google Fontsを読み込んだり ページのURLスラッグが「-lp」だったら有効 ……の機能を加え、今回は作りました 45
46. 「再利用ブロック」と「パターン」で 執筆を効率化
47. 「再利用ブロック」と「パターン」は 複数ブロックを定型フォーマットに登録
48. 再利用可能ブロック • 複数のブロックを選択し ［再利用ブロックに追加］で登録 • ブロックの［再利用可能］より ページに再利用可能ブロック として追加できる（共通コンテン ツで、個別には編集できない） 48
49. 再利用可能ブロック • サイト内のすべてのページで このブロックを共通管理できる • ［通常のブロックへ変換］で 再利用可能ブロックを解除すれば 個別に編集できる 49
50. ブロックパターン • ブロックの［パターン］から ブロックを複数組み合わせた パターンを、ページに追加 • デフォルトのパターンと テーマで追加されたパターンがある （自分で追加はできない） • 普通のブロック。個別に編集できる 50
51. プラグイン Block Pattern Builder でパターン登録 Block Pattern Builder で、オリジナルのパターンを登録／管理できる https://ja.wordpress.org/plugins/blockmeister/ 51
52. もっといろんなブロックを使いたい！
53. ブロックを追加する、テーマを探そう 独自のブロックやスタイルを 追加するテーマがある。 好みのテーマを探してみよう！ • ブロック • ブロックスタイル • パターンブロック 53
54. ブロックが追加できる、プラグインを探そう プラグインを組み込むことで 独自のブロックが追加できる 好みのプラグインを探してみよう！ 54
55. 今回のまとめ
56. ブロックエディタを使うのが、最高！
57. ブロックの登場で、コンテンツデザインが HTMLとCSSを知っていれば 手軽に行えるようになった
58. Thank you! 森和恵