プロフィール.

はっさく

Author:はっさく メモ

カレンダー.

カテゴリー.

  • SDR(64)
  • FZ6(21)
  • Udon(78)
  • etc(45)
  • Enjoy(94)
  • Entertainment(136)
  • Gadget(27)
  • Mac(18)
  • Personal(9)
  • motoGP(9)
  • 未分類(0)
  • FC2(38)
  • FC2 プラグイン・サポート(14)
  • お引越しツール20080312(本当は未分類)(3)
  • ブログ(20080312インポート使用)(3)
  • 検索結果(0)

サブカテゴリー.

最近のコメント.

リンク.

携帯は こちらから.

QRコード
メールで友達に教える
(携帯ブラウザで開きなおすにも....)
fc2 icon
Newマークがあると、鮮度がいいブログにみえていいよね?...www

コメントにつける方法は、すでにありまして、ツリー(共有プラグイン「Tree-Comment」by daniel氏)+Newマーカー(共有プラグイン「NewMark」by daniel氏)で実現できます。

最近投稿されたエントリーの一覧 (<!--recent-->~ <!--/recent-->) やBenriNaviになら、クラスを定義してやれば、NewMarkで簡単にマークが付加できます。

しかし、カテゴリー一覧(<!--category-->~ <!--/category-->)や ユーザータグ一覧(<!--ctag-->~ <!--/ctag--> とか)には、日付情報はありません。

そこで、前回にひきつづき、『専用テンプレートを、iframe内に表示する構造』の出番です。

iframe内のページを、こんな感じでつくります。
・indexページで、記事毎に、その日付とカテゴリー(/ユーザータグ)をセットで取得します。
・取得した日付が、new条件を満たすなら、該当するカテゴリー(/ユーザータグ)一覧からそれを探し出します。
・見つかれば、Newマークを付加します。
・マークが重ならない工夫をほどこせば...完成。

基本構造は、danielさん作のNewMarkやnw()にインスパイヤというリソース利用です。いつもお世話なってます。m(_~_)m

実は一番大変だったのは、ブラウザごとに文字サイズやらiframe幅とかがバラバラで、その調整が大変でした。

●IEのTips
iframeの枠は、cssでは消せない。「frameborder="0"」が必要。

●SafariのTips
リスト(li)にmargin:0;padding:0;を入れないと、マーカーの左に空白が入る。
bodyにmargin:0;padding:0;を入れないと、少し内側から描画はじめます。

以下に、各主要部のコードを置いておきます。

カテゴリー版
親テンプレート
<div  id="newcat">
<ul class="category_list">
  <!--category-->
  <li class="normal" id="cat<%category_no>"><a href="<%category_link>" target="_top" name="<%category_no>" ><%category_name>(<%category_count>)</a></li>
  <!--/category-->
</ul>
</div><!--id="newcat"-->
<script type="text/javascript"><!--
var arySigned = new Array();
//--></script>
<!--recent-->
<iframe src="./?template=子テンプレート名&no=<%recent_no>" class="work_frame"  frameborder="0" >category</iframe>
<!--/recent-->

子テンプレート
<script type="text/javascript"><!--
function nwCat(argCatAreaId,argCatNo,argY,argM,argD,argH) {
  var today=new Date();
  var nt=24; var c=new Date(argY,argM-1,argD,argH);
  if (today-c<3600000*nt) {
    if(0<argCatAreaId.length){
      var area=document.getElementById(argCatAreaId);
      var anchor=area.getElementsByTagName('a');

      for(var i=0;i<arySigned.length;i++){
        if (argCatNo == arySigned[i]){
          return;
        }
      }
      for(var i=0;i<anchor.length;i++){
        if (argCatNo == anchor[i].name){
          var elmSign = document.createElement('span');
          elmSign.className='newitem';
          elmSign.innerHTML='New!!';
          anchor[i].parentNode.appendChild(elmSign);
          arySigned.push(argCatNo);
          break;
        }
      }
    }
  }
}//-->
</script>

