サイドバーにもアバター表示モジュール

スポンサーリンク


2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。

以前コメントにアバターを表示する「サムネイル表示モジュール」を公開しましたが、
今度はサイドバーの「リンク集」「最新コメント」「最新トラックバック」のそれぞれに、
その人のアバターを表示する「サイドバーにもサムネイルモジュール」です。

これはA8.netのファンブログ用スクリプトです。他のブログでは動きません。

現在このブログでは、このスクリプトは使っていません。
このブログの現在の「最新コメント」は最新コメント一覧カスタムモジュールのソースを使っています。

サンプル


このサンプルは
八百屋勘太のおもしろ体験談」さんの
サイドバーに適用したらどうなるか
シミュレーションしたものです。


使い方

この下にある、ソースコードを丸まるコピーして、サイドバーに貼り付ければ、上のサンプルと
同じデザインで「リンク集」「最新コメント」「最新トラックバック」にサムネイルが表示されます。

貼るのはサイドバーで「リンク集」「最新コメント」「最新トラックバック」の3つよりも下ならば
どこでも大丈夫です。

サイドバーへの貼り付け方法がわからなければ「モジュールの設置方法」を見てください。

ただし、「リンク集」「最新コメント」「最新トラックバック」の名前が違っていると表示されません。
名前が違う場合は、ソースコードの赤い部分を訂正すれば表示されるようになります。

この名前(赤い部分)をサイドバーに合わせる

var fields=[
  {'value':'リンク集','name':'links'},
  {'value':'最新コメント','name':'comments'},
  {'value':'最新トラックバック','name':'trackbacks'}
];

名前の確認方法は「カテゴリ並び替えモジュール」の中にある、
手順1 「カテゴリアーカイブ一覧」の名前を確認すると同じです。

カスタマイズ方法

「リンク集」「最新コメント」「最新トラックバック」の3つではなく、
特定の1つか2つの項目にだけ使いたい場合。

「リンク集」「最新コメント」「最新トラックバック」の3つが全部サイドバーになくても、あるものだけに適用されます。しかし、サイドバーにはあるけれど、使いたくない項目がある場合は、その項目名のところをnullと書き直してください。

この名前(赤い部分)をnullと書き直す(で囲んではいけない)

最新コメントだけに適用させる場合はこのようになる

var fields=[
  {'value':null,'name':'links'},
  {'value':'最新コメント','name':'comments'},
  {'value':null,'name':'trackbacks'}
];

色を変えたいときはソースコードの後半にあるスタイルシートを修正します。
どこを書き直すかは、下のソースコードの該当箇所に色つきで説明をつけてわかるようにしています。ちなみにこのブログのサイドバーの色を参考に列記します。

色見本

カテゴリー 普段の色  #F9D8DF マウスが乗った時  #FBB7C5
最新記事 普段の色  #F3D7FC マウスが乗った時  #EAB5FB
最新コメント 普段の色  #FCEBB1 マウスが乗った時  #FEB37D
最新トラックバック 普段の色  #D2EEF9 マウスが乗った時  #B9E9FD

下の色(背景色)と同じにしたい時は「transparent」と書きます。(#はつけない)
このモジュールの初期設定は、このブログの「最新トラックバックの色です。」

スタイルシートは別場所に貼る必要はなく、ソースコードを全てまとめてサイドバーに貼って
大丈夫です。

ソースコード(この青枠の中を丸ごとコピーしてサイドバーに貼るだけです)

<!-- サイドバーにもサムネイルモジュールここから -->


<!-- JavaScript -->

<script type="text/javascript">
(function(){
//名前をサイドバーと同じにしてください
var fields=[
  {'value':'リンク集','name':'links'},
  {'value':'最新コメント','name':'comments'},
  {'value':'最新トラックバック','name':'trackbacks'}
];
 
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 i;
    }
  }

  return -1;
}

