• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • おすすめテーマ
  • おすすめプラグイン
  • お問い合わせ
You are here: Home / WordPress / WordPressの使い方 / WordPressでCSSを編集する方法

WordPressでCSSを編集する方法

2018年1月20日 2018年4月21日

この記事を読めば…

WordPressのデザインのカスタマイズに必要となるCSSを編集する方法がわかります。

初めてWordPressを使う人は、管理画面にログインしてびっくりするかもしれません。WordPressは記事の投稿以外にもできることは、とても多いからです。

まず、WordPressをインストールした後に行っておきたいのが、デザインのカスタマイズですよね。見出しをカスタマイズしたり、テーマを好きな色に変えたりと、カスタマイズしたい内容はたくさんあるはずです。

そのデザインを決めるのがCSSと呼ばれるスタイルシートです。この記事を読んでCSSの編集方法がわかれば、WordPressサイトをあなた好みのサイトへ変えることができます。

それではCSSの編集方法を紹介していきます。WordPressでCSSを編集する方法はたくさんあります。でも、どの方法でCSSを編集しても、見た目に違いは出ませんので安心してください。

この記事の目次

  1. テーマのstyle.cssファイルを編集する
  2. カスタマイズ画面でカスタムCSSを追加する
  3. プラグインでCSSを編集する
  4. FTPソフトでCSSを編集する
  5. CSS編集の注意点

テーマのstyle.cssファイルを編集する

WordPress管理画面へログインし、外観メニューから「テーマの編集」をクリックします。

WordPress管理画面のテーマの編集を表示する

そうすると、「テーマの編集」画面が表示されます。そして、選択したファイル内容にはスタイルシート(style.css)が表示されているはずです。もし、スタイルシート(style.css)になっていない場合は、右側のテーマファイル欄からスタイルシート(style.css)を選択してください。

スタイルシート(style.css)を表示する

テーマによっては、スタイルシート(〇〇〇.css)という名称のファイルが複数ありますが、style.cssがWordPressテーマのデザインを決める基本のファイルになります。基本的には、style.cssにカスタマイズしたい内容を追加していきます。

スタイルシート(style.css)を編集する

書き方としては、基本的に1番下の行にカスタマイズしたい内容を追加します。これは、ファイルで下にあるカスタマイズ内容の優先順位が高くなるからです。

カスタマイズ内容を追加したら、下にある「ファイルを更新」ボタンを忘れずにクリックしましょう。ボタンをクリックしないと、変更内容が反映されません。

子テーマのstyle.cssファイルを編集する

テーマをカスタマイズする際は、子テーマを作成しカスタマイズを行っていくのをおすすめします。テーマのアップデートを行うと、スタイルシートに記述した内容が失われてしまうためです。

詳しい子テーマの作成方法は、別記事のWordPressで子テーマを作成する方法を参考にしてください。

子テーマのスタイルシートstyle.cssの編集方法は、先の「テーマのstyle.cssファイルを編集する」述べた内容と同じです。

カスタマイズ画面でカスタムCSSを追加する

カスタマイズ画面でCSSを追加することができます。WordPress管理画面の外観メニューから「カスタマイズ」の項目をクリックします。

WordPress管理画面でカスタマイズ画面を表示する

「カスタマイズ」画面が表示されます。左の列の下の方にある、「追加CSS」をクリックします。

追加CSS編集画面を表示する

そうすると、追加CSSを記載できる欄が表示されます。ここに追加したいカスタマイズ内容を記入してください。

追加したいCSSを記入する

この画面の表示方法ですが、先ほどのテーマ編集画面の上にある「付随のCSSエディター」というリンクをクリックしても行くことができます。

追加CSSカスタマイズへのリンク

プラグインでCSSを編集する

プラグインを導入し、CSSファイルを編集することもできます。導入するプラグインは、Simple Custom CSSです。

CSS編集プラグイン(Simple Custom CSS)

まずはこのプラグインをインストールしてください。インストールが完了したら、このプラグインを有効化しましょう。

有効化すると、外観メニューに「カスタムCSS」という項目が追加されます。CSSを編集するには、これをクリックします。

Simple Custom CSSを有効化すると、メニューに項目が追加される

Simple Custom CSSの編集画面が表示されます。ここに追加したいカスタマイズ内容を記入してください。

このプラグインを使用するメリットは、テーマを変更したり、テーマをアップデートしてもカスタマイズ内容が失われないことです。

Simple Custom CSSの編集画面

カスタマイズ内容を記入した後は、画面にある「カスタムCSSの更新」ボタンをクリックし、編集内容を保存してください。

FTPソフトでCSSを編集する