<!--topentry-->
<script type="text/javascript"><!--
nwCat('newcat',<%topentry_category_no>,<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>);
//-->
</script>
<!--/topentry-->


ユーザータグ版は、こちら
親テンプレート
<div id="newusertag">
<ul id="feature_tag" class="tag_list">
<li>■■■</li>
<li class="normal"><a target="_top" href="./?tag=●●" name="●●">●●</a></li>
<li class="normal"><a target="_top" href="./?tag=▲▲" name="▲▲">▲▲</a></li>
</ul>
</div><!--newusertag-->

<script type="text/javascript"><!--
function adCount(ID) {
 var elmParent=document.getElementById(ID);
 if ( elmParent ){
   var A=elmParent.getElementsByTagName("A");
   var T=new Array(); var C=new Array(); var K=0;
   <!--ctag-->T[K]="<%ctag_name>";C[K]="<%ctag_count>";K++;<!--/ctag-->
   var S='';
  <!--tag_area-->S='<%sub_title>';<!--/tag_area-->
   for(i=0;i<A.length;i++){
    <!--tag_area-->
    if(S==A[i].innerHTML){ele=A[i].parentNode.className='selected ';};
    <!--/tag_area-->
    for(j=0;j<K;j++){
      if(T[j]==A[i].innerHTML){ A[i].innerHTML+=(' ('+C[j]+')');break;
} } } } }
adCount('feature_tag');
//--></script>
<script type="text/javascript"><!--
var arySignedUsertag = new Array();
//--></script>
<!--recent-->
<iframe src="./?template=子テンプレート名&no=<%recent_no>" class="work_frame" frameborder="0" >usertag </iframe>
<!--/recent-->

子テンプレート
<script type="text/javascript"><!--
function nwUsertag(argAreaId,argUsertags,argY,argM,argD,argH) {
  var today=new Date();
  var nt=24; var c=new Date(argY,argM-1,argD,argH);
  if (today-c<3600000*nt) {
    var aryUt = new Array();
    aryUt = argUsertags.split(' ');
  
    if(0<argAreaId.length && 0<aryUt.length){
      var area=document.getElementById(argAreaId);
      var anchor=area.getElementsByTagName('a');
      for(var j=0;j<aryUt.length;j++){
        var aUt=aryUt[j];
        if(aUt.length==0)continue;
        var bSigned=0;
        for(var i=0;i<arySignedUsertag.length;i++){
          if (aUt == arySignedUsertag[i]){
            bSigned=1;
          }
        }
        if(bSigned==0){
          for(var i=0;i<anchor.length;i++){
            if (aUt == anchor[i].name){
              var elmSign = document.createElement('span');
              elmSign.className='newitem';
              elmSign.innerHTML='New!!';
              anchor[i].parentNode.appendChild(elmSign);
              arySignedUsertag.push(aUt);
              break;
            }
          }
        }
      }
    }
  }
}//-->
</script>


<!--topentry-->
<script type="text/javascript"><!--
nwUsertag('newusertag','<!--tag_list--><%topentry_tag_list_name> <!--/tag_list-->',<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>);
//-->
</script>
<!--/topentry-->

blog画面だと、インデントが邪魔ですね...(^_^;


[広告]

コメント

参考にさせていただきました

  • やっすぃぃぃー
  • URL
  • 2009/12/23
  • 編集 ]

  • はっさく
  • URL
  • 2009/12/24
  • 編集 ]

  • やっすぃぃぃー
  • URL
  • 2009/12/24
  • 編集 ]

  • はっさく
  • URL
  • 2009/12/24
  • 編集 ]

  • やっすぃぃぃー
  • URL
  • 2009/12/25
  • 編集 ]

  • はっさく
  • URL
  • 2009/12/28
  • 編集 ]

コメントの投稿



管理者にだけ表示を許可する

トラックバック

カテゴリに新着「NEW」マークをつける

新着記事などに「New!!」マークをつけるカスタマイズはこれまでに記事のタイトル、最新記事、最新コメント、最新トラックバック、全記事一覧表...