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

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

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

857b3806f615b67e7709b26c4bcc6739?s=128

Yoshiaki Ogata

November 28, 2020
Tweet

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. おわり