Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブロックと追加CSSでお手軽カスタマイズ
Search
Yoshiaki Ogata
November 28, 2020
Technology
0
430
ブロックと追加CSSでお手軽カスタマイズ
Yoshiaki Ogata
November 28, 2020
Tweet
Share
More Decks by Yoshiaki Ogata
See All by Yoshiaki Ogata
自作WordPressテーマを人気テーマにしたい妄想話
yosiakatsuki
0
310
スマホで出来る!WordPressサイト更新
yosiakatsuki
0
110
Gutenberg で「かんたん入力機能」~さよなら入力補助としてのカスタムフィールド~
yosiakatsuki
1
360
プラグイン3分クッキング.pdf
yosiakatsuki
0
38
Gutenbergになっても僕はWordの原稿コピペで投稿を作るという作業を続けられるのか
yosiakatsuki
0
630
WordPressブログカスタマイズ今日から本気出す
yosiakatsuki
0
970
意のままに(わがままに)僕がテーマを作る為に覚えたこと2
yosiakatsuki
0
300
意のままに(わがままに)僕がテーマを作る為に覚えたこと
yosiakatsuki
1
930
WordBench群馬 第1回 自己紹介大会 20171209
yosiakatsuki
0
470
Other Decks in Technology
See All in Technology
様々なファイルシステム
sat
PRO
0
250
re:Inventに行くまでにやっておきたいこと
nagisa53
0
260
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
240
Azure Well-Architected Framework入門
tomokusaba
1
130
入院医療費算定業務をAIで支援する:包括医療費支払い制度とDPCコーディング (公開版)
hagino3000
0
110
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
180
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
190
オブザーバビリティが育むシステム理解と好奇心
maruloop
2
1.2k
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
180
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
1
410
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
130
OCIjp_Oracle AI World_Recap
shinpy
1
180
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Producing Creativity
orderedlist
PRO
347
40k
Faster Mobile Websites
deanohume
310
31k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
GraphQLとの向き合い方2022年版
quramy
49
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Code Review Best Practice
trishagee
72
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How STYLIGHT went responsive
nonsquared
100
5.9k
Building an army of robots
kneath
305
46k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
A Tale of Four Properties
chriscoyier
161
23k
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で対 応出来るように、「使い慣れたテーマ・プラグイ ン」があるとやりやすい…はず…
「ブロックだけ」ではなく、「オリジナルテーマを 作って」でもない、いいとこ取りなやり⽅がハマる 案件もあるはずです。 やり⽅にとらわれず、予算や時間に合わせて柔軟に 対応したほうが幸せなときもあります!
おわり