Twenty Twenty One のお話

Transcript

1. Twenty Twenty One のお話 コルネ株式会社 ⼤⻄ 政隆 2020.12.12
2. plofile / ⾃⼰紹介 ⼤⻄ 政隆 （おおにし まさたか） コルネ株式会社 Webデザイナー Welcart を使ったECサイトのデザインやコーディング、 Welcart のテーマ制作など、主にフロントエンド側を担当しています。
3. agenda / 流れ Twenty Twenty Oneについて Twenty Twenty Oneの特徴 まとめ
4. about / Twenty Twenty One について 5.5 5.6 アップグレードはお済みですか？
5. about / Twenty Twenty One について 5.6 WordPress 5.6 で搭載された新しいデフォルトテーマとなります 2021
6. about / Twenty Twenty One について 5.6 2019年は「Twenty Twenty」、2020年は「Twenty Twenty-One」と 毎年この時期になるとデフォルトテーマがリリースされます 5.3 Twenty Twenty Twenty Twenty- One
7. about / Twenty Twenty One について （デフォルトテーマは）多くの場合、既存のテーマを元に作成している。 Seedlet by Automattic社
8. feature / Twenty Twenty One の特徴 デザインについて（未完成）
9. feature / Twenty Twenty One の特徴 Twenty Twenty One is designed to be a blank canvas for the block editor . ブロックエディターのための空⽩のキャンバス by Mel Choyce
10. feature / Twenty Twenty One の特徴 テーマカスタマイザー 外観 > カスタマイズ - ⾊ 背景⾊の変更とダークモードの設定がおこなえます 背景⾊ ダークモード パレッド部分がTwenty Twenty-One 仕様となっている Twenty Twenty ダークモードを有効化にすると、 フロント画⾯のページ右下にボタンが表⺬され、 閲覧者側で表⺬設定がおこなえるようになります。 サイトの背景がダーク⾊の場合は、この機能は無効となります。
11. feature / Twenty Twenty One の特徴 CSS フォントファミリーやhタグなどフォントサイズなど、サイト構成の基準となるところに カスタムプロパティ（CSS 変数）が使⽤されている。 twentytwentyone / styl . css h1 {   font-family: -apple-system, BlinkMacSystemFont, “Helvetica Neue”, Helvetica, sans-serif; } :root {   ̶global̶font-primary: var(̶font-headings, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans…   ̶heading̶font-family: var(̶global̶font-primary); } h1 {   font-family: var(̶heading̶font-family); } CSS 変数にはフォールバック（代替値）の値を1つ以上設定することができます。 var() 関数を使⽤して、指定された変数が定義されていない場合や無効な場合の代替値をカンマで区切って 複数指定することができます。
12. feature / Twenty Twenty One の特徴 ブレイクポイント 画⾯幅に合わせてCSSを切り替える @media only screen and (min-width: 482px) {} @media only screen and (min-width: 652px) {} @media only screen and (min-width: 822px) {} ブロックエディター 「Twenty Twenty-One」オリジナルのブロックパターンが付属されています
13. feature / Twenty Twenty One の特徴 ブロックパターン Large text Links area Overlapping images Two images showcase Overlapping images and text Portfolio list Overlapping images Contact Information
14. feature / Twenty Twenty One の特徴 カラムブロック Overlap が追加されました ソーシャルアイコンブロック ダークグレー が追加されました 画像ブロック Borders と Frame が追加されました ・グループブロック Borders が追加されました ・最新の投稿ブロック ・カバーブロック ・メディアと⽂章ブロック ・区切りブロック 「幅広線」が無くなり 「Thick」が追加されました。
15. ご清聴ありがとうございました