【初心者向け】WordPressでCSSをカスタマイズする2つの簡単な方法

【初心者向け】WordPressでCSSをカスタマイズする2つの簡単な方法

カスタマイズの自由度が高く、オリジナリティあふれるサイトを手軽に作ることができるのが魅力のWordPress。WordPressには豊富なテーマがそろっているとはいえ、人気のあるテーマはやはり他のサイトとかぶってしまいます。

そんなときに、CSSでテーマをカスタマイズすることができれば、自分だけのサイトを構築することができるでしょう。

そこで今回は、初心者向けにWordPressでCSSをカスタマイズする方法をまとめました。

*カスタマイズの前にデータのバックアップをとるようにしましょう。操作ミスでデータが消えたときでも、ちゃんと復活できる状態にしてからデータを編集することをオススメします。

目次
  1. WordPressのCSSカスタマイズには2種類の方法がある
  2. 管理画面からカスタマイズする方法
  3. 外観>テーマの編集
  4. 外観>カスタマイズ
  5. FTPからカスタマイズする方法
  6. まとめ

WordPressのCSSカスタマイズには2種類の方法がある

実は、これからカスタマイズしていくWordPressのCSSには、2通りのカスタマイズ方法があります。それは、管理画面を使用する方法と、FTPソフトを使用する方法です。ここからはその2つをキャプチャを交えながら説明していきます。

この解説ではWordPress公式テーマの「TwentySixteen」を使用していているので、テーマによってはできないことがある場合があります。

それでは今からこのトップデザインを、CSSを使ってカスタマイズしていきましょう。

管理画面からカスタマイズする方法

image

まずは、管理画面からWordPressをカスタマイズしてみます。

外観>テーマの編集

外観からテーマの編集へとアクセスします。

image

そして、右にならんでいるファイル一覧の中から「スタイルシート(style.css)」をクリックしましょう。 image

すると、コードがズラッとならんで出てくるはずです。この画面からサイトのCSSを編集していきます。テーマによっては作成者が解説を残している場合があり、参考になりますね。 image

ためしに、body部分の背景を青色(blue)に変更してみます。

最下部にコードを追加していきましょう。 image

*本当は「子テーマ」と呼ばれる、編集用のテーマを用意したほうがよいです。この記事はあくまでCSSの編集方法を解説することを目的にしているため、子テーマの作成は割愛しています。

編集が終わったら、必ず「ファイルを更新」をクリックしましょう。そうでないと、変更が保存されませんので注意してください。 image そして、サイトに戻ってページをリロード(Ctrl+Rもしくはcommand+r)すると、画像のように背景が変更されています。 image

外観>カスタマイズ

自由度はやや劣りますが、自力でコードを編集しなくても「カスタマイズ」画面でサイトのデザインをある程度変えることができます。

image

外観からカスタマイズへとアクセスします。すると、サイトのデザインを編集するための画面に切り替わります。

image

ここから、フォントの色や背景などのデザインを変更していきます。

なお、カスタマイズ画面はテーマによって充実度に差があります。そのため、「CSSに自信がないけれども、オリジナリティがあるキレイなサイトを作りたい」という場合は、カスタマイズ画面が充実しているテーマを選びましょう。一概には言えませんが、有料テーマのほうがカスタマイズ画面が充実している印象があります。

FTPからカスタマイズする方法

次は、FTPと呼ばれるソフトでサーバーにアクセスして、直接CSSを編集する方法を説明します。

FTPソフトは無料でダウンロード可能なものもたくさんあります。FileZillaやCyberDuckのようなFTPクライアントソフトを利用しましょう。サーバー内にFTPで入ったら、/wp-content/theme/(自分のテーマ名)と進んでいきます。

FTPソフトの使い方についてはこちらが参考になります。

今回の場合であれば、「TwentySixteen」ですね。そして、テーマフォルダの中から「style.css」を選択し、開きます。

image

ここからは設定によって違うのですが、エディタで開いて編集できるようにしておくと便利でしょう。このときも保存をお忘れなく。

まとめ

WordPressをCSSでカスタマイズする方法を解説しました。

一見ややこしそうに見えますが、いったん操作を覚えてしまえばあとは自由自在です。CSSの技術が身につくごとにサイトのデザインが改善されていくことでしょう。

WordPressのカスタマイズを使いこなして、自分のオリジナルサイトを作っていきましょう。

WordPressのカスタマイズにはHTML/CSSの知識が不可欠なのがわかったかと思います。独学でHTML/CSSと平行してデザインを学習するのは非常に時間がかかると思います。

CodeCampでは時間が無い方にもオンラインで受けれる無料体験を実施していますので受けてみてはいかがでしょうか?

黒田剛司
ライター
黒田剛司

関連記事