Firefox,Safari,Chromeのインスペクタの違いを紹介＆ ブラウザのインスペクタを使っての簡単なCSS編集方法

1. doshirouto2014のcssだけ
を改造して子テーマを作る
最速手抜きカスタマイズ （初級）
Atsushi Ando!
@Next_Season

2. 自己紹介
（その他）
!
数人で小規模のインフラ!
プロモーションの提案!
デザイン、Web制作

3. 自己紹介
（その他）

!
数人で小規模のインフラ!
プロモーションの提案!
デザイン、Web制作

4. 最近のオレ
WordPress
Concrete5
MODx
VMware
Keynote
PhotoShop
Illustrator

5. 子テーマについて
上村さん、田中さんから構造・概要は
説明いただいてるので
欲しいデザインに近いテーマを手軽に
•
•
•
変更したい！って時に簡単に変える時に
便利なブラウザの使い方(手抜き)を紹介します。

6. 子テーマについて
手軽じゃない場合
説明いただいてるので は
欲しいデザインに近いテーマを手軽に
テーマを作った方
変更したい！って時に簡単に変える時に
が早いです。
便利なブラウザの使い方(手抜き)を紹介します。
上村さん、田中さんから構造・概要は
•
•
•

7. 参考になる資料等...
•
文系女子デザイナーのためのラクして得する
twentytwelveカスタマイズ [@mamy315]
http://www.slideshare.net/mamy315/twentytwelve-20614795
•
WordPress3.6対応 子テーマ入門 [Kindle版]

8. ※少しだけ注意
•
SEO的にNGな変更が含まれるかも
デモで display: none; とか
•
CSS的に美しくない対応が含まれるかも
デモで !important とか

10. CSS編集・修正時
インスペクタはお使いですか？

11. 資料作りながら気づいた
に
直接は関係ないです。

12. インスペクタでCSS編集
Firefox

13. インスペクタでCSS編集
Firefox
•値の増減をキーボードのup/downで変更できる!
•カラー表示、カラーパレットが表示されない!
•セレクタ、プロパティ、値がコピーできない

14. インスペクタでCSS編集
Safari

15. インスペクタでCSS編集
Safari
•値の増減をキーボードのup/downで変更できない!
•カラー表示はされる!
•セレクタ、プロパティ、値を同時にコピーできない

16. インスペクタでCSS編集
Chrome

17. インスペクタでCSS編集
Chrome
•値の増減をキーボードのup/downで変更できる!
•カラー表示、カラーパレットも表示される!
•セレクタ、プロパティ、値を同時にコピーできる

18. という訳で

19. インストール
•
doshirouto2014
↑必須
•
feat-doshirouto2014
↑今回の作業用子テーマ

20. style.cssの中身
/*
Theme Name: feat.doshirouto2014
Author: Atsushi Ando
Author URI:
Description: ドシロウト2014のための超簡単子テーマ
Version: 1.0
Template: doshirouto2014
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: doshirouto
*/
@import url('../doshirouto2014/style.css');

21. JetPackのカスタムCSSを使用

22. JetPackのカスタムCSSを使用

23. style.cssのアクセス権を
確認＆変更
•FTPソフト等で書き込み権限を与えて下さい。

24. それではコピペ開始

25. ご清聴
ありがとうございました。