doshirouto2014のcssだけ
を改造して子テーマを作る
最速手抜きカスタマイズ (初級)
Atsushi Ando!
@Next_Season
自己紹介

(その他)
!

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

(その他)



!

数人で小規模のインフラ!
プロモーションの提案!
デザイン、Web制作
最近のオレ
WordPress
Concrete5
MODx
VMware
Keynote
PhotoShop

Illustrator
子テーマについて
上村さん、田中さんから構造・概要は

説明いただいてるので

欲しいデザインに近いテーマを手軽に

•

•

•

変更したい!って時に簡単に変える時に

便利なブラウザの使い方(手抜き)を紹介します。
子テーマについて

手軽じゃない場合
説明いただいてるので
は
欲しいデザインに近いテーマを手軽に

テーマを作った方
変更したい!って時に簡単に変える時に

が早いです。
便利なブラウザの使い方(手抜き)を紹介します。
上村さん、田中さんから...
参考になる資料等...
•

文系女子デザイナーのためのラクして得する

twentytwelveカスタマイズ [@mamy315]

http://www.slideshare.net/mamy315/twentytwelve-2061479...
※少しだけ注意
•

SEO的にNGな変更が含まれるかも

デモで display: none; とか

•

CSS的に美しくない対応が含まれるかも

デモで !important とか
CSS編集・修正時
インスペクタはお使いですか?
資料作りながら気づいた

に
直接は関係ないです。
インスペクタでCSS編集

Firefox
インスペクタでCSS編集

Firefox

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

Safari
インスペクタでCSS編集

Safari

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

Chrome
インスペクタでCSS編集

Chrome

•値の増減をキーボードのup/downで変更できる!
•カラー表示、カラーパレットも表示される!
•セレクタ、プロパティ、値を同時にコピーできる
という訳で
インストール
•

doshirouto2014

↑必須

•

feat-doshirouto2014

↑今回の作業用子テーマ
style.cssの中身
/*
Theme Name: feat.doshirouto2014
Author: Atsushi Ando
Author URI:
Description: ドシロウト2014のための超簡単子テーマ
Version...
JetPackのカスタムCSSを使用
JetPackのカスタムCSSを使用
style.cssのアクセス権を
確認&変更

•FTPソフト等で書き込み権限を与えて下さい。
それではコピペ開始
ご清聴
ありがとうございました。
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
Upcoming SlideShare
Loading in …5
×

doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)

1,050 views
964 views

Published on

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

Published in: Self Improvement
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,050
On SlideShare
0
From Embeds
0
Number of Embeds
105
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)

  1. 1. doshirouto2014のcssだけ を改造して子テーマを作る 最速手抜きカスタマイズ (初級) Atsushi Ando! @Next_Season
  2. 2. 自己紹介
 (その他) ! 数人で小規模のインフラ! プロモーションの提案! デザイン、Web制作
  3. 3. 自己紹介
 (その他)  ! 数人で小規模のインフラ! プロモーションの提案! デザイン、Web制作
  4. 4. 最近のオレ WordPress Concrete5 MODx VMware Keynote PhotoShop Illustrator
  5. 5. 子テーマについて 上村さん、田中さんから構造・概要は
 説明いただいてるので
 欲しいデザインに近いテーマを手軽に
 • • • 変更したい!って時に簡単に変える時に
 便利なブラウザの使い方(手抜き)を紹介します。
  6. 6. 子テーマについて 手軽じゃない場合 説明いただいてるので
は 欲しいデザインに近いテーマを手軽に
 テーマを作った方 変更したい!って時に簡単に変える時に
 が早いです。 便利なブラウザの使い方(手抜き)を紹介します。 上村さん、田中さんから構造・概要は
 • • •
  7. 7. 参考になる資料等... • 文系女子デザイナーのためのラクして得する
 twentytwelveカスタマイズ [@mamy315]
 http://www.slideshare.net/mamy315/twentytwelve-20614795 • WordPress3.6対応 子テーマ入門 [Kindle版]
  8. 8. ※少しだけ注意 • SEO的にNGな変更が含まれるかも
 デモで display: none; とか • CSS的に美しくない対応が含まれるかも
 デモで !important とか
  9. 9. CSS編集・修正時 インスペクタはお使いですか?
  10. 10. 資料作りながら気づいた に 直接は関係ないです。
  11. 11. インスペクタでCSS編集
 Firefox
  12. 12. インスペクタでCSS編集
 Firefox •値の増減をキーボードのup/downで変更できる! •カラー表示、カラーパレットが表示されない! •セレクタ、プロパティ、値がコピーできない
  13. 13. インスペクタでCSS編集
 Safari
  14. 14. インスペクタでCSS編集
 Safari •値の増減をキーボードのup/downで変更できない! •カラー表示はされる! •セレクタ、プロパティ、値を同時にコピーできない
  15. 15. インスペクタでCSS編集
 Chrome
  16. 16. インスペクタでCSS編集
 Chrome •値の増減をキーボードのup/downで変更できる! •カラー表示、カラーパレットも表示される! •セレクタ、プロパティ、値を同時にコピーできる
  17. 17. という訳で
  18. 18. インストール • doshirouto2014
 ↑必須 • feat-doshirouto2014
 ↑今回の作業用子テーマ
  19. 19. 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');
  20. 20. JetPackのカスタムCSSを使用
  21. 21. JetPackのカスタムCSSを使用
  22. 22. style.cssのアクセス権を 確認&変更 •FTPソフト等で書き込み権限を与えて下さい。
  23. 23. それではコピペ開始
  24. 24. ご清聴 ありがとうございました。

×