ブロックと追加CSSでお手軽カスタマイズ

Transcript

1. ブロックと追加CSSで お⼿軽カスタマイズ 2020/11/28 @yosiakatsuki 第5回 群⾺ WordPress Meetup
2. ⾃⼰紹介
3. ・尾形 義暁 （おがた よしあき） ・フリーランス ・WordPress テーマ/プラグインデベロッパー ・Twitter : @yosiakatsuki
4. 著書・制作物 「本気でカッコよくする WordPress で⼈気ブログ」 無料WordPress テーマ 「yStandard 」
5. 活動・イベント ・Gunma WordPress Meetup(群⾺県) (埼⽟県) ・WordPress もくもく勉強会@本庄
6. 今⽇お話すること
7. ・CSSだけで出来るいろいろカスタマイズ ・覚えておきたい技術要素 ・カスタマイズサンプル ・ブロック＋αで可能性は無限⼤
8. 主に制作者向けのお話です
9. CSSだけで出来る いろいろカスタマイズ
10. ⾃分でHTMLを書かなくても、ブロック + CSSでカス タマイズはいろいろできます
11. サンプル
12. 覚えておきたい技術要素
13. HTML・CSS HTMLについては書かなくても、HTMLとCSSの紐付 けがわかっている必要があります。
14. ブラウザの開発者ツール Google Chormeのデベロッパーツールなど ブロックが⽣成するHTMLやCSSでカスタマイズする 際に必要になるクラス(class)などを調べる
15. ブラウザの開発者ツール
16. カスタマイズサンプル
17. 編集画⾯側 「メディアと⽂章」ブロック 画像やテキストを設定する
18. ポイントは「追加 CSS クラス」 「追加CSSクラス」にこのブロックだけを カスタマイズするためのクラスをつける
19. 「追加CSS」でCSSを追加 「外観」→「カスタマイズ」→「追加CSS」で カスタマイズ⽤CSSを書いていく
20. デベロッパーツールが⼤活躍 デベロッパーツールでプレビューしながら、調整⽤CSS を「追加CSS」にコピー＆ペーストするとラク！
21. ブロック＋αで可能性は無限⼤
22. ・オリジナルのテーマを作るのは⼤変 ・ブロックだけじゃできない  「あとちょっとこれができれば…」 既存ブロック + CSSカスタマイズで サクッと対応！
23. ⼭ほどあるブロックプラグインから好みのものを探 すのは⼤変… ⼤まかにやりたいことが出来るブロックとCSSで対 応出来るように、「使い慣れたテーマ・プラグイ ン」があるとやりやすい…はず…
24. 「ブロックだけ」ではなく、「オリジナルテーマを 作って」でもない、いいとこ取りなやり⽅がハマる 案件もあるはずです。 やり⽅にとらわれず、予算や時間に合わせて柔軟に 対応したほうが幸せなときもあります！
25. おわり