doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ...
DESCRIPTION
Firefox,Safari,Chromeのインスペクタの違いを紹介& ブラウザのインスペクタを使っての簡単なCSS編集方法TRANSCRIPT
doshirouto2014のcssだけを改造して子テーマを作る
最速手抜きカスタマイズ (初級)
Atsushi Ando!@Next_Season
自己紹介(その他)
!数人で小規模のインフラ!プロモーションの提案!デザイン、Web制作
自己紹介(その他)
!数人で小規模のインフラ!プロモーションの提案!デザイン、Web制作
最近のオレWordPress
Concrete5
MODx
VMware
KeynotePhotoShop
Illustrator
子テーマについて上村さん、田中さんから構造・概要は 説明いただいてるので欲しいデザインに近いテーマを手軽に • • •
変更したい!って時に簡単に変える時に 便利なブラウザの使い方(手抜き)を紹介します。
子テーマについて上村さん、田中さんから構造・概要は 説明いただいてるので欲しいデザインに近いテーマを手軽に • • •
変更したい!って時に簡単に変える時に 便利なブラウザの使い方(手抜き)を紹介します。
手軽じゃない場合は
テーマを作った方が早いです。
参考になる資料等...
• 文系女子デザイナーのためのラクして得するtwentytwelveカスタマイズ [@mamy315]http://www.slideshare.net/mamy315/twentytwelve-20614795
• WordPress3.6対応 子テーマ入門 [Kindle版]
※少しだけ注意• 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: 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');
JetPackのカスタムCSSを使用
JetPackのカスタムCSSを使用
style.cssのアクセス権を 確認&変更
•FTPソフト等で書き込み権限を与えて下さい。
それではコピペ開始
ご清聴 ありがとうございました。