忍者ブログ
http://tsukikalab.blog.shinobi.jp/
Admin / Write / Res
<< 05   2017/06   1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30     07 >>


◆◆ INFORMATION ◆◆

忍者ブログ共有テンプレートを作成しています。
 プラグインにテンプレート一覧があります。
ご利用の際には、必ず<<はじめに>> <<利用規約>>をご覧ください。

 新作テンプレート作成中は、動作・表示確認を行うことがあるため、
レイアウトが崩れて表示される場合がありますがご了承ください。

 テンプレートについてのお問い合わせやご質問等は、
各記事のコメント欄かプラグインにあるメールフォームからどうぞ。


[13]  [12]  [10]  [9]  [7]  [5]  [4]  [3]  [34]  [1
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

プラグインコメント欄の、ツリー化スクリプトの挿入と、記事・コメントの新着マーク表示方法。
(忍者テンプレート用)

自分のための覚書です。(*^艸^)
あとは、何度でもコピペで使えますから楽ちんなのです♪
ちなみに、ニンブロラボ様 TMP*blog様の記事を参考にさせていただいております。

長いので、折りたたみます(o^∇^o)ノ

まず、以下のタグ(ツリー化)をhtmlの一番下 (/body)の真上に埋め込みます。

<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
 if (!objList.innerHTML) return;
 var objLink = objList.getElementsByTagName('a')[0];
 var linkUrl = objLink.getAttribute('href');
 if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
  var tmplinkUrl = linkUrl.split("#")
  var tmpText = objList.innerHTML.split("⇒");
  tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
  this.base = Array('<a href="',tmplinkUrl[0],'">',tmpText[0],'</a>').join('');
  this.elem = objLink.innerHTML;
 } else if (idName.indexOf('entry') > -1) {
  var tmpText = objList.innerHTML;
  tmpText.match(/\((\d\d\/\d\d)\)/);
  this.base = Array('[',RegExp.$1,']').join('');
  this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
 } else if (idName.indexOf('link') > -1) {
  var tmpText = objList.innerHTML;
  if ( tmpText.match(/\[(.+)\](.+)/) ) {
   this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
   this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
  }
 } else if (idName.indexOf('category') > -1) {
  var tmpText = objList.innerHTML;
  if ( tmpText.match(/\[(.+)\](.+)/) ) {
   this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
   this.elem = Array('<a href="',linkUrl,'">',RegExp.$2).join('');
  }
 }
 return this;
}
function createTreeList(idName,option) { // version 2.2
 var objFocus = this.document.getElementById(idName);
 if (!objFocus) return;
 if (!objFocus.innerHTML) return;
 var objLists = objFocus.getElementsByTagName('li');
 var linkList = new Array();
 var outText = new Array();
 if (objLists.length > 0) {
  for (i=0;i<objLists.length;i++) {
   var chckFlag = true;
   var elemText = new makeTreeElements(idName,objLists[i]);
   if (!elemText.base || !elemText.elem) return;
   for (j=0;j<linkList.length;j++) {
    if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
     chckFlag = false;
     linkList[j][linkList[j].length] = elemText.elem;
    }
   }
   if (chckFlag) {
    var tmpNum = linkList.length;
    linkList[tmpNum] = new Array();
    linkList[tmpNum][0] = elemText.elem;
    linkList[tmpNum].base = elemText.base;
   }
  }
  if (linkList.length > 0) {
   outText[outText.length] = '<ul>\n';
   for (i=0;i<linkList.length;i++) {
    outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
    if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
    for (j=0;j<linkList[i].length;j++) {
     outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
     outText[outText.length] = Array(linkList[i][j],option.leef).join('');
    }
    outText[outText.length] = Array(option.btm,'</li>').join('');
   }
   outText[outText.length] = '</ul>\n';
   objFocus.innerHTML = outText.join('');
  }
 }
}

var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '├'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '└'; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />\n'; /* 各枝の末尾 */
gTreeOption['top'] = '<br />\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */

createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption);    // エントリリストのツリー化
createTreeList('commentlist',gTreeOption);  // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption);       // 最新トラックバックリストのツリー化
createTreeList('linkslist',gTreeOption);     // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
// -->
</script>



次に、プラグインの最新コメント表示欄のCSSを変更します。
このテンプレートのように、返信済画像を使用せず管理者の名前を投稿者の下に表示し、なおかつ記事のアップ時に “UP♪” 新着コメントに “New♪ ”マークを表示させます。

プラグイン最新コメント編集画面を開き、以下のCSSをコピペで貼り付けます。
フォントの色は、お好みの色に変えて下さい。


