自分でカスタマイズしよう！WordPressでCSSを編集する方法【初心者向け】

WordPressの各テーマで使用されているcssファイルを編集する方法を、管理画面から行う方法とFTPクライアントを使用してファイルを更新する方法の二つを紹介します。自分でカスタマイズできるようになると好きなデザインに整えられるので覚えておくとよいでしょう。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

田島メンター！！WordPressで良いテーマがあったんですけど、ちょっとそのままじゃなくて自分なりに修正したいんです。どうしたらいいですか！？

それなら、テーマのCSSを修正するとできるよ。ちょっとやってみようか？

はい、お願いします！！！

今回はwordpress.orgで配布されている公式テーマTwenty Fifteenを使用します。
カスタマイズ等を行っていない状態だと、PCではこのように表示されています。

管理画面から編集する

WordPress管理画面の左メニュー「外観」から「テーマの編集」を選択します。

右のファイル一覧から「スタイルシート(style.css)」を選択します。

この画面からcssの編集を行います。
テーマによっては作成者による解説も表記されているため、編集の際に参考にすることができます。

Ctrl＋Fを押すと表示しているページ内で検索ができます。
変更したい箇所に関する単語などを入れると便利です。

最初に背景の色を変更してみます。
青枠の部分がサイトの背景色のコードになります。

色コードの値を変えて、「ファイルを更新」をクリックします。

サイトに戻り、右クリックから「再読み込み」を選択しページを更新させます。
背景の色が変更されました。

次に、フォントを変更してみます。
このテーマは初期の設定では「Noto Serif」を使い、それが閲覧者のPCにインストールされていない場合は「serif(明朝体)」になるように表記されています。

フォントの部分を「sans-serif(ゴシック体)」に変更しました。
※Noto Serifのように、フォント名の中に半角スペースがある場合は””で囲みます。

「ファイルを更新」をクリックしたあとページを更新すると変更が反映されています。

変更前と変更後の比較です。

cssの編集によってデザインを変更できる箇所は、各テーマによって異なります。
例えば記事の背景色だけを変更する場合は、「posts」で検索し以下の青枠部分の色コードを編集します。(Twenty Fifteenの場合)

FTPクライアントから編集する

FTPクライアントを使用して、編集したcssファイルをアップロードする方法です。

wp-content/themes/から、編集したいテーマのフォルダを選択します。
フォルダ内の「style.css」を右クリックし、「表示/編集」を選択します。(FileZillaの場合)

style.cssがエディタで開かれるので「テーマの編集」を使用した時と同じように背景の色コードを変更してみます。

編集が完了したら上書き保存をします。
以下の様な画面が出るので「はい」をクリックします。

ページを更新すると変更が反映されます。

cssの編集によって変更したものを元に戻したい場合は管理画面からテーマを一旦削除してインストールしなおすか、あらかじめ「style.css」のファイルを保管しておき上書きでアップロードすることで最初の状態にすることができます。

以上でCSSを編集する方法は終わりです。編集方法はいくつかありますが、自分のやりやすい方法で試してみてください。

ぜひ、WordPressの使い方を覚えましょう！

ちょっとCSSに慣れる必要がありますけど、色変えたりするのは簡単にできますね♪

そうだね。CSSを勉強すればもっと大幅に変更できるようになると思うから、ドンドン経験していこうね。

はい！！！

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。