livedoor ナレッジ

新着記事カテゴリに「Update！」マークを入れるのは？

新しく記事を投稿した際に、その記事のカテゴリ名の横に、「Update！」というオレンジ色の文字をフラッシュ（点滅）で入れたいのですが…　CSSやHtmlにはあまり詳しくないので無謀な希望かもしれませんが、もし可能であればどなたかやり方を教えていただけると幸いです。

スタイルシートに以下の部分を追加

/* BLINK */
span.blink {
	color:orange;
	background-color:white;
}
span.blink_off {
	color:white;
	background-color:black;
}

blink の設定は、通常表示されるスタイル
blink_off については、
上記は反転するようなスタイル

visivility:hide;

にすると表示が消えます。
設定してスタイルシートの再構築をします。

トップページのテンプレートで

</IfArticleCategory>

の後に

<script type="text/javascript"><!--
(function(){
var LimitHour = 24; //２４時間 
var y = parseInt("<$ArticleDateTag$>".substr(0,4));
var m = parseInt("<$ArticleDateTag$>".substr(4,2))-1;
var d = parseInt("<$ArticleDateTag$>".substr(6,2));
var h = parseInt("<$ArticleTime$>".substr(0,2));
var mt= parseInt("<$ArticleTime$>".substr(3,2));
var checkDate = new Date(y, m, d, h, mt, 0, 0);
var LimitDate = new Date(); //今日現在
LimitDate.setTime(LimitDate.getTime() - LimitHour*3600*1000); //指定時間前
if(checkDate > LimitDate){//LimitHour 過ぎていない
    document.write('<span class="blink">Update!<\/span>');
}
})();
// -->
</script>
<noscript><BLINK style="color:orange">Update!</BLINK></noscript>

を挿入。

<!-- Loop End -->
の後に

<script type="text/javascript"><!--
function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (var i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}
function Blink(){
    this.time_id = null;
    this.interval = 0.8;
    this.on = true;
    this.elements = getElementsByClass('blink');
}
Blink.prototype.blinking = function(self){
    var n = self.elements.length;
    for(var i=0;i<n;i++){
        if(self.on){
            self.elements[i].className=self.elements[i].className.replace(/blink/, 'blink_off');
        } else {
            self.elements[i].className=self.elements[i].className.replace(/blink_off/, 'blink');
        }
    }
    self.on = !self.on;
};
Blink.prototype.start = function(){
    if(this.elements.length)
        this.time_id=setInterval(this.blinking, this.interval * 1000, this);
};
Blink.prototype.stop = function(){
    clearInterval(this.time_id);
};
var blink1 = new Blink();
if(/*@cc_on!@*/false){
    if(blink1.elements.length)
        blink1.time_id=setInterval('blink1.blinking(blink1)', blink1.interval * 1000);
} else {
    blink1.start();
}
//-->
</script>

を挿入
トップページの再構築

とりあえず、修正してみました。

<!-- Loop Start -->

の前に

<script type="text/javascript"><!--
var categories = [ ];
//-->
</script>

を追加する
回答３の

if(checkDate > LimitDate){
    document.write('<span class="blink">Update!<\/span>');
}

の部分を

if(checkDate > LimitDate){
    document.write('<span class="blink">Update!<\/span>');
    categories["<$ArticleCategory1Url$>"]=1;
    categories["<$ArticleCategory2Url$>"]=1;
}

に修正する。
記事にUpdate!を付けない場合は

document.write('<span class="blink">Update!<\/span>');

の行は削除

回答４のスクリプトを
<!-- Loop End -->の後から

<div id="footer"></div>

の前に移動
そして、

function Blink(){

の前に以下を挿入

var categorie_plugin_title = "Categories";
var links_top = document.getElementById('links');
var sideTitle = getElementsByClass('sidetitle', links_top, 'div');
var side      = getElementsByClass('side', links_top, 'div');
var size = sideTitle.length;
var pos ;
for(pos = 0;pos < size;pos++){
    if(sideTitle[pos].firstChild.nodeValue == categorie_plugin_title){
        break;
    }
}
if(pos < size){
    var sidebodys = getElementsByClass('sidebody', side[pos], 'div');
    size = sidebodys.length;
    var span = document.createElement("span");
    var text = document.createTextNode("Update!");
//  document.createAttribute("class");
//  span.setAttribute("class","blink");
    span.className = "blink";
    span.appendChild(text);
    for(var x in categories){
        for(var i=0;i<size;i++){
            if(sidebodys[i].firstChild.href == x){
                sidebodys[i].insertBefore(span.cloneNode(true), sidebodys[i].firstChild);
                break;
            }
        } 
    }
}