WordPressのCSSを編集する方法｜自分でカスタマイズしよう！【初心者向け】
WordPressの各テーマで使用されているcssファイルを編集する方法を、管理画面から行う方法とFTPクライアントを使用してファイルを更新する方法の二つを紹介します。自分でカスタマイズできるようになりましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回は、WordPressのCSSを自分で編集するカスタマイズの方法を解説します。
既存で用意されたテーマやプラグインでもCSSを少し修正するだけで、サイトの印象を変えたりオリジナリティの高いWordPressデザインにできますので覚えておくと便利です。
解説では実際に編集する画像などを使っていますので、自分のやりやすいカスタマイズ方法を見つけてください。
「WordPressのデザインを自分好みにしたい！」と悩んでいるのであれば、本記事を最後まで読むとカスタマイズの方法が分かるようになるので、ぜひ参考にしてみてください！
目次
- WordPressの初期CSSの状態
- WordPress管理画面からCSSを編集する
- FTPクライアントからWordPressのCSSを編集する
- テキストエディタでWordPressにCSSを追加する
- 「追加CSS」でWordPressを編集する
- まとめ：CSSをマスターしてWordPressを魅力的にデザインできるようになろう！
- 執筆してくれたメンター
- WordPressを学習中の方へ
田島メンター！！WordPressのテーマを自分なりに修正したいんですが、どうしたらいいですか！？
テーマのCSSを修正するとできるよ。ちょっとやってみようか？
はい、お願いします！！！
WordPressの初期CSSの状態
今回はwordpress.orgで配布されている公式テーマTwenty Fifteenを使用します。
カスタマイズなどを行っていない状態だと、PCではこのように表示されています。
WordPress管理画面からCSSを編集する
CSSの編集でもっともシンプルな方法が、WordPress管理画面から直接編集する方法です。
以下では、WordPress管理画面から背景色の変更とフォントの変更を実際に行ってみます。
背景色の変更
WordPress管理画面の左メニュー「外観」から「テーマエディタ」を選択します。
右のファイル一覧から「スタイルシート(style.css)」を選択します。
この画面からCSSの編集を行います。
テーマによっては作成者による解説も表記されているため、編集の際に参考にできます。
Ctrl＋Fを押すと、表示しているページ内で検索ができます。
変更したい箇所に関する単語などを入れると便利です。
最初に背景の色を変更してみます。
青枠の部分がサイトの背景色のコードになります。
色コードの値を変えて、「ファイルを更新」をクリックします。
サイトに戻り、右クリックから「再読み込み」を選択しページを更新させます。
背景の色が変更されました。
投稿ページの背景色修正
CSSの編集によってデザインを変更できる箇所は、各テーマによって異なります。
例えば記事の背景色だけを変更する場合は、「posts」で検索し、以下の青枠部分の色コードを編集します。
(Twenty Fifteenの場合)
フォントの変更
次に、フォントを変更してみます。
このテーマは初期の設定では「Noto Serif」を使い、それが閲覧者のPCにインストールされていない場合は「serif(明朝体)」になるように表記されています。
フォントの部分を「sans-serif(ゴシック体)」に変更しました。
※Noto Serifのように、フォント名の中に半角スペースがある場合は””で囲みます。
「ファイルを更新」をクリックしたあと、ページを更新すると変更が反映されています。
変更前と変更後の比較です。
変更前（明朝体）
変更後（ゴシック体）
[PR] WordPressで挫折しない学習方法を動画で公開中
FTPクライアントからWordPressのCSSを編集する
FTPクライアントを使用して、編集したCSSファイルをアップロードする方法です。
wp-content/themes/から、編集したいテーマのフォルダを選択します。
フォルダ内の「style.css」を右クリックし、「表示/編集」を選択します。
(FileZillaの場合)
style.cssがエディタで開かれるので、「テーマの編集」を使用した時と同じように背景の色コードを変更してみます。
編集が完了したら上書き保存をします。
以下のような画面が出るので「はい」をクリックします。
ページを更新すると変更が反映されます。
CSSの編集によって変更したものを元に戻したい場合は、管理画面からテーマをいったん削除してインストールし直すか、あらかじめ「style.css」のファイルを保管しておき、上書きでアップロードすることで最初の状態に戻せます。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
テキストエディタで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を勉強すればもっと大幅に変更できるようになると思うから、ドンドン経験していこうね。
はい！！！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
