WordPressのデザインを編集する3つの方法

WordPressのデザインを編集する3つの方法

記事内目次

  1. WordPressのテーマファイルを書き換えずに、デザインを変更する
  2. 方法1: テーマファイルそのものを編集する
  3. 方法2: 子テーマを作成して編集する
  4. 方法3: 追加CSSで変更する
    1. 何故追加CSSの記述が優先されるのか
    2. 何故追加CSSの記述が優先されるのか(CSSの仕様に詳しい人向けの解説)

WordPressのテーマファイルを書き換えずに、デザインを変更する

このサイトは、2019年1月時点ではLION BLOGテーマを用いて運用しています。

このテーマを含め、ほとんどのWordPressテーマはそのまま使用しても問題ないレベルでデザインされていますが、やはりどうしても細かい点で自分好みに変更したい、というケースが出てくるものです。

その「自分好みに変更したい」という場合の方法としては大きく分けて3つの方法があり、

のいずれかとなります。

今回の記事は私を含めたWordPress初心者のために追加CSSでの変更を解説しますが、残り2つも比較のため簡単に解説します。

↑ 記事内目次にもどる

方法1: テーマファイルそのものを編集する

WordPressの管理画面から「外観」→「テーマの編集」と辿り、スタイルシート (style.css)を編集することで、テーマファイルのCSSを直接編集できます。

例えばLION BLOGの場合は、更に「CSS ▼」をクリックすることで、content.cssなど他のCSSも編集できます(このように、テーマによって編集すべきファイルは異なります)。

しかし、この方法は多くのサイトでも言われていますが、style.css以外にも多くのCSSがあり、どのCSSに修正箇所があるのか調べる必要があり推奨されないテーマ自体のアップデートがあったり、編集した部分のコードの記述にミスがあると、自分で編集した内容は消えてしまうなどのデメリットがあります。

↑ 記事内目次にもどる

方法2: 子テーマを作成して編集する

テーマファイルそのものを編集する方法はデメリットがあるなら、そのデメリットを省いた方法はないのか?

あります。

子テーマを作成して、そちらの方で編集をすることで、テーマ自体のアップデートに影響されず、またコードの記述にミスがあってもリカバリーしやすいというメリットを得ることができます。

子テーマの作成方法は、子テーマを作ってWordPressの既存テーマをカスタマイズする方法 | Webクリエイターボックスが参考になります。

子テーマを作ってWordPressの既存テーマをカスタマイズする方法

ただし、テーマファイルそのものを編集する場合も、子テーマを作成して編集する場合も、HTML/CSSの知識だけでなくWordPressの知識を必要とする(例えば、functions.phpを適切に編集する必要がある)ため、WordPress初心者には少々難しいかもしれません。

↑ 記事内目次にもどる

方法3: 追加CSSで変更する

そこで、冒頭の見出しにも書いたテーマファイルを書き換えずに、デザインを変更する方法が追加CSSの編集です。

追加CSSの解説はWordPressの「追加CSS」メニューの使い方 | 西沢直木のIT講座が参考になります。

この方法だと、出力されるスタイルは各ページのhead要素内のstyle要素となるため、テーマファイルや子テーマの.cssファイルに比べて原則として追加CSSの記述が優先されやすく、WordPressの知識があまりなくても、CSSの知識があればデザインの変更は比較的簡単にできます。

次回以降の記事では、LION BLOGテーマを、このサイトでは追加CSSでどのようにデザイン変更しているのかを解説しようと思います。

何故追加CSSの記述が優先されるのか

前段でさらっと「原則として追加CSSの記述が優先されやすい」と書きましたが、その点についてもう少し解説します。

CSS HappyLife ZEROというCSS初心者・中級者向けの解説サイトに、優先順位・個別性・!important宣言|CSSの基本という記事があります。

CSSの適用方法は多種多様です。様々な指定を行うため、これらが競合した場合に備え、優先度が決められています。スタイルのもっとも基本的な優先順位は、「後から読み込んだスタイルを優先的に適用」します。

CSSのことにあまり詳しくないという方は、この後から読み込んだスタイルを優先的に適用するところだけでも頭に入れてください。

WordPressの追加CSSは、テーマファイルや子テーマの.cssよりも後から読み込まれるため、「原則として追加CSSの記述が優先されやすい」のです(一部例外となるケースもありますが、今回は省略します)。

