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

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

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

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

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

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

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

外観>テーマの編集

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

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

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

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

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

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

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

外観>カスタマイズ

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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