～目次～
WordPressで見た目を変える方法
WordPressを使用したことがある人であれば分かると思うが、ページの見た目を変えるには、「テーマ」を変えるか「テーマ」＞「カスタマイズ」＞「追加CSS」でCSSを追加して見た目を整えていく方法があります。
ただ、この場合WEBサイト全体に適用されてしまうため、ある特定のページの特定の部位だけにCSSを適用したい～という場合に無駄にidを付与したりclassを付与したりしなければならないため非常に不便です。
プラグイン「Scripts n Styles」について
WordPressのプラグインに非常に便利なプラグインを発見しました。その名も「Scripts n Style」です。
名前の通り、JavaScriptとCSSのStyleを適用させることができるプラグインとなっています。
インストール方法
WordPressの「プラグイン」＞「新規追加」の画面にて「Scripts n Styles」と入力すると下記画像のように「Scriptsn Styles」のプラグインが表示されますので、「今すぐインストール」→「有効化」ボタンをクリックしてください。
CSSの適用方法
普段通り、ページの編集を行おうとすると、下の方に下記画像のような入力フォームが表示されるようになります。
「Styles」のタブをクリックしてください。
パッと見て分かる通り、フォームの中に「CSS」の記述をすればOKです。編集しているページにしか適用されないので、タグ名での指定も可能ですし、idやclass名を付与してStyleを適用することもできます。
head内のstyleタグが挿入される形になりますが、テーマのStyleの方が強力な場合があります。その場合は「!important」を付与して最優先で適用してあげればOKです。
JavaScriptの適用方法
CSSの適用方法同様に、ページを編集しようとすると、下の方に下記画像のようなフォームが表示されるようになります。
「Scripts」のタブをクリックしてください。
パッと見て分かる通り、フォームの中にJavaScriptの記述をすればOKです。
注意点としては、上部のheadtag…に記述するとhead内にscriptタグが挿入される形になるので、「window.onload=function(){}」で処理内容を記述してあげる必要があることです。（dom要素に対して処理をする必要がある場合）
下部のbodytag…に記述するとbodyタグ内に挿入される形になりますので、そのまま処理を記述することができます。
このJavaScriptの内容もそのページにのみ適用されるため、他のページを気にすることなくプログラムを記述可能となっています。
まとめ
WordPressでWEBサイトを作成した時に、特定のWEBページにCSSやJavaScriptを適用させる方法をご紹介させていただきました。
答えはWordPressプラグイン「Scripts n Styles」を利用することです。記述した内容をWEBページのheadタグ内に挿入してくれるという便利なプラグイン。ページの作りと併せれば出来ることはたくさんあります。特定のページの見た目を変えたい時やプログラムを動作させたい時などにご活用ください。
