1

私は Web デザインの初心者なので、これが最良のフォーラムなのか、それとも私を完全に逃してしまうような明白な解決策があるのか​​ わかりません。どちらかであってもご容赦ください。それで、これが取引です。

私はクラフト cms を使用してブログを作成しており、私のレイアウト ファイルでは、styleswitcher.js スクリプトを使用して 2 つの css ファイルを切り替えています。

<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.example.com/weblog1.css"/>
<link rel="stylesheet" type="text/css" media="screen" title="aeroplaniko" href="http://www.example.com/weblog1.css"/>
<link rel="alternate stylesheet" type="text/css" media="screen" title="white" href="http://www.example.com/weblog3.css" />

<script type="text/javascript" src="http://www.example.com/jquery-1.12.1.min.js" ></script>
<script type="text/javascript" src="http://www.example.com/styleswitcher.js">
</head>

<body>
<a href="http://www.example.com/weblog3.css" onclick="setActiveStyleSheet('white'); return false;" class="WhiteButton"></a><a href="http://www.example.com/weblog1.css" onclick="setActiveStyleSheet('aeroplaniko'); return false;" class="LightblueButton"></a></body>

ソーシャル メディアのアイコンを展開するために、css スタイルも使用しています。たとえば、facebook は次のようになります。

 .facebook {
 margin-right: 2px;
 width: 28px;
 height: 28px;
 display:inline-block;
 background-repeat:no-repeat;
 background-image: url('logos/facebook.png');
 background-size:28px 28px;
 background-position:center bottom;
}
.facebook:hover {
   background-image: url('logos/facebookhover.png');
}

Internet Explorer では png ファイルを表示するのが苦手だと気づいたので、svg ファイルに切り替えることにしました。いくつかの作業の後、png ファイルを svg に変換することができました。また、スタイルシートで参照されているすべての png ファイルを svg に変更しました。

ただし、ここに問題があります。svg ファイルを含む css スタイルシートを使用するとすぐに、スタイルの切り替えは、切り替えを行った特定のページにのみ影響し、サイト全体には影響しません。

したがって、メイン ページでスタイルを切り替えて記事ページに移動すると、前のスタイルシートが表示されます。ページ分割されたページを移動しても、スタイルが変わることがあります。

それで、何が間違っていて、どうすれば修正できますか？

PS。iPadでWebサイトをテストしていたときに、pngファイルでも同じ問題に気付いたことに注意してください。

PS2。わかりました、styleswitcher.js ファイルのコードは次のとおりです。

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

4

0 に答える 0