FTPソフトを使用して、サーバーにあるCSSファイルを編集することができます。FTPソフトの詳しい使い方は、FileZillaの設定と使い方を参考にしてください。

FTPソフトを使い、サーバー上のファイルをそのまま編集できますが、それはおすすめしません。編集したいファイルを1度ダウンロードし、バックアップを作成しておきましょう。

バックアップの作成方法ですが、ファイルをコピーするだけです。コピーしたファイルには、いつのファイルかわかりやすいように日付をつけておきましょう。

スタイルシートのバックアップを作成

そして、ダウンロードしたファイルを編集してカスタマイズを行い、アップロードします。こうすることで、カスタマイズに失敗した場合に、バックアップを使用してすぐに元のデザインに戻すことができます。

FTPソフトでCSSを編集する方法は手間がかかりますが、1番安全な方法です。

FTPソフトでCSSを編集する手順
  1. CSSファイルをダウンロード
  2. コピーし、バックアップを作成
  3. ダウンロードしたCSSファイルをカスタマイズ
  4. カスタマイズしたCSSファイルをアップロード

CSS編集の注意点

テーマのスタイルシート(style.css)にそのままカスタマイズを行うと、テーマのアップデート時にカスタマイズ内容が失われてしまいます。

テーマのカスタマイズを行うときは、子テーマを作成するようにしましょう。もし、子テーマの作成を行いたくない場合は、プラグインを使用しましょう。アップデート時のカスタマイズ内容は失われません。

また、CSSを編集するときは、定期的にFTPでバックアップを取っておきましょう。CSSを編集して、レイアウトが崩れて元に戻せなくなった場合、バックアップファイルをアップロードすれば、その時点の通常のレイアウトに戻すことができます。

きつねくん
きつねくん
もし、見た目じゃなくて機能のカスタマイズをしたい時は、functions.phpファイルの編集が必要やで

カテゴリー:WordPressの使い方 タグ:CSS

ブロガーやアフィリエイターで話題のWordPressテーマ
THE THOR(ザ・トール)
THE THOR(ザ・トール)とは、SEO・デザイン・機能の3拍子揃った一押しのWordPressテーマ
  • 自分好みのWordPressのデザイン
  • なかなか検索順位が上がらないといったSEOの悩み
  • アフィリエイトでもっと効率良く稼ぎたい

こういった悩みをテーマを変更するだけで簡単に解決できます。
WordPressのカスタマイズやトラブルで時間を取られている方は、ぜひ利用してみてください。

THE THOR(ザ・トール)の特徴を詳しくみる

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル

おすすめプラグイン

【2018年版】コメント機能を改善するおすすめWordPressプラグイン

【2018年版】コメント機能を改善するおすすめWordPressプラグイン

Post Snippetsの使い方|初心者でもショートコードやPHPコードが簡単に利用できる

Post Snippetsの使い方|初心者でもショートコードやPHPコードが簡単に利用できる

【2018年版】WordPressのおすすめPDFプラグイン

【2019年版】WordPressのおすすめPDFプラグイン

Redirection(WordPressプラグイン)の使い方と注意点

Redirectionの使い方と注意点|プラグインで簡単リダイレクト!

おすすめテーマ

ブログ・アフィリエイトにおすすめのWordPressテーマ

ブログ・アフィリエイトにおすすめのWordPressテーマ【2019年版】

おすすめ企業サイト向けWordPressテーマ

さっとクオリティの高い企業サイトを作成できるWordPressテーマ特集

ポートフォリオ向けWordPressテーマ

ポートフォリオ向けWordPressテーマ|魅せるギャラリーが簡単にできる

アイキャッチ画像不要のWordPressテーマ

WordPressでアイキャッチ画像を表示したくないならZEROがおすすめ!

Previous Post: « WordPressで画像をアップロードする方法
Next Post: WordPressでアップロードした画像を編集する方法 »

Primary Sidebar

最新WordPressテーマ

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト

カテゴリー

  • WordPress
    • WordPressのSEO対策
    • WordPressのエラー・トラブル
    • WordPressのセキュリティ対策
    • WordPressの使い方
    • WordPressカスタマイズ
  • WordPressテーマ
    • おすすめテーマ
    • テーマカスタマイズ
  • WordPressプラグイン
    • プラグインカスタマイズ
  • WordPress入門講座
  • WordPress設定関連
  • お役立ち情報
    • 便利ツール
  • アフィリエイト
  • レンタルサーバー
    • ColorfulBox
    • mixhost
    • エックスサーバー
    • ロリポップ!
おすすめASP
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2019 FOXWP All rights reserved.