Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,264 views

Published on

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

Published in: Self Improvement
  • Be the first to comment

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. ご清聴 ありがとうございました。

×