「WordPress」外部CSSファイルの読み込み方法！＆CSSの基本

2016年5月26日2016年5月27日

最近テスト環境を作りWordPressのテーマの自作を始めようかと思っている@saito_sfcです。
まず「index.php」「home.php」「style.css」と3つのファイルから制作を開始したわけですが、開始早々WordPress初心者にとってポイントとなる箇所があったので備忘録のために記しておきます！

WordPressで使用するCSSファイルについてです。

▼この記事の目次

CSSの基本
WordPress・CSS外部ファイル読み込み
この記事のまとめ

CSSの基本

WordPressとCSSの関係を見る前にCSSの基礎を見ていきます。

「CSSの基礎を知っている」

という方は “「第2章」WordPress・CSS外部ファイル読み込み” からご覧下さい。

CSS (Cascading Style Sheets) にはセレクタ、プロパティ(属性)、値という要素を指定して記述します。HTMLファイル内にCSSを直接書き込む事も出来ますが、外部ファイルとして別に作成した方が管理がしやすく推奨されています。
セレクタ、プロパティ、値の書き方はこのような形になります。値を指定したら「;」を忘れずに付けるようにして下さい。

▼要素に色を指定

p {coler: #ff0000;}

p {color: #ff0000; font-size: 30px;}

これは全て大文字でも読み込みます。そして改行やスペースもCSSのデザインには影響がないようです。記述が増えてくると読みづらいものとなってしまいますよね。

書き方は人によってあると思いますが。見やすい書き方としてはインデントを使いこのような書き方があるようです。

p {
color: #ff0000;
}
または・・

p {
color: #ff0000;
font-size: 30px;
}

▼セレクタは複数指定できる

p,h2 {
color: #ff0000;
}

▼コメントアウトも使います。どこを指定しているとか自分で見てわかりやすいように書きます。管理しやすくするためですね。

/*

この部分がコメントアウト領域 (複数行もOK！)

*/

▼色は英単語で指定する事もできます。

探したらこれだけの色がありました。カラーコードを指定しなくても英単語だけでも十分そろっているようです。

color : blue; / (#006fab)
color : green; / (#009a57)
color : red; / (#df3447)
color : yellow; / (#f4d500)
color : gold; / (#ffd700)
color : orange; / (#ef810f)
color: pink; / (#ea9198)
color: silver; / (#C0C0C0)
color: cyan; / (#009cd1)
color: white; / (#f0f0f0)
color: chocolate; / (#503830)
color: tan; / (#9e6c3f)
color: skyblue; / (#89bdde)
color: magenta; / (#d13a84)
color: violet; / (#714c99)
color: beige; / (#bca78d)
color: magenta; / (#e4007f)

「Class」と「id」

「Class」と「id」は、CSSを指定する時に指定する事ができます。これらは「Class」は一つのWEBページに複数の名前を指定する事ができますが、「id」は一つのWEBページに同じ名前で指定できないという違いがあります。
まず「class」の使い方から見ていきましょう。どのように使用するかというと。
CSS内で「.」を使い指定します。

▼「Class」を指定 – その1

  //HTML
<p class="hoge">Classでテキストを表示</p>

  //CSS
p.hoge {
    color: blue;
}

▼「Class」を指定 – その2

要素とクラスを指定した要素を同じWEBページで指定する場合はどうなるのでしょうか？

・要素 → 色、サイズを指定

・要素(class) → サイズを指定

要素 (class) にはサイズしか指定してません。この場合、要素 (class) に指定したものが上書きされ、指定しなかったもので通常の要素に指定したものが反映されます。

  //HTML
<p>テキストを表示</p>

<p class=”hoge”>Classでテキストを表示</p>

  //CSS
p {
color: yellow;
font-size: 20px;
}

p.hoge {
font-size: 40px;
}

▼では、こういった場合はどうでしょうか

要素ではサイズを指定しただけで色を指定していません。要素 (class) では青色を指定しています。

  //HTML
<p>テキストを表示</p>

<p class=”hoge”>Classでテキストを表示</p>

  //CSS
p {
font-size: 20px;
}

p.hoge {
color: blue;
font-size: 40px;
}

通常の要素に、要素 (class) の指定は反映されないようです。

次に「id」の使い方です！こちらはCSS内に「#」を記述します。

▼「id」を指定 – その1

  //HTML
<p id=”test”>IDでテキストを表示</p>

  //CSS
p#test {
color: green;
}

▼「id」を指定 – その2

名前をかぶらないように記述すればOKです。

  //HTML
<p id=”test”>IDでテキストを表示</p>

<p id=”test2″>IDでテキストを表示2</p>

  //CSS
p#test {
color: green;
}

p#test2 {
color: red;
}

プロパティ

その他のプロパティをざっと紹介したいと思います！
▼背景色を指定

body {
background-color: 指定色;
}

▼背景画像を指定

body
background-image: url(“背景画像URL”);
}

▼フォントの種類を指定

p {
font-family: フォントを指定;
}

フォントは複数指定する事が可能です。その場合「,」で区切ります。

フォントを指定するだけでこの通り印象が違います。

WordPress・CSS外部ファイル読み込み

WordPressでCSSの外部ファイルを読み込む場合どのように記述すればいいのか見てみます。WordPressは「style.css」が用意されているのでそちらのファイルを作成します。

通常ファイルを分けてCSSを外部ファイルとして読み込む場合は<head>にこのように記述します。

mediaタイプ (media=””) は指定しなければデフォルトで”all” (全てのメディア) になります。

  //HTMLファイル
<link rel=”stylesheet” type=”text/css” href=”hoge.css”>

  //CSS
セレクタ{
プロパティ : 値;
}

ただしこれではWordPressの仕様上読み込まないようです。ではWordPressではどのように記述すれば読み込むのかというのが気になる所ですがWordPressではこのように書けば読み込みます。

  //PHP/HTMLファイル
<link rel=”stylesheet” href=”<?php echo get_stylesheet_uri() ; ?>” type=”text/css”>

  //CSS
セレクタ{
プロパティ : 値;
}

hrefのCSSファイル名が「?php echo get_stylesheet_uri() ; ?」になるわけです。

「style.css」記述ルール

また、「style.css」には最初にこのような記述をするルールが存在するそうです。

/*
Theme Name: Samurai2020
Theme URL:
Author: Chiharu Saito
Author URL: https://mechalog.com/
Version: 1
*/

この記述がなくてもCSSは読み込み動作しましたが、一応ルールという事なので守っておいた方がいいのでしょう。これ以外にもより細かい記述項目は存在します。

この記事のまとめ

こういった感じで覚えながらゆる～くテーマを自作中です。このCSSファイルは複数に分ける事もできますが、今はまだ必要ないのでそのうちまた紹介しましょう！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

「WordPress」 外部CSSファイルの読み込み方法！＆CSSの基本