var get_img=function(link){
  var freezeTom='/dwm/wp-content/uploads/2013/08/384_3.jpg';
  var naru='http://image.profile.livedoor.jp/icon/keywordchoice_60.jpg';
  var ettan='http://ettan.up.seesaa.net/image/images-thumbnail2.jpg';

  if(link.match(/https?:\/\/fanblogs\.jp\//)){
    var url=link.replace(/ |\s+/g,'')
      .replace(/^https?:\/\/fanblogs\.jp\//,'').replace(/\/.*$/,'');

    if(url.length){
      return url!='ayzfqir5'?'http://fanblogs.jp/'
        +url+'/file/profile':freezeTom;
    }
  }

  if(link.match(/https?:\/\/blog\.livedoor\.jp\/keywordchoice\/?/)){
    return naru;
  }

  if(link.match(/https?:\/\/ettan\.seesaa\.net\/?/)){
    return ettan;
  }

  return null;
}

var set_img=function(div,flag){
  var noImage='http://fanblogs.jp/ayzfqir5/file/384/'
    +'LXVzci1sb2NhbC1hcGFjaGUyLWJsb2ctaW1hZ2UtcHJvZml'
    +'sZS1wcm9maWxlX2RlZmF1bHQxRtQ.gif';
  var link1='';
  var link2='';
  var a=div.getElementsByTagName('a');
  var img=null;

  if(a.length==2){
    div.innerHTML=div.innerHTML.replace(/\r?\n/g,'')
      .replace(/(.+<a .+?>.+?)<\/a>(.+<a .+?>.+?<\/a>)(.+)/i,'$1</a>$3$2');
  }

  if(flag==0){
    img=get_img(a[0].href);
    link1='<a href="'+a[0].href+'" target="_blank">';
    link2='</a>';
    var a=div.getElementsByTagName('a');

    if(a.length){
      a[0].innerHTML='<img src="'+(img?img:noImage)
        +'" width="30" style="display:inline-block" />&nbsp;'
        +a[0].innerHTML;
    }

    return;
  }else if(a.length==2||flag==2){
    img=get_img(a[0].href);
    link1='<a href="'+a[0].href+'" target="_blank">';
    link2='</a>';
  }else{
    div.innerHTML=div.innerHTML.replace(/\r?\n/g,'')
      .replace(/(.+)(<br>.+?<a .+?>.+?<\/a>)(.+)/i,'$1$3$2');
  }

  var new_td=document.createElement('td');

  new_td.setAttribute('class','side_img');
  new_td.innerHTML='<div class="side_img">'
    +link1+'<img src="'+(img?img:noImage)+'" width="30"/>'
    +link2+'</div>';

  div.parentNode.parentNode.insertBefore(new_td,div.parentNode);
}

var sidebar=function(arg){
  var sb=['sidebar','sidebarLeft','sidebarRight'];

  for(var i=0;i<sb.length;i++){
    var elem=document.getElementById(sb[i]);

    if(elem){
      var table=elem.getElementsByTagName('table');

      for(var j=0;j<table.length-1;j++){
        var td=table[j].getElementsByTagName('td');

        for(var n=0;n<td.length;n++){
          var ret=check_td(td[n],arg);

          if(ret>=0){
            j+=2;
            table[j].id=td[n].id+'_body';

            var tr=table[j].getElementsByTagName('tr');

            if(ret==0&&fields[0].value&&fields[0].value.length){
              var div=tr[0].getElementsByTagName('div');

              for(var num=0;num<div.length;num++){
                set_img(div[num],ret);
              }
            }else if(ret==1&&fields[1].value&&fields[1].value.length){
              for(var num=0;num<tr.length;num++){
                var div=tr[num].getElementsByTagName('div');

                if(div.length){
                  set_img(div[0],ret);
                }
              }
            }else if(ret==2&&fields[2].value&&fields[2].value.length){
              for(var num=0;num<tr.length;num++){
                var div=tr[num].getElementsByTagName('div');

                if(div.length){
                  div[0].innerHTML=div[0].innerHTML
                    .replace(/<\/a>(.+)$/i,
                      '<span>$1</span></a>');

                  set_img(div[0],ret);
                }
              }
            }

            break;
          }
        }
      }
    }
  }
}

sidebar(fields);
})();
</script>


<!-- スタイルシート -->

<style type="text/css">

/* 色の指定にかかわるものだけ上にまとめました */


/* リンク集の色指定 */

#links_body div.side_text a{
  background-color:#D2EEF9; /* リンク集の普段の色 */
  text-decoration:none;
  display:block;
}

#links_body div.side_text a:hover{
  background-color:#B9E9FD; /* リンク集にマウスが乗った時の色 */
}


/* コメント欄の色指定 */

#comments_body tr{
  background-color:#D2EEF9; /* コメント欄の普段の色 */
  border-bottom:2px solid #fff;
  padding:0;
  margin:0;
}

#comments_body div.side_text a:hover{
  background-color:#B9E9FD; /* コメント欄にマウスが乗った時の色 */
  text-decoration:none;
}


/* トラックバックの色指定 */

#trackbacks_body tr{
  background-color:#D2EEF9; /* トラックバックの普段の色 */
  border-bottom:2px solid #fff;
  padding:0;
  margin:0;
}

#trackbacks_body tr:hover{
  background-color:#B9E9FD;  /* トラックバックにマウスが乗った時の色 */
}


/* その他の設定 */

div.side_text img{
  display:none;
}

#comments_body div.side_text{
  margin:0 0 0 4px;
  padding:2px 2px 2px 0;
}

#comments_body div.side_img{
  width:30px;
  margin:0;
  padding:2px 0 2px 2px;
}

#comments_body div.side_text a{
  padding:0;
  display:inline;
  line-height:1em;
  text-decoration:none;
  background:transparent;
}

#trackbacks_body{
  padding:4px 2px;
}

