11月 02 2014

WP Mini Tips #3

 
WP Mini Tips #3

20141102-1

本日も CSSの基本的なところを書いてみようと思います。

WPのダッシュボードから　外観 – テーマ編集　へ行くと、そのサイトで使われている CSSが表示され、その Style.cssを修正することでサイトのデザインを変える事ができます。

CSSは複数のクラスなどへ一括したプロパティを設定する事が出来る様になっており、そのことを意識して修正しないと、意図しないところまで変わってしまいます。　以下に例をば。

アンカーテキストへの一括指定
1
2
3
4
5
6

a:hover,
a:focus,
a:active {
	color: #00b5b5;
	text-decoration: none;
}

上記はアンカーテキストの hover, focus, active に対し、一括して color と text-decoration が設定されています。
WPの CSSにはこの様な記述が沢山ありますので、一括して指定されていることを意識して編集します。
上記を別の方法で記述すると下記の様な感じ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* 記述の方法　その2 */
a:hover, a:focus, a:active {
	color: #00b5b5;
	text-decoration: none;
}
 
/* 記述の方法　その3 */
a:hover {
	color: #00b5b5;
	text-decoration: none;
}
 
a:focus{
	color: #00b5b5;
	text-decoration: none;
}
 
a:active {
	color: #00b5b5;
	text-decoration: none;
}
 
/* 記述の方法　その4 */
a:hover  { color: #00b5b5; text-decoration: none; }
a:focus  { color: #00b5b5; text-decoration: none; }
a:active { color: #00b5b5; text-decoration: none; }
 
/* 記述の方法　その5 */
a:hover, a:focus, a:active { color: #00b5b5; text-decoration: none; }

上記は記述の方法が違うだけで、全て同じ内容です。

一括指定したあと、その中の 1つだけ違うプロパティを加えたり、同じプロパティへ違う値を設定したりと言う事もできます。

1
2
3
4
5
6
7
8
9
10
11

/* hover, focus, active へ一括してプロパティを設定 */
a:hover, a:focus, a:active {
	color: #00b5b5;         /* 注1 */
	text-decoration: none;  /* 注2 */
}
 
/* hover のみカラーを変える */
a:hover { color: #ff0000; }
 
/* focus のみアンダーラインを設定する */
a:focus { text-decoration: underline; }

上記の様に一括指定の後、個別に別の値を設定したり、プロパティ追加するという事が WPの CSSではごく普通にやられています。
この事を頭にいれておかないと、
「注1 の部分を変更したのにマウス載せたときのカラーだけが変わらない」「なんでだ～」
「アンダーラインを取りたいのに 注2を見ると設定されていない」「なんでだ～」
となります（笑）

CSSは柔軟な書き方と設定ができるので、これらを知っていると便利に感じるのですが、CSSを覚え初めの人だと混乱するかもしれませんね。

Category　PENTAX-D FA Macro 100mm F2.8 WR, WordPress

  1. iMovie

    おはようございます。
    Tips #3、有益な情報ありがとうございます。
    そう、これ、嵌ってます。　＾＾）；
    テキストをマウスオーバーして色を変化させようとしても、色が変わらないので、なんでだぁ～という状況だったので・・・
    なるほど、一括指定した後に、個別で設定しているんですね。
    それと、書き方も、ひとつでなくて、色々な表現があるのかぁ～
    大変、勉強になりました。
    今回の記事を参考に、見直します。

    1. delphian (Post author)

      iMovieさん、こんにちは。

      これらの基本的な仕様が分からないと、修正しても変わらないという　なぜ？　状態になりますね（笑）
      CSSが分かったら次は phpと htmlを勉強するといいですね。
      html, css, php が理解出来るようになるとサイトのカスタマイズは自由自在です。

  2. iMovie

    追記です。
    かもめ、テキストをマウスオーバーすると、ふんわりと文字をぼかすようにしました。

    1. delphian (Post author)

      拝見しました。
      エフェクト系は設置当初は自己の満足度が高く楽しいのですが、
      長期的に考えるとシンプルな方が良いのではないでしょうか。
      ビジターの目を惹くのはしばらくの間だけですし。

  3. bluem

    おはようございます(^^
    設定して頂いた私のblogのCSSを、ごっそりtestサイトにコピペして
    昨夜眺めておりました。
    変えた部分とか、メモを入れて下さってるので、とても勉強になっております♪
    マヂで仕事が落ち着いたら、その辺りの本でも買って勉強しようと思ったり(^^
    やはり自分である程度出来るようになると、楽しさも倍増ですからね。

    1. delphian (Post author)

      bluemさん、こんにちは。

      お、CSSの変更箇所をチェックしましたか（笑）
      最初は難解でも眺めているうち、触っているうちに何となく分かってきます。
      テストサイトでいろいろ遊んでみるといいと思います。

  4. jerry

    おはようございます。
    初歩の初歩を聞いてもいいでしょうか(^^;

    ＞外観 – テーマ編集　へ行くと、そのサイトで使われている CSSが表示され、その Style.cssを修正する・・・・とありますが、テーマ編集の画面で表示されるCSSは、背景が真っ白で、この記事に示してある
    例の画像では、行№があって、1行ごとに縞々になってますよね。
    これは、一旦CSSをコピーして、エディッタで編集しているときの画像なんでしょうか？

    エディッタで編集したCSSをどうやってWPに反映させるとかその辺の基礎の基礎をご教示いただけるとありがたいです。

    こんなことも知らんのか！と呆れられると思いますが・・・
    聞くは一時の恥ということで質問でございます。

    1. delphian (Post author)

      Jerryさん、こんにちは。

      ここで表示しているのは WEBでコードがちゃんと読める様な装飾をしており、エディッタのスクショでは無いですよ。
      コードを選択してコピペもできるし（笑）
      CSS用エディッタは良いのがありますので、FBででも紹介しますね。
      ※過去記事で紹介済みのエディッタです（笑）

  5. Malu

    こんにちは。
    Wordpressのテーマも作者によってCSSの書き方がそれぞれ特徴ありますので、テーマを変更した時、こんがらがってきます。
    実は、昨日から気分転換にとテーマを変更していたのですが、なんとか形になってきたようです。
    試行錯誤の繰り返しですので疲れました。(^_^;)
    せっかくの休日だというのに、雨ばかり。

    1. delphian (Post author)

      Maluさん、こんにちは。

      記述方法に自由度があるので、確かに作者によって違ったりしますね。
      テーマ変更中ですか？　そりゃ楽しい事でしょう！
      サイト構築は寝るのが惜しくなるぐらい面白いからな～（笑）