ワードプレスでCSSを追記する場所はどこにあるのか

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

よく「ワードプレスをCSSでカスタマイズする」という記事を見かけますよね。とはいえCSSの追記となるとFTP接続する必要があるのか、管理画面からテーマ編集するのかなど方法に困ることがあるはずです。

実はワードプレスには標準で「CSSを追記する機能」が搭載されています。本日はワードプレスにCSSを追加する際のポイントや注意点についてご紹介いたします。以下で詳しく解説させていただきます。

ワードプレスでcssを追記する場所はどこにあるのか

結論から言うと「外観 > カスタマイズ > 追加CSS」に追記可能です。

最下部に「CSSを追記するための入力欄」の「追加CSS」が用意されています。

画面を開くとCSSを追記できるエディターが開きます。

サイト名を赤色に変更する

参考としてサイト名を「赤色」に変更してみましょう。元々は黒文字です。

Twenty Twenty Oneでは「サイト名」がh1でclassが振られています。

h1.site-title {
	color:red;
}

色は「色番号(#FF0000等)」でもOK。

お好みのCSSを追記する

以下が実際に追記した例です。

最後は保存(公開)を忘れずに

右側のテストサイトの文字が赤色になっていますね。公開すればウェブサイト側にも反映されます。

以上です。

利用時の注意点

CSSの設定はテーマと紐づいています。

つまり、Twenty Twenty Oneを別のテーマへ切り替えると新しいテーマ側で再度追記が必要です。カンタンに言えばワードプレスの管理画面にある「外観 > カスタマイズ」はテーマと連動して管理されています。

各テーマごとで保存される値が違うので、テーマごとで個別のCSS欄として認識されます。たとえばAという名前のテーマを使っている状態でCSS欄を使っていたとしても、Bテーマに切り替えた段階でB用のCSS欄が読み込まれます。再度Aテーマに戻すとCSSはそのまま残っている仕組みですね。

テーマを切り替えても共通で使いたいCSS(またはJavaScript)なのであれば、変更後の新テーマ側のCSS欄にも再度コピペしなおすか、プラグイン側で同じ機能を追加しておくのが便利かもしれません。

ワードプレスにCSSを追記できる機能をBOXする新プラグイン「CSS Javascript Inline Style Box」

まとめ

本日は「CSSを管理画面から自由自在に追記する方法」を解説いたしました。

もし今後「テーマを変える予定」があれば同様の機能を持ったプラグインを導入するのがおすすめです。プラグインであればもしテーマを変更しても一切影響を受けません。どっちを使うかはケースバイケース。

💻受講料無料でプログラミング習得

⇒ 完全無料のプログラミングスクール - 手に職をつけて安定的に働きたい人へ -

管理画面からCSSやJavaScriptを追加可能にするプラグインはかなりの種類がありますので、ご自身の使い方にもっとも合ったプラグインを選びましょう。追加したコードが色分けされるタイプが使いやすいです。そういう意味ではワードプレスの標準機能と同じように記述内容のカラーが自動適用されるのが良いかもしれません。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください