サイトアイコン Lonely Mobiler

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

通常 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
Sponsored Link
モバイルバージョンを終了