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