【最新版3.50対応】Simple Custom CSS and JSで簡単！WordPressにカスタムCSS＆JSを自由自在に追加する方法

はじめに

Simple Custom CSS and JSとは

WordPressサイトのデザインや動作をカスタマイズしたいけれど、テーマファイルやプラグインのコードを直接編集するのは怖い、という方は多いでしょう。そんな時に便利なのが「Simple Custom CSS and JS」というプラグインです。このプラグインは、WordPressの管理画面から簡単にカスタムCSSやJavaScriptコードを追加できるツールで、テーマのアップデートや変更によってカスタマイズ内容が失われるリスクを抑えつつ、自由にスタイルや動きを調整可能です。

このプラグインは、初心者でも扱いやすいシンプルなインターフェースを持ちながら、コードのシンタックスハイライトや出力位置の指定、管理画面・フロントエンド別の適用など多彩な機能を備えています。累計ダウンロード数は約850万回（2025年4月時点）と多くのユーザーに支持されており、平均評価も4.3/5と高評価を維持しています。

プラグインの特徴とメリット

「Simple Custom CSS and JS」の最大の魅力は、テーマやプラグインのファイルを直接編集せずに、WordPressの管理画面から安全かつ手軽にCSSやJSコードを追加できる点です。これにより、テーマのアップデート時にもカスタマイズ内容が保持され、再設定の手間が省けます。また、ユーザーが複数のコードを管理できるため、目的別に細かく分けて整理できるのも便利です。

さらに、コードの出力位置をヘッダーやフッターで切り替えたり、フロントエンドと管理画面で別々に適用することも可能。これにより、管理画面のUIをカスタマイズしたり、サイト訪問者だけに特定のスクリプトやスタイルを適用するなど柔軟な運用ができます。加えて、jQueryライブラリの自動読み込み制御など、パフォーマンス面にも配慮された設計となっています。

対象読者とこの記事の目的

この記事では、「Simple Custom CSS and JS」を使ったWordPressサイトへのカスタムCSS・JSコードの追加方法を初心者にもわかりやすく解説します。プラグインのインストールから基本的な使い方、最新バージョン3.50でのアップデート情報まで網羅的に紹介し、トラブルシューティングや高度な活用術もカバー。これからWordPressサイトを自分好みにカスタマイズしたい方、コーディング初心者の方に特に役立つ内容です。

なお、本記事内で紹介するプラグインは以下の公式ページからダウンロード可能ですので、あわせてご活用ください。

—

プラグインの基本機能と使い方

インストールと有効化方法

「Simple Custom CSS and JS」のインストールは非常に簡単です。WordPress管理画面の「プラグイン」＞「新規追加」から「Simple Custom CSS and JS」で検索し、表示されたプラグインを「今すぐインストール」後、「有効化」をクリックするだけで完了します。必要なWordPressバージョンは3.0.1以上、PHPは5.2.4以上に対応しており、最新のWordPress 6.8.1でも動作確認済みです。

インストール後は管理メニューに「Custom CSS & JS」などの項目が追加され、ここからカスタムコードの管理が可能となります。管理画面の構成はシンプルで、コードの新規追加、編集、削除が直感的に行えます。

カスタムCSS・JSコードの追加手順

コードを追加するには、「Custom CSS & JS」メニューから「新規追加」をクリックし、表示されるエディターにCSSまたはJavaScriptコードを入力します。プラグインでは「CSS」「JS（ヘッダー出力）」「JS（フッター出力）」などの種類を選べるため、用途に応じた適切なタイプを選択してください。

さらに、コードの適用範囲を「フロントエンドのみ」「管理画面のみ」「両方」から選択可能。これにより、管理画面のUI調整や、訪問者向けのスクリプト追加が分かりやすく管理できます。保存後は即座に反映され、テーマを変更してもコードは保持されるため、安心してカスタマイズを続けられます。

コードの編集画面の見方と使い方

編集画面はシンプルながら機能的で、コード入力欄はシンタックスハイライト対応。ミスの見落としを防ぎながら編集できるため、初心者にも扱いやすいです。また、「Where in site」オプションでコードを特定の投稿やページに限定して適用できるほか、複数の場所を同時に指定することも可能です（バージョン3.42以降の機能）。

なお、一覧画面ではコードの概要や適用範囲が一目でわかり、コードの抜粋表示も調整可能。バージョン3.50では「Extended View」オプションが有効な投稿・固定ページでのコード抜粋非表示問題が修正され、より快適に使えるようになりました。

フロントエンド・管理画面への適用の違い

CSSやJSのコードは、サイトのフロントエンド（訪問者が見るページ）か、管理画面（WordPressダッシュボード）か、あるいは両方に適用できます。例えば、管理画面のUIをカスタマイズしたい場合は管理画面のみを選択し、訪問者向けのデザイン調整はフロントエンドのみを指定するのが一般的です。

この使い分けは、プラグインの利便性を高める大きな特徴であり、他のプラグインやテーマとの干渉を減らしながら最適なコード運用が可能となります。

テーマ変更後もコードが保持される仕組み

通常、テーマのstyle.cssやfunctions.phpに直接コードを追加すると、テーマのアップデートや切り替え時にカスタマイズ内容が失われるリスクがあります。しかし「Simple Custom CSS and JS」は、WordPressの独自テーブルにコードを保存する仕組みのため、テーマ変更後もカスタムコードが保持されるのが大きなメリットです。

これにより、安心してテーマの切り替えを行え、手間なくサイトの見た目や動作を維持できます。

—

最新バージョン3.50のアップデート情報と新機能