<div class="plugin_data" id="commentlist">
<ul>
<!--plugin_comment-->
<li><font color="#ffffff"><!--$plugin_comment_entry_title--></font><br />⇒<a href="<!--$plugin_comment_link-->">&nbsp;<!--$plugin_comment_name-->&nbsp;(<!--$plugin_comment_mon-->/<!--$plugin_comment_day-->)&nbsp;&nbsp;<font color="#ff1493"><SCRIPT>newUp(<!--$plugin_comment_year-->,<!--$plugin_comment_mon-->,<!--$plugin_comment_day-->,"new")
</script></font></a></li>
<!--if_comment_res--><li><font color="#ffffff"><!--$plugin_comment_entry_title--></font><br />⇒<a href="<!--$plugin_comment_link-->">&nbsp;&nbsp;&nbsp;<font color="#333333"><!--$g_nickname--></font>&nbsp;&nbsp;<font color="#ff1493"><SCRIPT>newUp(<!--$plugin_comment_res_year-->,<!--$plugin_comment_res_mon-->,<!--$plugin_comment_res_day-->,"new")
</script></font></a></li><!--/if_comment_res-->
<!--/plugin_comment--></ul>
</div>


次に、プラグインの最新記事のCSSも以下に変えます。

<!--plugin_entry-->
<div class="plugin_data">
<a href="<!--$plugin_entry_link-->"><!--$plugin_entry_title--></a>&nbsp;(<!--$plugin_entry_mon-->/<!--$plugin_entry_day-->)&nbsp;&nbsp;&nbsp;<font color="#ff1493"><SCRIPT>newUp(<!--$plugin_entry_year-->,<!--$plugin_entry_mon-->,<!--$plugin_entry_day-->,"up")
</script></font>
</div>
<!--/plugin_entry-->


まだこれだけでは、“New” “Up” の文字は表示されませんので、最後に新着マーク表示用のスクリプトをhtmlに埋め込みます。
html上部の、(/head)の真上に以下のタグを埋め込みます。


<SCRIPT LANGUAGE="JavaScript">
<!--
// 一定期間New/Upマークを表示する
function newUp(y, m, d, c) {
delDay = 2; // 何日後に削除するか
oldDay = new Date(y + "/" + m + "/" +d);
newDay = new Date();
d =(newDay - oldDay) / (1000 * 24 * 3600);
if(d <= delDay) {
// Newマーク
if(c == "new") document.write("New&nbsp;!!");
// Upマーク
if(c == "up") document.write("Up&nbsp;!!");
}
}
//-->
</SCRIPT>
<style type="text/css">
<!--
body {
}
ul {
 list-style-image : url("画像のURL") ;
}
-->
</style>

スクリプト以下、スタイルシートを使った部分(着色部分)は、コメントエントリータイトル前に表示される画像の指定です。
必要ない場合は削除して下さって結構ですが、黒丸ポチがついてしまいます。
これは、リストマークタグによるものなのですが・・・
背景色ピンクの部分は、投降後何日新着マークを表示するかの数です。
お好みで変えて下さい。
ちなみにここでは、2日としています。
赤文字のURLは、リストマーク画像ですのでご自分のお好みのものに変えて下さい。


最後に、ツリー化することによって、プラグインに変な隙間ができることがありますが、それを防ぐためにもCSSを書き加えます。
CSSの一番下に以下のタグをコピペしてください。

div#newentrylist, div#linkslist, div#commentlist, div#tblist, div#categorylist{
list-style: none;
border:none; /*ボーダーを消す*/
background-image:none; /*背景画像を消す*/
background-color: transparent; /*背景色をなしに*/
margin: 0px; /*マージン消し*/
padding: 0px; /*パディング消し*/
}


長いですが、以上で終わりです。

 

拍手[2回]

PR
この記事にコメントする
Name
Title
Color
Mail
URL
Comment
Password   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
secret
Calendar
05 2017/06 07
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
New Entries
jewel (01/25)   
Σ(・Д・ノ)ノ アウッ  (10/17)   
twilight (06/13)   
green leaf 3 (06/04)   
Flower&Painting (05/27)   
Profile
  Author   :  月華
 about me  :  とにかくブルー好き 
精神的に落ち着く色らしい。。。(≧m≦)

OS    : Windows Vista ・ XP ・ Me
browser : IE 6 ・7 ・8
               Firefox 3.6.15
               Safari 5.0.4
               Google chrome 8.0.552.237



▼ リンクバナー


当ブログはリンクフリーです。
バナーは、右クリック → 保存 でお持ち帰りください。

Name : tsukika's lab
URL : http://tsukikalab.blog.shinobi.jp/
Master : 月華
Search in Blog
NeckDoll
Links
共有テンプレート作成で素材をお借りしているサイトさま (順不同)

写真素材 ハマ様 Kun

イラスト素材 真珠(まじゅ)様 Pearl Box

ナチュラル・レトロ素材 まりあ様 *MARIA

黒・白背景用イラスト素材 たかむらちはる様 Atelier Black/White

クリスタル素材 Anezaki様 Egg* Station
Bar Code
Copyright © 2008-2011  tsukika's lab All Rights Reserved.
*Material by Pearl Box  * Template by tsukika  * Powered by NINJA TOOLS
忍者ブログ [PR]