公開日:2016年3月27日 日曜日

WordPressテーマのCSS部分をカスタマイズする手順

WordPressテーマをカスタマイズするとき、どんな手順でカスタマイズすればいいのかをご紹介する基本編です。

この記事ではcssファイルのカスタマイズについてご説明いたします。

WordPressテーマは3種類のファイル+αで出来ている

WordPressのテーマは、だいたいが

  1. php(php + html)
  2. css
  3. Javascript

の3種類のファイルと、画像ファイル(gif / jpg / png)出来ています。
たまに、fontファイルが含まれているテーマもあります。

それぞれ役割が違うため、何をどう変更したいかに合わせ、編集するファイルを変える必要があります。

ざっくり言うと

  1. 機能や構造を変更したいとき→phpファイル
  2. スタイル(デザイン的な要素)を変更したいとき→cssファイル
  3. ちょっとした小技を効かせたいとき→Javascriptファイル

という様な分担です。

開発中のオリジナルテーマを例として仕分けしました。

theme-image

拡張子がphp、css、jsの3種類&pngになってますよね。

CSSで、どの程度デザインを変えられるの?

例えばStinger6のstyle.cssの読み込みをやめると、こんな表示になります。

PHPファイルに書いてあるHTMLやWordPress独自タグを出力した結果=style.cssなしのキャプチャです。
(厳密に言うと他にも読み込まれているcssがありますが、今回はイメージで)

CSSあり CSSなしのイメージ

メニューは縦並びのリストになっていますし、記事のリスト表示も縦に並んでいます。
サイドバーも下に落ちて、レイアウトが崩れてしまいました。
リンクの色もデフォルトのブルーになっていますね。

つまり、CSSでレイアウトや色など「デザイン」に当たる部分を設定しているんです。
CSSで挙動を変えることはできませんが、見た目ならガラッと変えることができます。

1.子テーマを作る

なぜ子テーマをつくるかというと、お使いのテーマがアップデートされるたびに、カスタマイズした部分が元に戻ってしまうことを防ぐため。

子テーマは、基本的には親テーマを利用します。
ですので子テーマの最小系は、style.cssのみです。

親テーマに変えたい部分がある時は、該当部分の入ったファイルを子テーマにコピーしてください。
子テーマの同名のファイルが優先して読み込まれます。

変更したファイルのみ子テーマに入れておくことで、親テーマがアップデートされても変更した箇所が戻ってしまうことを避けられます。

1-1.子テーマ用のstyle.cssを作る

下記の内容を、コピペしてstyle.cssを作成してください。

(なくてもOK)と書いてある箇所は行ごと削除してもOK。

唯一大切なのは、
Template: 親テーマのディレクトリ名
の部分。

FTPを使い
/WordPressをインストールしたディレクトリ/wp-content/themes/
を開いてください。

インストールされたテーマが確認できるので、親テーマとして使いたいテーマのディレクトリ名をコピーしてください。

親テーマにしたいテーマのディレクトリ名をコピーしてください。

stinger6を親テーマにするなら、
Template: stinger6
とします。

2.変更したい要素を確認

お使いのテーマを表示した状態で、変更したい要素を確認します。

選択した要素はどんなセレクタで何というclassやIDが振ってあるか。
どんなスタイルが掛かっているか(プロパティや値)
を確認してください。

詳しい確認方法は下記の記事を御覧ください。

3.子テーマのstyle.cssに上書きしたいスタイルを書き込む

子テーマのstyle.cssを文字コード対応のテキストエディタで開きます。
スタイルシートには、後から読み込んだCSSが優先される特性があり、親テーマのCSSより子テーマのCSSが優先されます。

変更したい要素のセレクタやclass名・ID名を書いて、プロパティを上書きします。

参考:【逆引き】WordPressテーマカスタマイズでよく使うCSSプロパティ(4月中に記事にします)

4.保存して確認

style.cssを保存してもデザインに反映されない場合は、何度かリロードするか、キャッシュを削除してください。

まとめ

子テーマを作る
変更したい要素を確認
子テーマのstyle.cssを編集
保存して確認

のフローでデザインをカスタマイズしていくことで、思い通りのデザインに変更することができます。
まずは試してみてくださいね。

保存

お客様が自然とあつまるWordPressを育てるお供に


女性にオススメのWordPressテーマ「blanc note.」を無料配布しています。まずはブログから自分メディアづくりを始めてみたい方におすすめです。
メルマガ登録完了後、テーマをダウンロードしていただけます。
ぜひお試しください。
メルマガに登録する