WordPressの

カスタマイズ事始め

yumi

自己紹介

名前：mimi (yumi)

昔々MovableTypeに感動してCSS、PHP、JavaScriptの沼へ。

 

デザインもDTPとかイラストもやりますが、たぶん、世間的にはフロントエンドエンジニアです。

 

WordPress歴10年余。

  1. CSS入門編：
    ディベロッパーツールを使おう

  2. CSS初級編：
    ​スタイルガイドを作ろう

  3. CSS中級編：Sassのススメ

今日話すこと

WordPressのカスタマイズ
つまづきポイント　その１

追加CSSの使い方が

分からない

追加CSSとは

WordPressのカスタマイズ

ページにある機能です。

 

 

コレ

ココまで触ったことの無い方はそんなのあるんだー、ぐらいで聞いてください。

CSSの意味もいろはも

全部ググればわかります。

Cascading Style Sheet　とは？

なので今日は

どこをどういじればいいか教えてくれる

ディベロッパーツール

を理解しましょう。

問題は何をいじればいいか

分からない、ということです。

ディベロッパーツールとは

Google Chromeに標準搭載されている開発者向けのツールです。

 

（SafariやFirefoxやIEにもあります）

今から

使ってみましょう。

実践あるのみ。

WordPressのカスタマイズ
つまづきポイント　その2

自分が書いたCSSが

分からない

自分が書いたコードなんてプロでも忘れます

1. シツコイぐらい

コメントを書く

/* ここにコメント書きます　*/
.mystyle {
    font-size: x-small;
 }

/* commentクラスを追加 */
.mystyle .comment {
    color: red;   
}

/* ===========
こんな風に目立たせてもOK
=========== */

2.簡易スタイルガイド

（パターンライブラリ）を作る

@miminari