「Simple Custom CSS and JS」というWordPressプラグインを使うと、WordPressのサイトにCSSやJavaScriptを追加することができます。
![](https://eguweb.jp/wp-content/uploads/スクリーンショット-2023-04-11-12.33.34-1024x473.jpg)
![](https://ps.w.org/custom-css-js/assets/banner-772x250.png?rev=1303730)
プラグインのインストール
まずは、「Simple Custom CSS and JS」というプラグインをインストールします。WordPressの管理画面から「プラグイン」→「新規追加」を選択し、「Simple Custom CSS and JS」と検索します。
![](https://eguweb.jp/wp-content/uploads/スクリーンショット-2023-04-11-12.33.22-1024x266.jpg)
プラグインが見つかったら、「今すぐインストール」をクリックし、プラグインをインストールします。
![](https://eguweb.jp/wp-content/uploads/スクリーンショット-2023-04-11-12.38.39-1024x595.jpg)
管理画面に設定が追加されます。
カスタムCSSの追加
「Simple Custom CSS and JS」プラグインを有効化したら、WordPressの管理画面から「外観」→「Simple Custom CSS and JS」を選択します。
この画面で、カスタムCSSを追加することができます。例えば、以下のようなCSSを追加することができます。
/* 記事内の画像に枠線を追加する */
img {
border: 1px solid #ccc;
padding: 5px;
}
![](https://eguweb.jp/wp-content/uploads/スクリーンショット-2023-04-11-12.37.47-1024x453.jpg)
カスタムJavaScriptの追加
同様に、カスタムJavaScriptを追加するには、「Simple Custom CSS and JS」プラグインの管理画面から「JavaScript」タブを選択します。ここにJavaScriptのコードを追加することができます。
例えば、以下のようなJavaScriptを追加することができます。
/* 記事内の画像をクリックすると、拡大表示する */
jQuery(document).ready(function($) {
$('img').click(function() {
$(this).toggleClass('enlarge');
});
});
このJavaScriptのコードは、記事内の画像をクリックすると、拡大表示するようになります。
![](https://eguweb.jp/wp-content/uploads/スクリーンショット-2023-04-11-12.37.39-1024x532.jpg)
これで、サイト上でJavaScriptのコードを読み込んでくれるようになります。
まとめ
以上のように、「Simple Custom CSS and JS」プラグインを使用すると、WordPressのサイトに簡単にCSSやJavaScriptを導入することができます。
テーマを直接カスタマイズできない場合などに、便利なプラグインです。