Jimdoでページごとにヘッダー表示を変える もしくはトップ以外は非表示にする

前回のやり方ではできなくなっていたため代替案を用意しました。
代えといっても基本的なjavascriptでDOMの書き換えをしているだけです。

先に画像や独自レイアウトのHTMLをいじっておく必要があります。

<p id="ha"><img src="header.jpg" alt="" /></p>
<p id="hb"><img src="header2.jpg" alt="" /></p>

トップとサブページで所定の箇所の表示を変更

ウィジットでコードを挿入します。

<script> //<![CDATA[ 
window.onload=function(){ var ha=document.getElementById('ha'); 
ha.style.display='none'; 
var hb=document.getElementById('hb'); 
hb.style.display='block'; 
} //]]> </script>

displayでオンオフしているだけですね。

消すだけなら非表示にしたいページにdisplay:none;を入れるだけですが、切り替えるとなるとトップページをはじめ全ページにひとつずつ入れるため手間がかかります。

PHP DE 月ごと自動更新

auto

$autoUPdate = date('m');

switch ($autoUPdate) {
  case 1:
    $month = '画像URL';
    break;
  case 2:
    $month = '画像URL';
    break;
  case 3:
    $month = '画像URL';
    break;
  case 4:
    $month = '画像URL';
    break;
  case 5:
    $month = '画像URL';
    break;
  case 6:
    $month = '画像URL';
    break;
  case 7:
    $month = '画像URL';
    break;
  case 8:
    $month = '画像URL';
    break;
  case 9:
    $month = '画像URL';
    break;
  case 10:
    $month = '画像URL';
    break;
  case 11:
    $month = '画像URL';
    break;
  case 12:
    $month = '画像URL';
    break;
  default:
    $month = '画像URL';
    break;
}
echo "<img src=\"$month\" />";

PHPについてはほぼ勉強していないので・・・もっとよいやり方はあると思います。
よくわからないですが、置いときます。

CSS切り替えスイッチ WebStorage保存

Javascript&CSS

初期設定のCSSを作っておきます。

<link id="setcss" type="text/css" rel="stylesheet" href="css/default.css" />

切替のJSも読み込み

<script type="text/javascript" src="setcss.js"></script>

その読み込むJS


function setcss()
{
var csskey = Number(localStorage.getItem("csstemp"));

switch (csskey){
  case 1:
var style = '<link rel="stylesheet" href="css/default.css">';
    $('head link:last').after(style);
    break;
  case 2:
var style = '<link rel="stylesheet" href="css/change.css">';
    $('head link:last').after(style);
    break;
}
}
function cssswitch()
{
document.getElementById('horizon').onclick = function(){
localStorage.setItem("csstemp" , 1);	
var csskey = localStorage.getItem("csstemp");
if(csskey==1){
var style = '<link rel="stylesheet" href="css/default.css">';
    $('head link:last').after(style);
	}
	else 
var style = '<link rel="stylesheet" href="css/default.css">';
    $('head link:last').after(style);
		
		
	}

document.getElementById('vertical').onclick = function(){
localStorage.setItem("csstemp" , 2);
var csskey = localStorage.getItem("csstemp");

if(csskey==2){
var style = '<link rel="stylesheet" href="css/change.css">';
    $('head link:last').after(style);
	}
	else 
var style = '<link rel="stylesheet" href="css/default.css">';
    $('head link:last').after(style);
	}
}

jquery読み込みで。

<script type="text/javascript">
$(function(){
document.ready=function() {
setcss();
};
cssswitch();
});
</script>

HTML

<table>
		<tr>
				<td><button id="horizon">button</button></td>
				<td><button id="vertical">button</button></td>
		</tr>
</table>

<div class="list-area">
		<div class="list-left">画像など</div>
		<div class="list-right">
				<p>タイトル</p>
				<p>項目1</p>
				<p>項目2</p>
				<p>項目3</p>
		</div>
		<br class="clear" />
</div>
<div class="list-area">
		<div class="list-left">画像など</div>
		<div class="list-right">
				<p>タイトル</p>
				<p>項目1</p>
				<p>項目2</p>
				<p>項目3</p>
		</div>
		<br class="clear" />
</div>