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

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

description

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

Transcript of doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ...

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

doshirouto2014のcssだけを改造して子テーマを作る

最速手抜きカスタマイズ (初級)

Atsushi Ando!@Next_Season

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

自己紹介(その他)

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

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

自己紹介(その他)

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

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

最近のオレWordPress

Concrete5

MODx

VMware

KeynotePhotoShop

Illustrator

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

子テーマについて上村さん、田中さんから構造・概要は 説明いただいてるので欲しいデザインに近いテーマを手軽に • • •

変更したい!って時に簡単に変える時に 便利なブラウザの使い方(手抜き)を紹介します。

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

子テーマについて上村さん、田中さんから構造・概要は 説明いただいてるので欲しいデザインに近いテーマを手軽に • • •

変更したい!って時に簡単に変える時に 便利なブラウザの使い方(手抜き)を紹介します。

手軽じゃない場合は

テーマを作った方が早いです。

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

参考になる資料等...

• 文系女子デザイナーのためのラクして得するtwentytwelveカスタマイズ [@mamy315]http://www.slideshare.net/mamy315/twentytwelve-20614795

• WordPress3.6対応 子テーマ入門 [Kindle版]

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

※少しだけ注意• SEO的にNGな変更が含まれるかもデモで display: none; とか

• CSS的に美しくない対応が含まれるかもデモで !important とか

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

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

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

資料作りながら気づいた

に 直接は関係ないです。

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

インスペクタでCSS編集 Firefox

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

インスペクタでCSS編集 Firefox

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

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

インスペクタでCSS編集 Safari

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

インスペクタでCSS編集 Safari

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

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

インスペクタでCSS編集 Chrome

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

インスペクタでCSS編集 Chrome

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

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

という訳で

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

インストール• doshirouto2014↑必須

• feat-doshirouto2014↑今回の作業用子テーマ

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

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');

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

JetPackのカスタムCSSを使用

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

JetPackのカスタムCSSを使用

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

style.cssのアクセス権を 確認&変更

•FTPソフト等で書き込み権限を与えて下さい。

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

それではコピペ開始

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

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