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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

 

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

wpcss_p_1

 

管理画面から編集する

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

wpcss_p_2

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

wpcss_p_3

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

wpcss_p_4

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

wpcss_p_5

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

wpcss_p_6

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

wpcss_p_7

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

wpcss_p_8

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

wpcss_p_9

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

wpcss_p_10

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

wpcss_p_11

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

wpcss_p_11_1

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

wpcss_p_t_1

wpcss_p_t_2

 

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

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

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

wpcss_p_12

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

wpcss_p_13

wpcss_p_14

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

wpcss_p_15

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

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

wpcss_p_16

 

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

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

おしゃれなWebサイトを作る上で便利なWordPressのテーマもぜひチェックしてみてください。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

はい!!!

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

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