HTML の BODY 内から CSS ファイルを読み込む

ryomatsu

9年前

通常 HTML で CSS を読み込む場合、head タグ内に記述する。ところが止むに止まれぬ事情により body タグ内で外部のスタイルシートを読み込みこむ必要がでてきた。具体的にいうと WordPress のある投稿内でのみ解説の為に外部のスタイルシートを読み込み例を示す場合だ。基本的に CMS などで head タグ内部をいじれない時に必要となるだろう。

head タグはいじれないが html や javascript を自由に記述できるのであれば JavaScript を用いて CSS を読み込む link タグを head 内に挿入してやると良い。具体的に記述すると以下のようになる。

<script>
window.onload=function(){
    var css=document.createElement("link");
    css.setAttribute("rel","stylesheet");
    css.setAttribute("type","text/css");
    css.setAttribute("href","https://example.com/path-to-css.css");
    document.getElementsByTagName("head")[0].appendChild(css);
}
</script>

これを WordPress の投稿内に記述すると JavaScript の改行場所に勝手に br タグが記述されてしまう。それを防ぐ為に全て一行で記述する、もしくは WP-UnFormating プラグインなどで余計な改行が入らないようにすると良い。

https://wordpress.org/plugins/wp-unformating/ WordPress の自動フォーマットを部分的に無効化する WP-Unformatinr