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画面だと、インデントが邪魔ですね...(^_^;
コメント
私も(自分用に)ツールテンプレート作ったことありますけど
リストの代用にテンプレを使う、てのは思いつきませんでした。
( 知ってなきゃ IFRAME てわかりませんね )
でも、これって共有提供できないのが難点ですね。
参考にさせていただきました
次にカテゴリのNewマークの最適化の記事は自分には難しく実際どうすればよいのかよくわかりませんでした。
また<!--recent-->~の記事ですが、これは<!--topentry-->~の部分をそれに変えるということなのでしょうか。<%topentry_year>は<%recent_year>へとか。ただその場合<%topentry_category_no>はどうするのでしょうか。
このあたりでよくわからなくなってしまいました。
こんばんは。
主要コードの部分を、親テンプレートと子テンプレートに分けました。
この方法は、親テンプレート(またはプラグイン)と親テンプレート
のiframeから呼び出される子テンプレートから成り立ちます。
下も参考に
http://sdr200.blog113.fc2.com/?no=462
ここの「カテゴリー.」プラグインのコードを見てもらえると分かると思います。
親テンプレートは <div id="category">~</div>
子テンプレートの呼び出しは その下の<iframe class="work_frame" ...>~</iframe>になります。
親テンプレートで最新記事一覧(<!--recent-->~<!--/recent-->)から子テンプレート(を個別記事モード)で呼び出すのです。
それは、ご指摘どおり、最新記事一覧にカテゴリNoやユーザタグを返す変数がないために、(個別記事モードの)子テンプレートで変数を取得し、親のカテゴリー(orユーザタグ)リストに「New!!」を追記しているのです。
確認ですが、子テンプレートはブログ管理画面のテンプレートの作成を利用し子テンプレートの内容を記載するという認識でよろしいですか。<%ad> <%ad2>がないと更新できないですが。それとも通常利用しているテンプレにコード部分を付加するのでしょうか。
なにか自分自身で勘違いしているような気もしますが、どちらも試してみましたがNewがつかないし親テンプレート下部にブログタイトルやらイントロダクションが表示され動作が激重でした。
ここに記載しているのは主要コードですから、それ以外の部分(ヘッダや広告タグ)は必要になりますよ。
このblogのソースコードを見ていただければ、参考になると思います。
また、iframe部分はcssで非表示にすれば、見た目はスッキリするでしょう。
ただ残念ながら成功していません(現在元のままです)。
子テンプレートはこれでうまく動いているのではないかと思うのですが。
http://yassee.blog38.fc2.com/?template=sky_cube-091220_1&no=449
ただ表示が激重でカテゴリにNewマークがつきません。
違いを確認するためにはっさくさんのブログと比較してみました。
はっさくさんのカテゴリ部分では ULタグ中にカテゴリ名の下にScriptがついているのですが、私の方では該当部分がありません。
<script type="text/javascript"><!--
if ("61"=="0") {document.getElementById('cat46').style.display="none";}
//-->
というものなのですが、紹介されているコードにはない様に見受けられます。ここでつまづいています。
該当するカテゴリの記事が0件の場合に、表示させないようにするためのコードです。(fc2.comが始めから用意した「カテゴリ0」を隠したいときに使っています)
重くなるのは、fc2広告のスクリプトのためのようです。(iframe内ではIEでエラーになるようですし...)
さらに、「最新記事一覧」数だけiframeが作られるから、数倍になります。
動作を確認するためには、
iframeを表示するようにして、スクリプトにあるコメントをはずして、どの部分が実行されているかということを確認してみてください。
また、ブラウザのキャッシュをクリアしたリロード(ctrl+F5)で確認してみてください。
コメントの投稿