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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Yoshiaki Ogata
November 28, 2020
Technology
460
0
Share
ブロックと追加CSSでお手軽カスタマイズ
Yoshiaki Ogata
November 28, 2020
More Decks by Yoshiaki Ogata
See All by Yoshiaki Ogata
自作WordPressテーマを人気テーマにしたい妄想話
yosiakatsuki
0
330
スマホで出来る!WordPressサイト更新
yosiakatsuki
0
110
Gutenberg で「かんたん入力機能」~さよなら入力補助としてのカスタムフィールド~
yosiakatsuki
1
370
プラグイン3分クッキング.pdf
yosiakatsuki
0
44
Gutenbergになっても僕はWordの原稿コピペで投稿を作るという作業を続けられるのか
yosiakatsuki
0
700
WordPressブログカスタマイズ今日から本気出す
yosiakatsuki
0
1.2k
意のままに(わがままに)僕がテーマを作る為に覚えたこと2
yosiakatsuki
0
310
意のままに(わがままに)僕がテーマを作る為に覚えたこと
yosiakatsuki
1
970
WordBench群馬 第1回 自己紹介大会 20171209
yosiakatsuki
0
510
Other Decks in Technology
See All in Technology
10サービス以上のメール到達率改善を地道に継続的に進めている話 / Continue to improve email delivery rates across multiple services
yamaguchitk333
6
2.1k
AI時代に、 データアナリストがデータエンジニアに異動して
jackojacko_
0
1k
M&Aで増え続けるプロダクトに少数QAはどう立ち向かうか─GENDAが挑む、全員で取り組む品質標準化戦略 / GENDA Tech Talk #4
genda
0
130
続 運用改善、不都合な真実 〜 物理制約のない運用改善はほとんど無価値 / 20260518-ssmjp-kaizen-no-value-without-physical-constraints
opelab
2
250
Fラン学生が考える、AI時代のデザインに執着した突破口
husengs7
1
210
Gaussian Splattingの実用化 - 映像制作への展開
gpuunite_official
0
200
Purview 勉強会報告 Microsoft Purview 入門しようとしてみた
masakichixo
1
440
パーソルキャリア IT/テクノロジー職向け 会社紹介資料|Company Introduction Deck
techtekt
PRO
0
220
AI飲み会幹事エージェントを作っただけなのに
ykimi
0
230
そのSLO 99.9%、本当に必要ですか? 〜優先度付きSLOによる責任共有の設計思想〜 / Is that 99.9% SLO really necessary? Design philosophy of shared responsibility through prioritized SLOs
vtryo
0
810
既存プロダクトQAから新規プロダクトQAへ
ryotakahashi
0
160
20260516_SecJAWS_Days
takuyay0ne
2
460
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.8k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
180
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
190
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
200
The Mindset for Success: Future Career Progression
greggifford
PRO
0
330
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
200
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
290
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
320
A designer walks into a library…
pauljervisheath
211
24k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
52
Navigating Team Friction
lara
192
16k
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で対 応出来るように、「使い慣れたテーマ・プラグイ ン」があるとやりやすい…はず…
「ブロックだけ」ではなく、「オリジナルテーマを 作って」でもない、いいとこ取りなやり⽅がハマる 案件もあるはずです。 やり⽅にとらわれず、予算や時間に合わせて柔軟に 対応したほうが幸せなときもあります!
おわり