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
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Yoshiaki Ogata
November 28, 2020
Technology
470
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
ブロックと追加CSSでお手軽カスタマイズ
Yoshiaki Ogata
November 28, 2020
More Decks by Yoshiaki Ogata
See All by Yoshiaki Ogata
自作WordPressテーマを人気テーマにしたい妄想話
yosiakatsuki
0
330
スマホで出来る!WordPressサイト更新
yosiakatsuki
0
120
Gutenberg で「かんたん入力機能」~さよなら入力補助としてのカスタムフィールド~
yosiakatsuki
1
380
プラグイン3分クッキング.pdf
yosiakatsuki
0
45
Gutenbergになっても僕はWordの原稿コピペで投稿を作るという作業を続けられるのか
yosiakatsuki
0
740
WordPressブログカスタマイズ今日から本気出す
yosiakatsuki
0
1.2k
意のままに(わがままに)僕がテーマを作る為に覚えたこと2
yosiakatsuki
0
310
意のままに(わがままに)僕がテーマを作る為に覚えたこと
yosiakatsuki
1
980
WordBench群馬 第1回 自己紹介大会 20171209
yosiakatsuki
0
520
Other Decks in Technology
See All in Technology
SIer20年! 培ったスキルがスタートアップで輝く時
shucho0103
0
830
Microsoft Build Keynoteふりかえり
tomokusaba
0
120
200個のGitHubリポジトリを横断調査したかった
icck
0
110
ポケモンの型をTypeScriptの型システムで表現してみた
subroh0508
0
370
2026 TECHFRESH 畢業分享會 - AI-Native 重塑軟體工程與虛擬講師
line_developers_tw
PRO
0
750
2026TECHFRESH畢業分享會 - Lightning Talk - 資料也要 CI/CD? 用 Airbyte 自動化資料同步
line_developers_tw
PRO
0
740
RSA暗号を手計算したくなること、ありますよね?? (20260615_orestudy6_rsa)
thousanda
0
200
Building applications in the Gemini API family.
line_developers_tw
PRO
0
2.9k
あなたの AI ワークスペースに、 専門コーダーを連れてくる - Amazon Quick Desktop 最新情報
kawaji_scratch
1
130
Disciplined Vibes: Scaling AI-Assisted Engineering
sheharyar
0
130
Oracle AI Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
6
1.5k
生成 AI × MCP で切り拓く次世代 SRE!自律型運用への挑戦と開発者体験の進化
_awache
0
190
Featured
See All Featured
Are puppies a ranking factor?
jonoalderson
1
3.5k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
130
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
180
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
230
Become a Pro
speakerdeck
PRO
31
6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.9k
BBQ
matthewcrist
89
10k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
Visualization
eitanlees
152
17k
Building Applications with DynamoDB
mza
96
7.1k
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で対 応出来るように、「使い慣れたテーマ・プラグイ ン」があるとやりやすい…はず…
「ブロックだけ」ではなく、「オリジナルテーマを 作って」でもない、いいとこ取りなやり⽅がハマる 案件もあるはずです。 やり⽅にとらわれず、予算や時間に合わせて柔軟に 対応したほうが幸せなときもあります!
おわり