2025年2月にリリースされた最新版「3.50」では、いくつかの重要な修正と改善が行われました。特にユーザーからのフィードバックが多かった「エディターが特定条件下で表示されない問題」の解消は大きな注目ポイントです。

バージョン3.50の修正内容詳細

今回のアップデートは主に安定性向上を目的としており、

– **エディターが特定条件下で表示されない問題の修正**
　特定の環境や設定により、コード編集画面のエディターが正常に表示されない不具合が報告されていましたが、本バージョンで解消されています。これにより、どの環境でも快適に編集作業が行えます。

– **「Extended View」オプションが有効な投稿・固定ページでのコード抜粋非表示対応**
　投稿や固定ページの一覧画面で「Extended View」オプションを有効にした場合、コードの抜粋が表示されない問題も修正され、リスト画面からカスタムコードの内容がわかりやすくなりました。

バージョン3.49の細かな修正ポイント

前バージョン3.49では、WordPress 6.6を境に挙動が変わった「Block editor内」オプションに関する細かな調整がなされました。これにより、ブロックエディターでのカスタムコード追加時の安定性が向上しています。

バージョン3.48での新機能：Block editor対応

3.48（2024年9月リリース）では、待望の「Block editor（ブロックエディター）対応」が実装されました。これにより、WordPressの最新エディター環境であるGutenbergの編集画面内から直接CSSやJSのカスタムコードを追加・管理できるようになりました。

この新機能によって、

– ブロックエディター内でのカスタムコード追加が直感的に行える
– 編集画面とカスタムコードの管理が一元化されるため作業効率が大幅にアップ
– 既存のClassic Editorユーザーもスムーズに移行可能

といったメリットが生まれ、最新WordPress環境での利用価値がさらに高まりました。

過去の重要アップデートまとめ

ここ数年の重要なアップデートも振り返っておきましょう。

– **3.46（2024年1月）**
　BootstrapとjQueryライブラリのリンクを更新し、最新環境に対応。qTranslate-xプラグインの警告メッセージも削除。

– **3.44（2023年6月）**
　WooCommerceの「カスタム注文テーブル」機能に対応し、ECサイト運営者にも安心して利用可能に。

– **3.42（2023年1月）**
　「Where in site」オプションで複数の適用場所を一度に指定できる機能を追加。より柔軟なコード適用が可能に。

—

Simple Custom CSS and JSの高度な活用術

コードの出力位置（ヘッダー・フッター）の使い分け

JavaScriptコードを追加する際、ヘッダーに出力するとページの読み込み時に即座にスクリプトが実行されますが、ページの表示速度に影響を与える可能性もあります。一方、フッターに出力するとページのコンテンツが先に読み込まれるため、ユーザー体験を損なわずにスクリプトを実行可能です。用途に応じて適切に使い分けましょう。

CSSは基本的にヘッダーに出力されるため、スタイルの適用タイミングが早くなり、レイアウト崩れを防げます。

複数コードの管理と最適化方法

「Simple Custom CSS and JS」では複数のカスタムコードを登録できるため、例えばテーマごとに分けたり、特定のページ専用のスタイルやスクリプトを個別に管理できます。これにより、メンテナンス性が向上し、不要なコードの読み込みも防げます。

また、コードの重複や競合を避けるためにも、定期的な整理と最適化をおすすめします。

管理画面とフロントエンドで別々のコードを使う方法

管理画面（ダッシュボード）のUI改善や機能追加のために、管理画面専用のCSSやJSを追加するケースもあります。プラグインのコード編集画面で「適用範囲」を「管理画面のみにする」と設定すれば、フロントエンドには影響を与えずに管理画面だけをカスタマイズ可能です。

これにより、サイト訪問者の表示速度や動作を損なうことなく、管理者向けの利便性を高められます。

jQueryライブラリの自動読み込み制御の仕組み

多くのJavaScriptコードはjQueryに依存していますが、不要な場合にjQueryを読み込むとパフォーマンス低下の原因になります。Simple Custom CSS and JSは、フロントエンドでJSカスタムコードにjQueryが必要な場合のみ自動的にjQueryを読み込む仕組みを備えています（3.45以降の修正）。

これにより、無駄なライブラリ読み込みを抑え、サイトの高速化をサポートします。

—

トラブルシューティングとよくある質問

エディターが表示されない場合の対処法

稀に、コード編集画面のエディターが表示されない問題が発生することがあります。最新版3.50ではこの問題が修正されていますが、もし古いバージョンを使用している場合はプラグインの更新を推奨します。また、ブラウザのキャッシュをクリアしたり、他のプラグインとの競合を疑い、一時的に無効化して検証するのも有効です。

コードが反映されない原因と解決策

コードを追加しても反映されない場合は、

– 適用範囲の設定ミス（管理画面のみを選択していないか）
– キャッシュプラグインの影響
– コードの文法エラーや競合

などが考えられます。キャッシュをクリアし、コードを精査、適用範囲を再確認してください。

PHPバージョン・WordPressバージョン別注意点

本プラグインはPHP5.2.4以上、WordPress3.0.1以上に対応していますが、最新の環境（PHP8系、WordPress6.8系）での動作検証が推奨されます。既知のPHP8.1での非推奨通知への対応も行われており、安定した動作が期待できます。

—

プラグイン基本情報

—

WordPressサイトのカスタマイズをもっと手軽に、もっと安全に行いたいなら、「Simple Custom CSS and JS」は非常に強力な味方になります。特に最新版3.50では安定性が向上し、ブロックエディター対応などの新機能も充実。初心者から上級者まで幅広くおすすめできるプラグインです。

ぜひ以下の公式ページからダウンロードして、あなたのサイトに自由自在なカスタマイズを加えてみてください。