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
360
ブロックと追加CSSでお手軽カスタマイズ
Yoshiaki Ogata
November 28, 2020
Tweet
Share
More Decks by Yoshiaki Ogata
See All by Yoshiaki Ogata
自作WordPressテーマを人気テーマにしたい妄想話
yosiakatsuki
0
260
スマホで出来る!WordPressサイト更新
yosiakatsuki
0
110
Gutenberg で「かんたん入力機能」~さよなら入力補助としてのカスタムフィールド~
yosiakatsuki
1
310
プラグイン3分クッキング.pdf
yosiakatsuki
0
30
Gutenbergになっても僕はWordの原稿コピペで投稿を作るという作業を続けられるのか
yosiakatsuki
0
490
WordPressブログカスタマイズ今日から本気出す
yosiakatsuki
0
850
意のままに(わがままに)僕がテーマを作る為に覚えたこと2
yosiakatsuki
0
250
意のままに(わがままに)僕がテーマを作る為に覚えたこと
yosiakatsuki
1
860
WordBench群馬 第1回 自己紹介大会 20171209
yosiakatsuki
0
420
Other Decks in Technology
See All in Technology
エンジニアリングマネージャーが紐解く、事業視点から組織文化まで、包括的アプローチの探求 / READYFOR
9ma3r
14
2.2k
AI でアップデートする既存テクノロジーと、クラウドエンジニアの生きる道
soracom
PRO
1
150
タイミーのBraze活用 ~PUSH通知を活用したレコメンド~
ozeshun
2
120
Estrategias de escalabilidade para projetos web
jessilyneh
1
160
リクルート新人研修2024 テキスト生成AI活用
recruitengineers
PRO
10
430
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
620
新しいことを組織ではじめる、そしてつづける
kzkmaeda
4
380
強いチームを夢見て-PMからSREに転身して1年の振り返り / 20240906_bengo4_sre
bengo4com
1
770
標準ライブラリの奥深アップデートを掘り下げよう!
logica0419
2
410
[RSJ24] Object Retrieval in Large-Scale Indoor Environments Using Dense Text with a Multi-Modal Large Language Model
keio_smilab
PRO
0
220
データウェアハウス製品のSnowflakeでPythonが動くって知ってました?
foursue
1
150
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
280
Featured
See All Featured
Thoughts on Productivity
jonyablonski
65
4.2k
The Cult of Friendly URLs
andyhume
76
5.9k
Scaling GitHub
holman
458
140k
For a Future-Friendly Web
brad_frost
173
9.3k
The Cost Of JavaScript in 2023
addyosmani
39
5.1k
The Invisible Customer
myddelton
119
13k
Facilitating Awesome Meetings
lara
49
5.9k
Code Reviewing Like a Champion
maltzj
518
39k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
42
2k
Building Flexible Design Systems
yeseniaperezcruz
324
37k
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で対 応出来るように、「使い慣れたテーマ・プラグイ ン」があるとやりやすい…はず…
「ブロックだけ」ではなく、「オリジナルテーマを 作って」でもない、いいとこ取りなやり⽅がハマる 案件もあるはずです。 やり⽅にとらわれず、予算や時間に合わせて柔軟に 対応したほうが幸せなときもあります!
おわり