Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Bc8c0fe4ea0f5368b950d99ab5ded877?s=128

r360studio 森和恵

June 26, 2021
Tweet

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
  15. 15

  16. 16

  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. • 外枠 「カラムブロック 」で カラムの数を指定(最大6つ) • カラム ごとに「幅」を 指定できる カラムブロック

    カラムを横に並べて 段組のレイアウトができる 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! 森和恵