WordPressの
カスタマイズ事始め
yumi
![](https://s3.amazonaws.com/media-p.slid.es/uploads/862586/images/4812856/btn-line.png)
自己紹介
名前:mimi (yumi)
昔々MovableTypeに感動してCSS、PHP、JavaScriptの沼へ。
デザインもDTPとかイラストもやりますが、たぶん、世間的にはフロントエンドエンジニアです。
WordPress歴10年余。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/862586/images/4812875/logo.png)
CSS入門編:
ディベロッパーツールを使おうCSS初級編:
スタイルガイドを作ろうCSS中級編:Sassのススメ
今日話すこと
WordPressのカスタマイズ
つまづきポイント その1
追加CSSの使い方が
分からない
追加CSSとは
WordPressのカスタマイズ
ページにある機能です。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/862586/images/4852989/スクリーンショット_2018-04-26_11.03.17.png)
コレ
ココまで触ったことの無い方はそんなのあるんだー、ぐらいで聞いてください。
CSSの意味もいろはも
全部ググればわかります。
Cascading Style Sheet とは?
なので今日は
どこをどういじればいいか教えてくれる
ディベロッパーツール
を理解しましょう。
問題は何をいじればいいか
分からない、ということです。
ディベロッパーツールとは
![](https://s3.amazonaws.com/media-p.slid.es/uploads/862586/images/4822135/pasted-from-clipboard.png)
Google Chromeに標準搭載されている開発者向けのツールです。
(SafariやFirefoxやIEにもあります)
今から
使ってみましょう。
実践あるのみ。
WordPressのカスタマイズ
つまづきポイント その2
自分が書いたCSSが
分からない
自分が書いたコードなんてプロでも忘れます
1. シツコイぐらい
コメントを書く
/* ここにコメント書きます */
.mystyle {
font-size: x-small;
}
/* commentクラスを追加 */
.mystyle .comment {
color: red;
}
/* ===========
こんな風に目立たせてもOK
=========== */
2.簡易スタイルガイド
(パターンライブラリ)を作る
@miminari
![](https://s3.amazonaws.com/media-p.slid.es/uploads/862586/images/4812856/btn-line.png)