Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ブロックと追加CSSでお手軽カスタマイズ
Yoshiaki Ogata
November 28, 2020
Technology
0
180
ブロックと追加CSSでお手軽カスタマイズ
Yoshiaki Ogata
November 28, 2020
Tweet
Share
More Decks by Yoshiaki Ogata
See All by Yoshiaki Ogata
自作WordPressテーマを人気テーマにしたい妄想話
yosiakatsuki
0
140
スマホで出来る!WordPressサイト更新
yosiakatsuki
0
80
Gutenberg で「かんたん入力機能」~さよなら入力補助としてのカスタムフィールド~
yosiakatsuki
1
180
プラグイン3分クッキング.pdf
yosiakatsuki
0
17
Gutenbergになっても僕はWordの原稿コピペで投稿を作るという作業を続けられるのか
yosiakatsuki
0
330
WordPressブログカスタマイズ今日から本気出す
yosiakatsuki
0
690
意のままに(わがままに)僕がテーマを作る為に覚えたこと2
yosiakatsuki
0
180
意のままに(わがままに)僕がテーマを作る為に覚えたこと
yosiakatsuki
1
710
WordBench群馬 第1回 自己紹介大会 20171209
yosiakatsuki
0
300
Other Decks in Technology
See All in Technology
ソフトウェアテスト自動化、一歩前へ
yoshikiito
1
120
マネージャーからみたスクラムと自己管理化
shibe23
0
1k
UIKitのアップデート #WWDC22
akatsuki174
4
300
Target SDK Versionを上げない Notification runtime permission対応
napplecomputer
0
130
Persistence in Serverless Applications - ServerlessDays NYC
marcduiker
0
230
miisan's career talk
mii3king
0
220
アジャイル推進活動におけるBeAgileへの変化の兆し/Signs_of_Change_to_"Be_Agile"_in_Agile_Promotion_Activities
m_iyama
0
170
UWBを使ってみた
norioikedo
0
400
雑な攻撃からELBを守る一工夫 +おまけ / Know-how to protect servers from miscellaneous attacks
hiroga
0
490
DOM Invader - prototype pollution対応の衝撃 - / DOM Invader - prototype pollution
okuken
0
130
複数のスクラムチームをサポートするエンジニアリングマネジメントの話
okeicalm
0
1.1k
Custom GitHub Actions by Java
kazamori
0
290
Featured
See All Featured
Clear Off the Table
cherdarchuk
79
280k
The Cult of Friendly URLs
andyhume
68
4.8k
GitHub's CSS Performance
jonrohan
1020
420k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Design by the Numbers
sachag
271
17k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
The Invisible Side of Design
smashingmag
290
48k
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
Code Review Best Practice
trishagee
43
9.2k
A Tale of Four Properties
chriscoyier
149
21k
Facilitating Awesome Meetings
lara
29
4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Transcript
ブロックと追加CSSで お⼿軽カスタマイズ 2020/11/28 @yosiakatsuki 第5回 群⾺ WordPress Meetup
⾃⼰紹介
・尾形 義暁 (おがた よしあき) ・フリーランス ・WordPress テーマ/プラグインデベロッパー ・Twitter : @yosiakatsuki
著書・制作物 「本気でカッコよくする WordPress で⼈気ブログ」 無料WordPress テーマ 「yStandard 」
活動・イベント ・Gunma WordPress Meetup(群⾺県) (埼⽟県) ・WordPress もくもく勉強会@本庄
今⽇お話すること
・CSSだけで出来るいろいろカスタマイズ ・覚えておきたい技術要素 ・カスタマイズサンプル ・ブロック+αで可能性は無限⼤
主に制作者向けのお話です
CSSだけで出来る いろいろカスタマイズ
⾃分でHTMLを書かなくても、ブロック + CSSでカス タマイズはいろいろできます
サンプル
覚えておきたい技術要素
HTML・CSS HTMLについては書かなくても、HTMLとCSSの紐付 けがわかっている必要があります。
ブラウザの開発者ツール Google Chormeのデベロッパーツールなど ブロックが⽣成するHTMLやCSSでカスタマイズする 際に必要になるクラス(class)などを調べる
ブラウザの開発者ツール
カスタマイズサンプル
編集画⾯側 「メディアと⽂章」ブロック 画像やテキストを設定する
ポイントは「追加 CSS クラス」 「追加CSSクラス」にこのブロックだけを カスタマイズするためのクラスをつける
「追加CSS」でCSSを追加 「外観」→「カスタマイズ」→「追加CSS」で カスタマイズ⽤CSSを書いていく
デベロッパーツールが⼤活躍 デベロッパーツールでプレビューしながら、調整⽤CSS を「追加CSS」にコピー&ペーストするとラク!
ブロック+αで可能性は無限⼤
・オリジナルのテーマを作るのは⼤変 ・ブロックだけじゃできない 「あとちょっとこれができれば…」 既存ブロック + CSSカスタマイズで サクッと対応!
⼭ほどあるブロックプラグインから好みのものを探 すのは⼤変… ⼤まかにやりたいことが出来るブロックとCSSで対 応出来るように、「使い慣れたテーマ・プラグイ ン」があるとやりやすい…はず…
「ブロックだけ」ではなく、「オリジナルテーマを 作って」でもない、いいとこ取りなやり⽅がハマる 案件もあるはずです。 やり⽅にとらわれず、予算や時間に合わせて柔軟に 対応したほうが幸せなときもあります!
おわり