【WordPress】テーマ「Simplicity」の外観カスタマイズについて整理する

シンプルで高機能なテーマ「Simplicity」に変更していますが、古いデフォルトテーマしか触ったことがないので突っ込んだ外観カスタマイズをしようとするとわからないことだらけです。

今回はスキン機能とテーマカスタマイザー、そして子テーマの関係について整理してみましょう。

スポンサーリンク

スキン機能

スキンとはテーマカスタマイザー内の「スキンの設定」で外観を手軽に変更できる機能。

20150318_simplicity_01

外観の設定がパッケージされたもので変更できるのは外観のみ。

スタイル適用の優先順位

スタイルが適用される順番は以下のとおりです。

1)親テーマのstyle.css
2)子テーマのstyle.css
3)スキンのstyle.css

4)親テーマのmobile.css
5)子テーマのmobile.css
6)スキンのmobile.css

7)テーマカスタマイザーで設定したスタイル

つまり重複した場合は下のスタイルの方が優先されるということです。
なおmobile.cssとはモバイル表示時のスタイルシートです。

完全レスポンシブにした場合のスタイル優先順位

テーマカスタマイザーで「完全レスポンシブ」に設定した時はmobile.cssではなくresponsive.cssが読み込まれます。

20150318_simplicity_02

1)親テーマのstyle.css
2)子テーマのstyle.css
3)スキンのstyle.css

4)親テーマのresponsive.css
5)子テーマのresponsive.css

6)テーマカスタマイザーで設定したスタイル

完全レスポンシブを選択しているかを判断するheader-css-mobile-responsive.phpを見る限り、レスポンシブ用のスキンは存在しないようです。

20150318_simplicity_03

今まで使っていた「TwentyTwelve」だと外観は子テーマのstyle.cssだけで設定していましたが、SimplicityではスタイルシートがPC/モバイル/レスポンシブと分けられているんですね。
そしてスキンとテーマカスタマイザーという選択肢もあり、まず外観を変更する手段から決めないといけないということです。

ちょっと変更して終了するサイトならスキンとテーマカスタマイザー、大幅に変更するサイトならスタイルシートという使い分けをすれば良さそうです。

ポイント

  • スキンを設定してもテーマカスタマイザーが優先される。このためスキン適用後にテーマカスタマイザーで外観の微調整ができる。
  • もしテーマカスタマイザーやスキンで外観の設定をしている場合、これをデフォルトに戻さない限り同じ箇所をstyle.css/mobile.css/responsive.cssで変更をしようとしても反映されない。
  • 完全レスポンシブを選択し、レスポンシブ時のみ変更したいなら子テーマのresponsive.cssに書き加える。
  • 完全レスポンシブのon/off関係なしに反映させたいときは子テーマのstyle.cssに書き加える。

Simplicityは機能別に細かいファイルに分割されており「ちょっと難儀だな」と思ってしまいましたが、それぞれに日本語で丁寧に説明が記載されていることもあり、テーマの全体像さえ把握できればとても扱いやすいものになりそうです。

スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA