WordPressに慣れてくると、サイトのデザインをCSSでカスタマイズしたくなりますよね。この時最も気をつけておきたいのが、CSSの編集方法です。
特に、テーマのスタイルシートを直接編集するのは避けた方がよいでしょう。
当記事では、WordPressでCSSを編集する方法を4つご紹介しますので、その中から最適なものをお選びいただき、今後のカスタマイズにお役立てください。
テーマファイルを直接編集すべきでない理由
テーマの更新（アップデート）で編集した箇所が全て消えてしまうのが大きな理由です。
多くの方は管理画面にテーマファイルをアップロードして更新を行います。この時、元ファイルが新しいファイルに置き換わるので、中身は全て上書きされてしまいます。
例えば、テーマフォルダ内のstyle.cssに「background:red;」と追加していた場合、アップデート後にこの記述は消えてしまいます。
そのため、アップデートの度にカスタマイズ箇所の把握と追記を行う必要があるんですね。これが非常に面倒なんです。（自作テーマで自ら更新作業を行うなら問題ありません。）
WordPressでCSSを編集する方法４つ
理想的なカスタマイズ方法は、テーマファイルを直接編集せず、間接的にCSSを追加することです。主な編集方法を下記にまとめましたので、参考にしてください。意外と簡単に実現できます。
追加CSS機能を使用する
WordPressには、外観 > カスタマイズに「追加CSS」と呼ばれる機能が実装されています。追加CSSに入力した内容はサイト全体の<head>内に出力されます。（プレビューで確認しながら編集可能）
WordPressにデフォルトで備わっているので、最も手軽にCSSを編集できます。しかし、テーマを変更すると追記した内容は引き継がれないので注意が必要です。
子テーマを導入する
子テーマのスタイルシート（style.css）に記述して、CSSを反映させる方法です。子テーマ内のファイルは親テーマの後に読み込まれます。ただし、子テーマを作成する手間が発生するので、CSSのカスタマイズが目的であれば上記の追加CSSで十分です。
子テーマの作成方法は下記をご覧ください。
メディアを運用するには、アクセス数の増加や成約率の向上は、目標の一つ。それらの為に、サイトのデザインをカスタマイズするというところについては、皆さんが取り組まれていることかと思います。 カスタマイズ事例を調べたり、phpやcssの参考となるコードを調べる際、検索結果でよく「子テーマ」という単語...
プラグインを利用する
プラグインの機能を使って、CSSを編集することも可能です。下記で紹介しているプラグインは、記述した内容を特定の場所（<head>内等）に出力できます。詳細な使い方は下記の記事をご覧ください。
アクセス解析や広告のコンバージョンタグをWordPressサイトに導入する場合、ヘッダーやフッターにコードを直書きすることも多いと思います。でも、WordPressテーマをそのままアップデートすると、コードが書き換えられてしまうためにこれらのタグも上書きされてしまう問題があります。その場合、再度タグ...
テーマの機能を使用する
お使いのテーマにCSSを追加する機能があれば、そちらを利用するのがベストです。TCDテーマには、管理画面に入力したCSSをサイト上に反映できる「カスタムCSS」機能が存在します。
また、各投稿タイプの編集画面にもCSSの入力欄が用意されているため、ページごとに出力するスタイルを分けることが可能です。TCDテーマをお使いの方は、ぜひ下記を参考にカスタムCSSをお使いください。
TCDテーマには、テーマファイルを編集することなく、任意のスタイルを追加できる「カスタムCSS機能」が実装されています。 当記事では、カスタムCSSの使い方について紹介していきます。 また、テーマファイルの直接編集を避けるべき理由を下記で解説しておりますので、こちらも合わせてご覧ください...
CSSが反映されない時は？
CSSを追加してもスタイルが反映されない場合は、記述ミスがないか、セレクタやプロパティの値が合っているかご確認ください。
それでも反映されない場合は、ブラウザの開発者ツールを使って原因を特定しましょう。Chromeの開発者ツールの使い方は、下記で解説してますので、これを機に使ってみるといいかもしれません。
ウェブサイトの構造（HTML）や適用されているスタイル（CSS）を確認するには、デベロッパーツールが便利です。構造がわかれば、一部を編集して簡単にテスト・検証することも可能です。 そこで当記事では、Google Chromeのデベロッパーツールの基本的な使い方を解説いたします。 基本的な...
コメント