サイドバーカスタマイズの仕上げです。
JavaScript（ジャバスクリプト）で、項目ごとに違う見た目にします。
まず、スタイルシートに次を追加します。
つづいて、全HTMLスキンのヘッダに以下のJavaScriptを追加。
別記事「モジュールの設置方法」の要領で、サイドバーの一番最後に下のソースを追加します。
左右にサイドバーがある場合は、右サイドバーのいちばん下に追加です。
うまく動かないスキンがあったので、訂正しました。
参考までに古いソースも残しておきますが、そちらは使わないでください。
修正済みコード
こちらは古いコードです。使わないでください。
ところでコードの説明はしたほうがいいですか？
JavaScript（ジャバスクリプト）で、項目ごとに違う見た目にします。
この記事を書く前に、前々回のサイドバーのカスタマイズから、色だけ変更しています。
訂正前
div.side_text{
width:138px;
margin:0 auto 2px auto;
background-color:#F3D7FC;
}
div.side_text:hover{
background-color:#EAB5FB;
}
訂正後
div.side_text{
width:138px;
margin:0 auto 2px auto;
background-color:#F9D8DF;
}
div.side_text:hover{
background-color:#FBB7C5;
}
です。
訂正前
div.side_text{
width:138px;
margin:0 auto 2px auto;
background-color:#F3D7FC;
}
div.side_text:hover{
background-color:#EAB5FB;
}
訂正後
div.side_text{
width:138px;
margin:0 auto 2px auto;
background-color:#F9D8DF;
}
div.side_text:hover{
background-color:#FBB7C5;
}
です。
まず、スタイルシートに次を追加します。
body#multi .side_title#categories,body#doubleL .side_title#categories,body#doubleR .side_title#categories{
background:url('https://fanblogs.jp/ayzfqir5/file/173/Y2F0ZWdvcmllcy1iZyHH.gif') left top no-repeat;
}
#categories_body div.side_text{
background-color:#F9D8DF;
}
#categories_body div.side_text:hover{
background-color:#FBB7C5;
}
body#multi .side_title#posts,body#doubleL .side_title#posts,body#doubleR .side_title#posts{
background:url('https://fanblogs.jp/ayzfqir5/file/173/cGFnZXMtYmcJFg.gif') left top no-repeat;
}
#posts_body div.side_text{
background-color:#F3D7FC;
}
#posts_body div.side_text:hover{
background-color:#EAB5FB;
}
body#multi .side_title#links,body#doubleL .side_title#links,body#doubleR .side_title#links{
background:url('https://fanblogs.jp/ayzfqir5/file/173/bGlua3MtYmcadg.gif') left top no-repeat;
}
#links_body div.side_text{
background-color:#FCEBB1;
}
#links_body div.side_text:hover{
background-color:#FEB37D;
}つづいて、全HTMLスキンのヘッダに以下のJavaScriptを追加。
別記事「モジュールの設置方法」の要領で、サイドバーの一番最後に下のソースを追加します。
左右にサイドバーがある場合は、右サイドバーのいちばん下に追加です。
うまく動かないスキンがあったので、訂正しました。
参考までに古いソースも残しておきますが、そちらは使わないでください。
修正済みコード
<script type="text/javascript">
(function(){
var fields={
"カテゴリー":"categories",
"最新記事":"posts",
"リンク集":"links"
};
var sidebar=function(arg){
var sidebar=['sidebar','sidebarLeft','sidebarRight'];
var cnt=0;
for(var i=0;i<sidebar.length;i++){
var elem=document.getElementById(sidebar[i]);
if(elem){
var table=elem.getElementsByTagName('table');
for(var j=0;j<table.length-2;j+=3){
var td=table[j].getElementsByTagName('td');
if(arg[td[1].innerHTML]){
td[1].id=arg[td[1].innerHTML];
table[j+2].id=td[1].id+'_body';
if(++cnt==fields.length){
return;
}
}
}
}
}
}
sidebar(fields);
})();
</script>
こちらは古いコードです。使わないでください。
<script type="text/javascript">
window.onload=function(){
var fields=[
{'value':'カテゴリー','name':'categories'},
{'value':'最新記事','name':'posts'},
{'value':'リンク集','name':'links'}
];
var check_td=function(td,arg){
for(var i=0;i<arg.length;i++){
if(td.innerHTML==arg[i].value){
td.id=arg[i].name;
return true;
}
}
return false;
}
var sidebar=function(arg){
var sidebar=['sidebar','sidebarLeft','sidebarRight'];
for(var i=0;i<sidebar.length;i++){
var elem=document.getElementById(sidebar[i]);
if(elem){
var table=elem.getElementsByTagName('table');
if(table){
for(var j=0;j<table.length;j++){
var td=table[j].getElementsByTagName('td');
if(td&&j<table.length-1){
for(var n=0;n<td.length;n++){
if(check_td(td[n],arg)){
j+=2;
table[j].id=td[n].id+'_body';
break;
}
}
}
}
}
}
}
}
sidebar(fields);
}
</script>
ところでコードの説明はしたほうがいいですか？