サイドバーカスタマイズの仕上げ

スポンサーリンク


サイドバーカスタマイズの仕上げです。
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;
}

です。

まず、スタイルシートに次を追加します。

body#multi .side_title#categories,body#doubleL .side_title#categories,body#doubleR .side_title#categories{
	background:url('/dwm/wp-content/uploads/2013/08/173_1.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('/dwm/wp-content/uploads/2013/08/173_2.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('/dwm/wp-content/uploads/2013/08/173_3.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>

ところでコードの説明はしたほうがいいですか?


関連コンテンツ

スポンサーリンク

「サイドバーカスタマイズの仕上げ」への5件のフィードバック

  1. var fields=[
    {‘value’:’カテゴリー’,’name’:’categories’},
    {‘value’:’最新記事’,’name’:’posts’},
    {value’:’リンク集’,’name’:’links’}
    ];

    この中の名前が違うからです。
    私のブログでは、このスキンを改造した当時
    サイドバーの各ブロックのタイトルは「カテゴリー」と「最新記事」
    と「リンク集」でした。

    今は「プロフィール」「カテゴリー」「最新記事」「最新コメント」
    「最新トラックバック」です。

    inaliさんのブログではサイドバーのタイトルが
    「最新のエントリー」「カテゴリー」「inali のプロフィール」「2012年03月」
    「最新コメント」「トラックバック」「リンク」です。

    その名前にすれば、動きます。実際に動くことを確かめました。
    ただし、画像の「Ads」と「おいしい」は当然変わりません。

    このサンプルでは配列の中身が3つなので、足りない分は追加してください。

    「2012年03月」は月が替わると名前が変わってしまうので、
    Dateクラスを使って書いてください。

    CSSは上の場合で言うと
    Valueが「カテゴリー」の要素のタイトルのidが ‘categories’
    その項目の各リンクが「categories_body」というように_bodyがつきます。

    後はソースを見て対応してください。

  2. わー、わざわざ確かめていただいたとは恐縮です…。
    ありがとうございます☆もう一回挑戦してみます。

  3. できました!Tomさんありがとう、細かなミスが重なってたようでした
    後は、ポータルのページをどうするのかと、せっかく項目ごとに独立できたので、最新コメントのところのCSSだけピコピコ動くようにするのに挑戦です。

  4. こんいちは

    リアルにこちらのサイドバーはなかなか手ごわいです。

    少しずつもう一度もどしてがんばります。

inali へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください