実現したいこと
タイトルの通り、特定のページにのみ専用のCSSファイルを読み込ませたいです。
調べてみると、WordPressではそれらしき方法があるのですが、今のサイトはSIRIUSというCMSで構成されている為、
方法がわかりませんでした。
現在の環境
- 「SIRIUS」というツールで作成
- SIRIUS仕様
- スタイル割り込み:インラインでCSSを追記できるが、遅延読み込みできないので使用は避けたい
- headタグ:head内に任意の記述を追加できる
- html…以下の通り
html
1<?php print '<?xml version="1.0" encoding="UTF-8"?>'; ?> 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3<html xmlns="//www.w3.org/1999/xhtml" xml:lang="ja,zh" lang="ja,zh"> 4<head> 5<meta name="robots" content="noindex,nofollow,noarchive"> 6<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7<meta http-equiv="Content-Style-Type" content="text/css"> 8<meta name="format-detection" content="telephone=no"> 9<title>hoge</title> 10<meta name="keywords" content="hoge"> 11<meta name="description" content="hoge"> 12<meta name="viewport" content="width=device-width, initial-scale=1.0"> 13<link rel="preconnect" href="https://www.google.com"> 14<link rel="preconnect" href="https://maxcdn.bootstrapcdn.com"> 15<link rel="preconnect" href="https://www.google-analytics.com"> 16<link rel="preconnect" href="https://ajax.googleapis.com"> 17<link rel="preconnect" href="https://cse.google.com"> 18<link rel="preconnect" href="https://cdnjs.cloudflare.com"> 19<link rel="preconnect" href="https://www.googleapis.com"> 20<link rel="preconnect" href="https://code.jquery.com"> 21<link rel="preload" href="./styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> 22<script> 23 /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */ ! function(t) { 24 "use strict"; 25 t.loadCSS || (t.loadCSS = function() {}); 26 var e = loadCSS.relpreload = {}; 27 if (e.support = function() { 28 var e; 29 try { 30 e = t.document.createElement("link").relList.supports("preload") 31 } catch (a) { 32 e = !1 33 } 34 return function() { 35 return e 36 } 37 }(), e.bindMediaToggle = function(t) { 38 function e() { 39 t.addEventListener ? t.removeEventListener("load", e) : t.attachEvent && t.detachEvent("onload", e), t.setAttribute("onload", null), t.media = a 40 } 41 var a = t.media || "all"; 42 t.addEventListener ? t.addEventListener("load", e) : t.attachEvent && t.attachEvent("onload", e), setTimeout(function() { 43 t.rel = "stylesheet", t.media = "only x" 44 }), setTimeout(e, 3e3) 45 }, e.poly = function() { 46 if (!e.support()) 47 for (var a = t.document.getElementsByTagName("link"), n = 0; n < a.length; n++) { 48 var o = a[n]; 49 "preload" !== o.rel || "style" !== o.getAttribute("as") || o.getAttribute("data-loadcss") || (o.setAttribute("data-loadcss", !0), e.bindMediaToggle(o)) 50 } 51 }, !e.support()) { 52 e.poly(); 53 var a = t.setInterval(e.poly, 500); 54 t.addEventListener ? t.addEventListener("load", function() { 55 e.poly(), t.clearInterval(a) 56 }) : t.attachEvent && t.attachEvent("onload", function() { 57 e.poly(), t.clearInterval(a) 58 }) 59 } 60 "undefined" != typeof exports ? exports.loadCSS = loadCSS : t.loadCSS = loadCSS 61 }("undefined" != typeof global ? global : this); 62</script> 63</head> 64<body> 65hoge 66</body> 67</html>
※一部のscriptは除いています
困っていること
上記のように共通CSSを
html
1<link rel="preload" href="./styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
で読み込みつつ、専用のCSSを読み込ませたいページにのみ、
例えば特定の記述を追加するなどで、実現することは可能でしょうか?
回答1件
あなたの回答
tips
プレビュー