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
420
ブロックと追加CSSでお手軽カスタマイズ
Yoshiaki Ogata
November 28, 2020
Tweet
Share
More Decks by Yoshiaki Ogata
See All by Yoshiaki Ogata
自作WordPressテーマを人気テーマにしたい妄想話
yosiakatsuki
0
300
スマホで出来る!WordPressサイト更新
yosiakatsuki
0
110
Gutenberg で「かんたん入力機能」~さよなら入力補助としてのカスタムフィールド~
yosiakatsuki
1
360
プラグイン3分クッキング.pdf
yosiakatsuki
0
37
Gutenbergになっても僕はWordの原稿コピペで投稿を作るという作業を続けられるのか
yosiakatsuki
0
600
WordPressブログカスタマイズ今日から本気出す
yosiakatsuki
0
950
意のままに(わがままに)僕がテーマを作る為に覚えたこと2
yosiakatsuki
0
290
意のままに(わがままに)僕がテーマを作る為に覚えたこと
yosiakatsuki
1
920
WordBench群馬 第1回 自己紹介大会 20171209
yosiakatsuki
0
460
Other Decks in Technology
See All in Technology
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
3
9.6k
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
550
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
200
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
【Oracle Cloud ウェビナー】インフラのプロフェッショナル集団KELが考えるOCIでのソリューション実現
oracle4engineer
PRO
1
100
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
250
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
380
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
6
13k
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
420
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
110
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
250
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.4k
The Invisible Side of Design
smashingmag
301
51k
Practical Orchestrator
shlominoach
189
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Producing Creativity
orderedlist
PRO
346
40k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Done Done
chrislema
184
16k
The Cult of Friendly URLs
andyhume
79
6.5k
Optimizing for Happiness
mojombo
379
70k
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で対 応出来るように、「使い慣れたテーマ・プラグイ ン」があるとやりやすい…はず…
「ブロックだけ」ではなく、「オリジナルテーマを 作って」でもない、いいとこ取りなやり⽅がハマる 案件もあるはずです。 やり⽅にとらわれず、予算や時間に合わせて柔軟に 対応したほうが幸せなときもあります!
おわり