WordPressのCSSをカスタマイズする方法をやさしく解説

WordPressのCSSをカスタマイズする方法をやさしく解説

ブログやサイトでオリジナリティを出すために、デザインを変更したいと思うことがあります。

WordPressのテーマは、カスタマイズ画面で簡単に文字色や見出しなどのデザイン変更できるようになっていることが多いですが、そうでない場合でもCSSファイルを編集してサイトのデザインを変更することが可能です。

ではどのようにしてCSSを編集するのか、この記事ではWordPressテーマのCSSをカスタマイズする方法について説明します。

 

CSSをカスタマイズする方法

まず、テーマのCSSはWordPressの管理画面からカスタマイズが可能です。

この場合、大きく分けて以下2つのやり方があります。

CSSのカスタマイズ方法

  1. 管理画面「外観」⇒「テーマの編集」からCSSファイル(style.css)を編集する
  2. 管理画面「外観」⇒「カスタマイズ」⇒「追加CSS」に追加する

どちらかと言えば2のほうが簡単で初心者にも作業がしやすい方法になります。

ただ、2はHTMLファイルに直接スタイルを指定することになり、Googleに推奨されていない方法になるため、1のやり方でカスタマイズするほうがおすすめです。

ここでは両方の手順について説明します。

 

「テーマの編集」でCSSファイルを編集する方法

それでは、はじめに「テーマの編集」からCSSファイルを編集する方法を説明します。

まず、WordPress管理画面左側にあるメニューの「外観」⇒「テーマエディター」をクリックします。

画面右側にある「テーマファイル」の中から「Stylesheet」をクリックしてください。

画面中央の「選択したファイルの内容」というところに、CSSファイルの内容が表示されます。

次に、CSSファイルに直接スタイルを記述します。

子テーマを編集する場合

もし子テーマを使用している場合は、カスタマイズが可能な領域(画面の一番下など)にコードを追記して「ファイルを更新」をクリックすればOKです。親テーマに上書きされて子テーマのスタイルが適用されます。

親テーマを編集する場合

親テーマを直接編集してカスタマイズする場合には、ブラウザのディベロッパーツールで変更したい「class」や「id」「要素名」の記述を探し、CSSファイルでその部分を編集します。

※親テーマを編集する場合は、作業をする前にバックアップを取っておくことをおすすめします。(あらあじめWebFTPでファイルをダウンロードしておけばOKです)

ファイルを編集したら、最後に画面一番下の「ファイルを更新」をクリックしてください。

 

カスタマイズ例

上記の説明だけでは分かりにくいかと思いますので、次に具体的な例として「twenty seventeen」というテーマをカスタマイズする方法について説明します。

たとえば、サイドバーに表示されている「最近の投稿」というタイトルの文字色を変更したいとします。

そのためには、まずこの部分に使われている「class名」を調べる必要があります。

調べる方法は以下のとおりです。

class名を調べる方法

  1. ブラウザ上で「最近の投稿」をドラッグして選択する
  2. 右クリックして「要素を調査」(Firefoxの場合)をクリック(Google Chromeを使用する場合は「検証」をクリックします)

「要素の調査」をクリックすると、以下のような画面になり、class名が確認できます。

この画面から、「最近の投稿」は「h2」タグで「widget-title」というclass名が使われていることが分かります。

class名が確認できたら、「テーマエディター」に戻り、class名を検索します。

すると、以下のような記述が見つかります。

文字色を変えたい場合は、「color」と書かれた部分のカラーコードを編集することで文字色の変更が可能です。

もしくは、子テーマを使用している場合は、以下のようにCSSファイルに追記して文字色を変更します。

/* サイドバータイトル文字色 */
h2.widget-title {
color: #0101DF;
}

ファイルを編集した後は、画面下にある「ファイルを更新」をクリックします。

その後、ブラウザでサイトを表示して、問題なく変更部分を確認できたら作業が完了です。

こちらの記事も併せてどうぞ

CSSのコメントの書き方を解説

 

「追加CSS」を編集する方法

次に、「追加CSS」でスタイルを追加する方法について見ていきます。

まず、WordPress管理画面「外観」⇒「カスタマイズ」をクリックします。

「カスタマイズ」画面が表示されたら、「追加CSS」をクリックします。

以下の画面が表示されるので、スクロールして画面の下に表示される領域にスタイルを追記して、最後に画面上にある「公開」ボタンを押下すればOKです。

※スタイルを記述する時の考え方は、親テーマや子テーマを編集する場合と同じです。

「追加CSS」を使うと、コードを入力すると右側の画面から変更した部分を確認することができます。

「テーマエディター」ではファイルを編集した後に、ブラウザ上でサイトの表示を確認するという流れになりますが、「追加CSS」では編集しながら画面の表示を確認することができるので作業がしやすいです。

「テーマエディター」では作業がしづらいという場合には、「追加CSS」を使ってみると良いかと思います。

 

まとめ

以上、WordPressのCSSをカスタマイズする方法を説明しました。

WordPressのCSSは、大きく分けて2つの方法で管理画面から編集することが可能です。

どちらの手順を使ってもカスタマイズが可能ですが、それぞれメリット・デメリットがあるので、それを踏まえた上でどちらの方法で作業をするか選ぶことをおすすめします。

ブログのつくり方カテゴリの最新記事