カテゴリに新着「NEW」マークをつける
新着記事などに「New!!」マークをつけるカスタマイズはこれまでに記事のタイトル、最新記事、最新コメント、最新トラックバック、全記事一覧表示といろいろと行ってきましたが、カテゴリだけは新着表示できませんでした。
これはカテゴリで利用できる日付変数がFC2では用意されていないためでそれならしょうがないなぁと思っていましたが、たまたま検索していたらこれを実現している方のブログを発見、興味があり試してみました。
「Salad Days Rider」さんの「カテゴリやユーザータグのリストにも、「Newマーク」がほしいよね - fc2」の記事
その際に当ブログで実現するにあたり、手を加えて目標とするのは
・New!! に色を付ける
・現在利用している公式プラグインのカテゴリと同じデザインで実現する
としました。まずプラグインでフリーエリアを追加し、そこにコードを入れて調整。試行錯誤の結果、できたのが以下のコード。
<div id="newcat">
<!--category-->
<div &align>
<!--category_sub_hasnext-->┣<!--/category_sub_hasnext-->
<!--category_sub_end-->┗<!--/category_sub_end-->
<span class="normal" id="cat<%category_no>" &align><a href="<%category_link>" _fcksavedurl=""<%category_link>"" target="_top" name="<%category_no>" ><%category_name>(<%category_count>)</a></span>
</div>
<!--/category-->
</div><!--id="newcat"-->
<script type="text/javascript"><!--
var arySigned = new Array();
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='<font color="#FF1493" size="2">New!!</font>';
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-->
スクリプトの中身は私にはチンプンカンプンですが(苦笑)、一応デザイン崩れもないようだし(Firefox、IE6でも確認済)それなりに形になった。元のカテゴリのプラグインは表示オフに。
ただ、仕様で個別記事を開いている状態では現状1つしかNewマークがつきません。先の元記事ではその後のフォロー記事もあるのですが、試しに<!--recent-->を用いた方法にしてみたら新着記事一覧分のカテゴリ全部にNewがついてしまった。
ここは次回の課題です。
- 関連記事
-
- カテゴリプラグインのデザイン修正 (2009/12/25)
- FC2ユーザータグ検索とmetaタグの編集 (2009/12/25)
- カテゴリに新着「NEW」マークをつける (2009/12/23)
- JavaScriptを外部ファイル化する (2009/12/19)
- 各記事にお知らせページ内容を下部に表示させる (2009/12/19)
※見てくださった方々へ、、ご参考になれば幸いです。よろしければ「拍手」頂ければウレシイです
tag :日記 ブログレイアウト カスタマイズ 記事タイトル レイアウト変更 を行いました(2010.02.09)
記事に tag関連エントリの自動表示 を行うようにしました(2010.01.05) 伊東温泉・共同浴場10湯比較リスト 公開しました!(2009.12.20) 表示高速化のため、記事を要約して表示する方法へ変更しました(2009.12.13) 伊東温泉共同浴場温泉マップ 公開しました! ★全国駅前温泉リスト★ 随時更新中 (2010.8.17 更新) |