#trackbacks_body div.side_text{
  margin:0 0 0 4px;
  padding:2px 2px 2px 0;
  background-color:transparent;
}

#trackbacks_body div.side_img{
  width:30px;
  margin:0;
  padding:2px 0 2px 2px;
  background-color:transparent;
}

#trackbacks_body div.side_text a,
#trackbacks_body div.side_text a:hover{
  line-height:1.4em;
  display:block;
  background-color:transparent;
  text-decoration:none;
}

#trackbacks_body div.side_text a span{
  color:#555;
}

#links_body div.side_text{
  border-bottom:2px solid #fff;
  padding-right:2px;
}
#links_body div.side_text a img{
  vertical-align:middle;
  margin:2px;
}
</style>

<!-- サイドバーにもサムネイルモジュールここまで -->

その他の記事はカテゴリーの、スクリプト置き場や、目的別インデックスをご参照ください。


関連コンテンツ

スポンサーリンク

「サイドバーにもアバター表示モジュール」への26件のフィードバック

  1. >心の中で「Tomさんステキ!」と3回以上唱える。
    えー?
    けっこう使用条件厳しいなぁ笑。

  2. これ、50人リンクとか貼ってる人が使うとにぎやかで面白いよね♪
    うちは、コメント欄だけで、いいかな。
    Tomさんのぐるぐるフリーズとか、NARUさんとか
    やっぱり配慮されてるあたり、芸が細かい。

  3. 難易度を上げないと、ちょっと自分で考えればわかることまで質問する人が出てくるので、断腸の思いで決断しました。

  4. どうもこんばんは

    ブログを見させていただきました

    お互い価値あるブログの記事を書いていきましょうね

    良かったら私のブログにも遊びに来てください(o≧д≦)ノ

    無料のメルマガ配信もやっておりますので読者されませんか??

    暇なときに気軽に読めますよ

    それではまた遊びにきま~す(ノ・ω・)ノ

  5. どうもこんばんは

    ブログを見させていただきました

    お互い価値あるブログの記事を書いていきましょうね

    良かったら私のブログにも遊びに来てください(o≧д≦)ノ

    無料のメルマガ配信もやっておりますので読者されませんか??

    暇なときに気軽に読めますよ

    それではまた遊びにきま~す(ノ・ω・)ノ

  6. あげはのところのチョビさんも絵文字たくさん使ってたけど、こんな症状は出なかった。
    ファンブログは非表示に出来ず削除するしかない。
    症状を残しておきたいのでこのままにする。

  7. まあどうせこんなコメントは記事読まずにコピペしてるだけだろうから、
    コピペの方法に原因があるのか、
    全文真ん中あわせだとこういう症状がでるのか?

    ということで真ん中あわせ。

    ついでに絵文字たくさん

  8. 全文真ん中あわせのコメントがあるとこうなる。
    2回続けて真ん中合わせだと直るのか
  9. 全文真ん中あわせだとおかしくなるっぽい。
    生成されたHTMLを見ても異常はない。原因不明。

    ただし2コメント続けて、全文真ん中あわせだと2コメント目がおかしくなるが、
    その他のものは前のコメントも後ろのコメントも正常に直る。

  10. あとで、うちで右寄せテストもやってみよー。

    >お互い価値あるブログの記事を書いていきましょうね

    こないだ、すっごく似たコメント、他の人からもらったよ。
    流行ってるのかな笑。

  11. こんばんわ
    早速試してみました。

    上手く行ったみたいです。
    ありがとうござします。

    しまった!3番は心の中でじゃなく、口に出してしまいました(^_^;)

  12. Tomくんこそっと教えにくるから(笑)
    勘太さんちめっちゃ賑やかになってる
    うちは出来るとしたらコメント欄だけね

    >50人リンクとか貼ってる人が使うとにぎやかで面白いよね
    目がちかちかしたりして(笑)

    ちょっと落ち着いたらゆっくり見にこよ 笑

  13. こんばんは
    早速、使わせていただきます

    もちろん、使用条件もパスしてます(笑)
    ただ、最後の「Tomさんステキ!」て言うのは、「Tomさんすごい」になってました

    あと、最近記事の「縮尺記法を間違えていました」も読ませていただきましたが、
    Tomさんの記事は初心者にも分かりやすいと思いますよ

    結局は、自己責任の問題だと思うので、
    Tomさんは色々質問にこだわりすぐているんじゃないでしょうか?

    個人的には、分かりやすいし、すぐに使えて嬉しいです
    もし、これでブログが消えてもTomさんに文句は言わないのでこれからもよろしくお願いします

    ワザと、ブログが消えるようなソースなどは書かないでくださいね(笑)

  14. Tomさん、こんにちは!

    はじめまして^^*
    Tomさんすごい!ありがとう!と
    三回唱えさせていただきました(笑)
    ためになること満載で、早速
    ブックマークに入れさせていただきました

    またぜひ伺わせていただきマス^^

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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