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

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ではじめるWEBの仕組みづくり7日間メール講座

オトナ女子にピッタリ!ブログ運営に集中できるWordPressテーマプレゼント
  • 「@luelue.com」というドメインからメールが届きます。あらかじめフォルダ分け設定を行って頂きますようお願い致します。
      Yahoo、hotmailなどのフリーメールアドレスでは受信できない場合がありますので、プロバイダーメールアドレスを推奨いたします。
  • メールアドレスは個人情報の観点より、プライバシーを遵守しております。
  • 本メール講座及びメールマガジンは利益の保証や損失の補填を行うものではなく、効果には個人差があります。
  • いつでも解除可能です。

Pickup Article同じカテゴリーの記事

ブログ一覧へ戻る