【javascript】特定のCSSファイルを読み込ませない方法

ワードプレスなどでホームページやブログを作成していると、全ページに反映されているCSSを特定のページにだけ反映させたくないという場合があると思います。

固定ページを使って期間限定のキャンペーンページや、ちょっとしたテストページを作ろうと思ったときに邪魔になるCSSだけを読み込ませない方法をご紹介します。

特定のページでCSSを読み込ませない方法

まずURLを基準にして、単一のページに適用させる場合です。

以下では「https://sample.com/sall/」というURLのページに、「style.css」を読み込ませたくない場合です。

【javascript】
let url = window.location.href;
if (url == "https://sample.com/sall/") {
    let links = document.getElementsByTagName("link");
    for (let i = 0; i < links.length; i++) {
        if (links[i].href.includes("style.css")) {
            links[i].parentNode.removeChild(links[i]);
        }
    }
}

まず、window.location.href で現在のURLを取得します。

そのURLが "https://sample.com/sall/" だったら、document.getElementsByTagName(“link”) でページ内のlinkタグを取得します。

forループでlinkタグのhref属性が "style.css" を含む場合、links[i].parentNode.removeChild(links[i]) でlinkタグを削除しています。

URLに特定の文字列を持つページで、CSSを読み込ませない方法

次に「test」などURLの中に特定の文字列が含まれている場合に、「style.css」を読み込ませない方法をご紹介します。

前述の方法と違い、毎回URLを書き換えなくて済むので、テストやABパターンページを良く作る方にはおすすめです。

【javascript】
let url = window.location.href;
let indextext = url.indexOf('test');

if (indextext) {
    let links = document.getElementsByTagName("link");
    for (let i = 0; i < links.length; i++) {
        if (links[i].href.includes("style.css")) {
        links[i].parentNode.removeChild(links[i]);
        }
    }
}

window.location.href で現在のURLを取得。

let indextext = url.indexOf('test') の部分で、URLの中に文字列「test」が含まれているかを判別し、含まれていた場合は変数「indextext」に格納します。

if (indextext) でURLの中に文字列「test」が含まれている場合は「style.css」を削除するようにしています。

基本的なロジックは先ほどと同じです。

今回はURLそのものではなく、「indexOf」を利用してURLの中に特定の文字列を含んでいる場合を条件としています。

まとめ

以上がjavascriptで特定のCSSファイルを読み込ませない方法になりますが、いかがでしたでしょうか。

今回のようなケースに限らず、URLを取得して条件分岐をかけていくパターンは割りと多いと思います。

特にワードプレスの固定ページや投稿ページの中では通常PHPが効かないので、javascriptだけで実行できる方法は覚えておいて損はないと思いますよ。

この記事がどなたかのお役に立てたら幸いです。