↑ 記事内目次にもどる

何故追加CSSの記述が優先されるのか(CSSの仕様に詳しい人向けの解説)

ここからはW3CのCSSの仕様を元に解説します。後から読み込んだスタイルを優先的に適用するの根拠をきちんと知りたい、という方のみお読みください。

先ほど引用した優先順位・個別性・!important宣言|CSSの基本では、次のような解説もあります。

セレクタには子孫セレクタやクラスセレクタ、IDセレクタなどスタイルを適用させる方法は色々ありますが、個別性が高いセレクタ程、優先度が高くなります。この個別性の計算は以下のようになっています。

  • style属性がある場合は、1000になります。 (= a)
  • セレクタに含まれている IDセレクタを100としてその数を足します。 (= b)
  • セレクタに含まれている id以外の属性と、擬似クラスを10としてその数を足します。 (= c)
  • セレクタに含まれている 要素、擬似要素を1としてその数を足します。 (= d)
 *             {}  /* a=0 b=0 c=0 d=0 -> 個別性 =       0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> 個別性 =       1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> 個別性 =       2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> 個別性 =       2 */
 ul ol + li    {}  /* a=0 b=0 c=0 d=3 -> 個別性 =       3 */
 .warning      {}  /* a=0 b=0 c=1 d=0 -> 個別性 =      10 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> 個別性 =      11 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> 個別性 =      13 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> 個別性 =      21 */
 #myid         {}  /* a=0 b=1 c=0 d=0 -> 個別性 =     100 */
 #page #main   {}  /* a=0 b=1 c=0 d=0 -> 個別性 =     200 */
 #page #main p {}  /* a=0 b=2 c=0 d=1 -> 個別性 =     201 */
 style="foo"       /* a=1 b=0 c=0 d=0 -> 個別性 =    1000 */

このspecificity(個別性。詳細度と訳す場合もあります)が強いほど、基本的な優先順位である「後から読み込む」に関わらず、優先順位が高くなります。

W3CのSelectors Level 4の仕様の16. Calculating a selector’s specificityでは、各種のセレクタにおけるspecificityが規定されています。

また、Note: The specificity of the styles specified in an HTML style attribute is described in CSS Style Attributes.とされ、HTML内に直接記述するstyle属性、style要素についてはCSS 2.1の仕様を参照するよう示されています。

そのCSS 2.1の6.4.3 Calculating a selector’s specificityでは、In the above example, the color of the P element would be green. The declaration in the “style” attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.とされ、同じspecificityが1,0,0,0(1000)であるstyle要素とstyle属性の指定があった場合は、if two declarations have the same weight, origin and specificity, the latter specified wins.のように、後から記述されるものが優先されるとあります。

style要素はhead要素内に記述されるものですが、style属性は(head要素よりも後に配置される)body要素内の各要素に対して記述されるものなので、style要素よりもstyle属性が優先されます。

そのため、該当するケースは少ないと思いますが、追加CSSでデザインを変更していたとしても、ページ内のHTMLに直接style属性を記述した場合は、そちらが優先されることになるでしょう。

↑ 記事内目次にもどる

このように、追加CSSでのデザイン変更は便利であり、特にWordPress初心者には心強い方法です。

しかし、追加CSSの記述はページごとにhead要素内のstyle要素として出力されるため、追加CSSの記述を多くしてしまうと、ページのファイルサイズが大きくなるだけでなく、UAもページごとにその都度スタイルを読み込んでしまいます。

テーマファイルや子テーマのように外部スタイルシートの.cssファイルを読み込む場合は、キャッシュが機能することでページごとのスタイル読み込みは抑えられるため、いずれは子テーマ作成を検討した方が良いでしょう。

私自身も、実践 Web Standards DesignのChapter 2の「内部スタイルシートと外部スタイルシート」というコラムで、style要素やstyle属性での指定は、構造と見た目の分離に逆行すると解説していますので、WordPressの運用に慣れてきたら子テーマへのスタイル記述を行おうと思っています。

LION BLOGの場合は子テーマファイルがあらかじめ作成者によって用意されているため、そんなに難しい作業もなく子テーマの導入ができました。WordPress導入・運用開始の個人的記録 – 子テーマ導入と追加CSS設定もあわせてご覧ください。

↑ 記事内目次にもどる