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
390
ブロックと追加CSSでお手軽カスタマイズ
Yoshiaki Ogata
November 28, 2020
Tweet
Share
More Decks by Yoshiaki Ogata
See All by Yoshiaki Ogata
自作WordPressテーマを人気テーマにしたい妄想話
yosiakatsuki
0
290
スマホで出来る!WordPressサイト更新
yosiakatsuki
0
110
Gutenberg で「かんたん入力機能」~さよなら入力補助としてのカスタムフィールド~
yosiakatsuki
1
340
プラグイン3分クッキング.pdf
yosiakatsuki
0
34
Gutenbergになっても僕はWordの原稿コピペで投稿を作るという作業を続けられるのか
yosiakatsuki
0
540
WordPressブログカスタマイズ今日から本気出す
yosiakatsuki
0
900
意のままに(わがままに)僕がテーマを作る為に覚えたこと2
yosiakatsuki
0
270
意のままに(わがままに)僕がテーマを作る為に覚えたこと
yosiakatsuki
1
880
WordBench群馬 第1回 自己紹介大会 20171209
yosiakatsuki
0
440
Other Decks in Technology
See All in Technology
DMMブックスへのTipKit導入
ttyi2
1
110
Azureの開発で辛いところ
re3turn
0
240
AWS re:Invent 2024 re:Cap Taipei (for Developer): New Launches that facilitate Developer Workflow and Continuous Innovation
dwchiang
0
160
【NGK2025S】動物園(PINTO_model_zoo)に遊びに行こう
kazuhitotakahashi
0
230
Copilotの力を実感!3ヶ月間の生成AI研修の試行錯誤&成功事例をご紹介。果たして得たものとは・・?
ktc_shiori
0
350
2025年に挑戦したいこと
molmolken
0
160
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
250
完全自律型AIエージェントとAgentic Workflow〜ワークフロー構築という現実解
pharma_x_tech
0
350
Amazon Route 53, 待ちに待った TLSAレコードのサポート開始
kenichinakamura
0
170
Evolving Architecture
rainerhahnekamp
3
250
GoogleのAIエージェント論 Authors: Julia Wiesinger, Patrick Marlow and Vladimir Vuskovic
customercloud
PRO
0
150
#TRG24 / David Cuartielles / Post Open Source
tarugoconf
0
580
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Gamification - CAS2011
davidbonilla
80
5.1k
Mobile First: as difficult as doing things right
swwweet
222
9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Typedesign – Prime Four
hannesfritz
40
2.5k
How GitHub (no longer) Works
holman
312
140k
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で対 応出来るように、「使い慣れたテーマ・プラグイ ン」があるとやりやすい…はず…
「ブロックだけ」ではなく、「オリジナルテーマを 作って」でもない、いいとこ取りなやり⽅がハマる 案件もあるはずです。 やり⽅にとらわれず、予算や時間に合わせて柔軟に 対応したほうが幸せなときもあります!
おわり