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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

今回は、WordPressのCSSを自分で編集するカスタマイズの方法を解説します。

既存で用意されたテーマやプラグインでもCSSを少し修正するだけで、サイトの印象を変えたりオリジナリティの高いWordPressデザインにできますので覚えておくと便利です。

解説では実際に編集する画像などを使っていますので、自分のやりやすいカスタマイズ方法を見つけてください。

「WordPressのデザインを自分好みにしたい!」と悩んでいるのであれば、本記事を最後まで読むとカスタマイズの方法が分かるようになるので、ぜひ参考にしてみてください!

目次

 

大石ゆかり

田島メンター!!WordPressのテーマを自分なりに修正したいんですが、どうしたらいいですか!?

田島悠介

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

大石ゆかり

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

 

WordPressの初期CSSの状態

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

 

WordPress管理画面からCSSを編集する

CSSの編集でもっともシンプルな方法が、WordPress管理画面から直接編集する方法です。
以下では、WordPress管理画面から背景色の変更とフォントの変更を実際に行ってみます。

背景色の変更

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

 

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

wpcss_p_3

 

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

 

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

wpcss_p_5

 

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

wpcss_p_6

 

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

wpcss_p_7

 

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

投稿ページの背景色修正

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

wpcss_p_t_1

フォントの変更

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

wpcss_p_9

 

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

wpcss_p_10

 

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

 

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

変更前(明朝体)

変更後(ゴシック体)

 

[PR] WordPressで挫折しない学習方法を動画で公開中

FTPクライアントからWordPressのCSSを編集する

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」のファイルを保管しておき、上書きでアップロードすることで最初の状態に戻せます。

 

テキストエディタでWordPressにCSSを追加する

テキストエディタを利用した修正は、複雑な修正を行う際のミスを減らせるメリットがあります。
FTPのエディタと違い、テキストエディタではコードの補完機能とコードの色表示機能があるからです。

以下では、実際に「VSCode」というテキストエディタを利用して、コードの補完機能と色表示機能を解説します。

VSCode以外にもテキストエディタはたくさんあるので、以下の記事で自分の使いやすいものを探してみると良いでしょう。

プログラミングに使える!フリーのテキストエディタ15選 | TechAcademyマガジン

コードの補完機能

「backgr」と入力すると、「background-color」や「background」などの入力コードが補完されます。
どのコードを選択するかで、意図する表示結果になったりエラーになったりは変わりますが、タイプミスを減らすことが可能です。

また水色の四角部分にマウスカーソルを当てると、以下の画像のように右上にカラーパレットが表示されます。

カラーパレットとは色見本を表示する機能です。
変更したい色を感覚的にクリックするだけで色の変更ができます。

コードの色表示機能

bodyとbackgroundと#00ced1というコードの指定値が、すべて別の色で分けられることでタイプミスを減らせます。

以下の画像のように、body要素のbackgroundという背景色に指定した色が水色で表示されることで、現状どの色を利用しているかも判別可能です。

 

「追加CSS」でWordPressを編集する

追加CSSから修正する方法は初心者でも簡単に編集できる方法の一つです。

ただし、追加するCSSのコードだけ確認することになるので、既存で用意されているCSSへ上書きしてしまう可能性があることに注意しましょう。

 

まず、「カスタマイズ」を選択します。

 

次に、「追加CSS」を選択します。

 

追加CSSを追記するフォームが表示されますので、このフォームにCSSを追記することで、追加CSSの実装が可能です。

 

今回は背景色を赤色にしてみます。

body {background:red}と入力して、公開ボタンを押してみてください。

 

リアルタイムで背景色が赤色になることを確認できます。

 

まとめ:CSSをマスターしてWordPressを魅力的にデザインできるようになろう!

以上でCSSを編集する方法は終わりです。
編集方法はいくつかありますが、自分のやりやすい方法で試してみてください。
どれかひとつでもやり方を覚えておけば問題ありません!

また、具体的なWordPressの使い方を知りたいのであれば「WordPressの使い方!初心者でもサイト作成が簡単に|現役エンジニアが解説」の記事も参考にしてみてください!

おしゃれなWebサイトを作りたいのであれば、いくつかのWordPressのテーマもチェックしてみるとよいでしょう。

執筆してくれたメンター

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長開発実績:PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。ボランティア活動:小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。

 

WordPressを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

WordPressでのサイト制作を学習していて、このように思ったことはありませんか?

テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。

まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

はい!!!