Paroday

Paroday：ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか？　yes

Comments+Trackback 最新コメントとトラックバック（日付・記事ごと）

Comments+Trackback

　最新コメントとトラックバックを日付・記事ごとに分けて展開するプラグインです。

　» プレビュー

　プラグインの設定 > 共有プラグイン追加 : 作者に [paro2day] を入れて検索

設定方法

　コメントの設定は comment : { 内を変更。トラックバックは trackback : { 内を変更します。

表示形式（日付・記事ごと）

　最初に閲覧したとき（初期状態）の表示形式を指定します。

entry : 1 ,  // 日付ごと
[-]2010-04-03
┗投稿者の名前 : 記事タイトル
┗投稿者の名前 : 記事タイトル
entry : 0 ,  // 記事ごと
[-]記事タイトル
┗投稿者の名前 (04/03)
┗投稿者の名前 (04/03)
新着マークの設定

　newHour には現在時刻からの経過時間を指定します。1日は24時間なので、2日なら 48 を入れます。

newHour : 48 ,  // 48時間以内のコメントにNewマークをつける
newHour : 24 ,  // 24時間以内のコメントにNewマークをつける

　新着マークを表示しない場合は 0 を入れます。

newHour : 0 ,  // 表示しない

　新着マークは newMark で指定します。

　テキストで表示するときは newMark に 'new!' ''などのテキストを入れます。

newMark : 'new!' ,
[-]2010-04-03
┗投稿者の名前 : 記事タイトル new!

┗投稿者の名前 : 記事タイトル

　テキストの色やサイズはスタイルの次の箇所を変更します。

#recentCT .newCmnt,#recentCT .newCmnt:hover {  /* 新着マーク */
  margin: 0 0 0 3px !important;
  color: #ff00aa; font-size: 10px;
}

　背景色を追加するときは次のようになります。paddingは必要なければ、不要。

#recentCT .newCmnt,#recentCT .newCmnt:hover {  /* 新着マーク */
  padding: 1px 2px; /* 上下・左右余白  */
  margin: 0 0 0 3px !important;
  color: #ffffff; font-size: 10px;
  background-color: #ff0000;
}
[-]2010-04-03
┗投稿者の名前 : 記事タイトル New
┗投稿者の名前 : 記事タイトル

　画像で表示するときは newMark に '画像アドレス' を入れます。

newMark : 'http://blog-imgs-1.fc2.com/i/image/e/78.gif' ,

┗投稿者の名前 : 記事タイトル new

最初から展開する日数（最も新しいコメントの投稿日からの日数分展開）

　openNum に展開する日数を指定します。

　例えば、4月5日から4日1日にかけて次のコメントが投稿されていたとします。

[-]2010-04-05
┗投稿者の名前 : 記事タイトル
┗投稿者の名前 : 記事タイトル
[-]2010-04-04
┗投稿者の名前 : 記事タイトル
[-]2010-04-03
┗投稿者の名前 : 記事タイトル
┗投稿者の名前 : 記事タイトル
[-]2010-04-02
┗投稿者の名前 : 記事タイトル
[-]2010-04-01
┗投稿者の名前 : 記事タイトル
openNum : 3 ,  // 3日分展開

　すると、5日から3日分が展開され、それ以降は閉じられます。

[-]2010-04-05
┗投稿者の名前 : 記事タイトル
┗投稿者の名前 : 記事タイトル
[-]2010-04-04
┗投稿者の名前 : 記事タイトル
[-]2010-04-03
┗投稿者の名前 : 記事タイトル
┗投稿者の名前 : 記事タイトル
[+]2010-04-02
[+]2010-04-01

　最初からすべて閉じるときは 0 を指定します。

openNum : 0 ,  // すべて閉じる
記事・日付ごとのテキスト表示形式

　それぞれの変数に名前や日付などが表示されます。

%n → 投稿者の名前
%e → 記事タイトル
%m → 投稿した月
%d → 投稿した日にち
%t → コメントのタイトル

　コメントのつけられた記事へのリンクは [a][/a] で挟みます。

　コメントタイトルは [t][/t] で挟みます。コメントタイトルが未入力の場合は、[t]内のテキストを表示しません。

  dfm : "[a]%n[t] : %t[/t][/a]" ,

[-]2010-04-05
┗投稿者の名前 : コメントタイトル
┗投稿者の名前

　dfm が日付ごとに表示したとき、efm が記事ごとに表示したときの形式です。

// sample1
  dfm : "[a]%n : %e[/a]" ,    //日付ごと
  efm : "[a]%n (%m/%d)[/a]" , //記事ごと

// sample1表示結果 日付ごと
[-]2010-04-05
┗投稿者の名前 : 記事タイトル
// sample1表示結果 記事ごと
[-]記事タイトル
┗投稿者の名前 (04/05)
// sample2
  dfm : "[a]%e : %n[/a]" ,    //日付ごと
  efm : "[a]%m-%d : %n[/a]" , //記事ごと

// sample2表示結果 日付ごと
[-]2010-04-05
┗記事タイトル : 投稿者の名前
// sample2表示結果 記事ごと
[-]記事タイトル
┗ 04-05 : 投稿者の名前

　トラックバックでは %t が トラックバック送信元の記事タイトルになります。

　送信元記事へリンクするには [tb][/tb] で挟みます。ただし、不適切なサイトにそのままリンクしてしまう可能性があるため、リンクする際にはトラックバックを承認制にすることを推奨します。

  dfm : "[a]%e[/a] : [tb]%t[/tb]" ,

[-]2010-04-05
┗トラバを受けた記事タイトル : 送信元記事タイトル
管理者向けテキスト表示形式

　管理者のみ記事タイトルの代わりにコメントタイトルを表示させるなどの変更ができます。

　不要な場合は owner を false にします。

  owner : false ,

　owner にはコメントで使用する名前を入れます。「"」を使う場合は「'」シングルを二つ並べるなどしてください。また、「//」「/*」などは使用できません。

  owner : "管理者の名前" ,

　ただし、同じ名前で投稿されると、その投稿者のコメントも管理者向け表示になります。これを防ぐ場合は、 owner に 1 を入れます。「"」は不要です。

  owner : 1 ,

　そうすると管理画面からのコメント返信（太字などの装飾が必要）のみ管理者向け表示になります。

　odfm が日付ごとに表示したとき、oefm が記事ごとに表示したときの形式です。指定の方法については一般のテキスト表示形式と同じです。

  odfm : "[a]%n : %e[/a][t] : %t[/t]" ,  //日付ごと
  oefm : "[a]%n[t] : %t[/t] (%m/%d)[/a]" //記事ごと
[-]2010-04-05
┗管理者の名前 : 記事タイトル : コメントタイトル
[-]記事タイトル
┗管理者の名前 : コメントタイトル (04/05)
コメント・トラックバックの初期表示

　初期表示をコメントプラグインにするときは ds を 0 にします。

ds : 0 ,

　初期表示をトラックバックプラグインにするときは ds を 1 にします。

ds : 1 ,

　コメントとトラックバックを両方表示するときは ds を 2 にします。

ds : 2 ,

文字色・文字サイズ・行間などの変更

　ある程度はリセットしていますが、文字サイズなどは利用しているテンプレートによります。各スタイルやその優先順位を把握している場合は、不要なプロパティや「!important」を削除してください。

日付・記事タイトル（クリックするテキスト）の文字色の変更

　次のスタイルに color などを加えます。

#recentCT .rctDate { /* 日付 */
  line-height: 1.5;
  cursor: pointer;
}

■文字色変更

#recentCT .rctDate { /* 日付 */
  line-height: 1.5;
  color: #000000;
  cursor:pointer;
}

■文字サイズ変更

#recentCT .rctDate { /* 日付 */
  line-height: 1.5;
  font-size: 13px;
  cursor: pointer;
}

■太字

#recentCT .rctDate { /* 日付 */
  line-height: 1.5;
  font-weight: bold;
  cursor: pointer;
}

　変わらないときは !important をつけます。

color: #000000 !important;
font-size: 13px !important;

■カーソルをあわせたときの文字色変更

　次のスタイルをstyle要素やテンプレートのスタイルシート内に加えます。

#recentCT .rctDate:hover {
  color: #cc0000;
}
リンクの文字色、下線の変更

　次のスタイルをstyle要素やテンプレートのスタイルシート内に加えます。

#recentCT li a:link,#recentCT li a:visited {
  color: #333333;
  text-decoration: none !important;  /* 下線なし */
}
#recentCT li a:hover {
  color: #ee0000;
  text-decoration: none !important;  /* 下線なし */
}

　下線をつける場合は underline に変更します。

text-decoration: underline !important;  /* 下線あり */

　変わらないときは !important をつけます。

color: #000000 !important;
文字サイズの変更

　次のスタイルに font-size を加えます。

div#recentCT ul li {
  margin: 3px 0 !important;
  font-size: 12px;
}

　変わらないときは !important をつけます。

font-size: 12px !important;

　「%」で指定する場合は次のコードをstyle要素やテンプレートのスタイルシート内に追加します。

#recentCT {
  font-size: 88%;
}

　文字サイズが正しく反映されないときは次のスタイルに font-size: 100%; を加えます。

div#recentCT ul li {
  margin: 3px 0 !important;
  font-size: 100%;
}
行間の変更

　テンプレートにあわせて各値を適当に変更してください。「-」がついている値は1pxずつ増減させて調整します。

#recentCT ul,#recentCT ul li {
  margin: 0 !important; padding: 0 !important;
  border: 0 none !important; display: list-item;
  line-height: 1.4 !important;	/* 行間 */
  list-style-type: none !important;
  list-style-image: none !important;
  background: none;
  text-align: left;
  min-height: 1px;
}
#recentCT .rctDate {  /* 日付 */
  line-height: 1.5;
  cursor: pointer;
}
div#recentCT li ul li {
  margin: 0px !important;
  padding: 1px 0 2px 20px !important;
  background: url(http://blog-imgs-47.fc2.com/p/a/r/paro2day/comA.gif) 4px -3px no-repeat !important;
  font-size: 100% !important;
}
div#recentCT li li.rcLast {
  padding: 0 0 1px 20px !important;
  background-position: 4px -311px !important;
}
div#recentCT li li.rcFirstLast {
  padding: 2px 0 1px 20px !important;
  background-position: 4px -309px !important;
}
div#recentCT li li.rcFirst {
  padding: 2px 0 2px 20px !important;
  background-position: 4px -2px !important;
}

点線の色を変更する

　こちらで用意しているのは #000 #333 #666 #999 #ccc #fff とデフォルト色の計7色です。

　変更箇所は次のスタイルの comA の部分です。2箇所とも変更します。

div#recentCT li ul li {
 margin: 0px !important;
 padding: 1px 0 2px 20px !important;
 background: url(http://blog-imgs-47.fc2.com/p/a/r/paro2day/comA.gif) 4px -3px no-repeat !important;
 font-size: 100% !important;
}

div#recentCT li li.rcFirstLast {
 padding: 2px 0 1px 20px !important;
 background-position: 4px -309px !important;
 background: url(http://blog-imgs-47.fc2.com/p/a/r/paro2day/comA.gif) 4px -309px no-repeat !important;
}

　#000000

http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAbk0.gif

　#333333

http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAbk3.gif

　#666666

http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAbk6.gif

　#999999

http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAbk9.gif

　#cccccc

http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAbkc.gif

　#ffffff

http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAbkf.gif

展開画像[+][-]の変更

　img 内の「op」「cl」「wh」の値を変更します。

 img : {
  ds : 0 , //初期表示 comment 0 | trackback 1 | 両方 2
  on : true,
  op : 'http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAsopen.gif', //　開いたとき
  cl : 'http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAsclose.gif', // 閉じたとき
  wh : [14,12] // 画像のサイズ [横幅,高さ]
 }
[1] デフォルト - A - 14,12
op : 'http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAopen.gif',
cl : 'http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAclose.gif',
wh : [14,12]

　A の後に s をつけると四角になります。

op : 'http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAsopen.gif',
cl : 'http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAsclose.gif',
[2] Categories...画像 - Ai1 - 29,13
op : 'http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAi1open.gif',
cl : 'http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAi1close.gif',
wh : [29,13]

　Ai の後に s をつけると四角になります。

op : 'http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAis1open.gif',
cl : 'http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAis1close.gif',

[2]を利用する場合は、スタイルの次の箇所も変更するといいかもしれません。

div#recentCT li ul li{
 margin: 0px !important;
 padding: 1px 0 2px 19px !important;
 background: url(http://blog-imgs-47.fc2.com/p/a/r/paro2day/comA.gif) 3px -3px no-repeat !important;
 font-size: 100% !important;
}
div#recentCT li li.rcLast{
 padding: 0 0 1px 19px !important;
 background-position: 3px -311px !important;
}
div#recentCT li li.rcFirstLast{
 padding: 2px 0 1px 19px !important;
 background-position: 3px -309px !important;
}
div#recentCT li li.rcFirst{
 padding: 2px 0 2px 19px !important;
 background-position: 3px -2px !important;
}

展開画像[+][-]を非表示にする

　img 内の on の値を false に変更します。戻すときは true 。

 img : {
  ds : 0 , //初期表示 comment 0 | trackback 1 | 両方 2
  on : false,
  op : 'http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAopen.gif',
  cl : 'http://blog-imgs-47.fc2.com/p/a/r/paro2day/comAclose.gif',
  wh : [14,12]
 }

　そして、次のスタイルをstyle要素やテンプレートのスタイルシート内に加えます。0.7 は左側の余白です。0.6 や 0.8 など数値を増減させて横位置を調整します。

#recentCT ul ul {
  margin: 0 0 0 0.7em !important;
}

　画像がなくなるため、日付・記事タイトル（クリックするテキスト）の文字色の変更でクリックするテキストの文字色などを強調した方がいいかもしれません。

右上の「<>」「+」「-」画像の非表示

　次の箇所を削除します。二箇所あります。

<span class="rctSwitch">&lt;&gt;</span>
<span class="rctOpen" title="open">+</span>
<span class="rctClose" title="close">-</span>

「Comments」「Trackback」ボタンの色やテキストなどを変更する

　colorとbackground部分で文字色と背景色を変更します。rctHoverのcolorは選択時の背景色です。

#recentCm,#recentTb {
 padding: 2px 4px;
 position: relative; line-height: 1.1;
 color: #ffffff; background: #aaaaaa;	/* color */
 font-size: 10px; font-family: arial;
 cursor: pointer;
}
#recentCT .rctHover { background: #333333; }	/* color */

Comments

Trackback

color: #ffffff; background: #66aacc;

#recentCT .rctHover { background: #ee9900; }

　文字サイズは 10px 。フォントは arial の部分を変更します。

　表示テキストを変更するときは次の箇所を変更します。

コメント

トラバ

<span id="recentCm">コメント</span>

<span id="recentTb">トラバ</span>

「＜＞」「+」「-」ボタンの色や位置を変更する

　background の#0099cc の部分で背景色を変更します。

#recentCT .rctSwitch {	/* ＜＞ */
 right: 34px;
 background: #0099cc url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/recentCTbtn.gif) left top no-repeat;
}
#recentCT .rctClose {	/* - */
 right: 2px;
 background: #0099cc url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/recentCTbtn.gif) -32px top no-repeat;
}
#recentCT .rctOpen {	/* + */
 right: 18px;
 background: #0099cc url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/recentCTbtn.gif) -16px top no-repeat;
}

　カーソルを合わせたときの背景色は 次の部分で変更します。

#recentCT .rctOpen:hover,#recentCT .rctClose:hover,#recentCT .rctSwitch:hover {
 background-color: #ff9900 !important;	/* color */
}

　位置を微妙に移動させるときは、次のスタイルの top と right を調整します。top は上からの距離。right は右からの距離です。

#recentCT .rctOpen,#recentCT .rctClose,#recentCT .rctSwitch {
 position: absolute; top: 0px; display: block;
 width: 17px; height: 13px; overflow: hidden;
 color: #ffffff;		/* color */
 cursor: pointer; text-align: left; text-indent: -100px;
}
#recentCT .rctSwitch {	/* color */
 right: 34px;
 background: #0099cc url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/recentCTbtn.gif) left top no-repeat;
}
#recentCT .rctClose {	/* color */
 right: 2px;
 background: #0099cc url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/recentCTbtn.gif) -32px top no-repeat;
}
#recentCT .rctOpen {	/* color */
 right: 18px;
 background: #0099cc url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/recentCTbtn.gif) -16px top no-repeat;
}

「＜＞」「+」「-」ボタンの枠線の色（画像）を変更する

　スタイルの .rctSwitch .rctClose .rctOpen の画像アドレスを変更します。色を統一させるときは3箇所すべてを同じにします。

//デフォルト
background: #0099cc url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/recentCTbtn.gif)

　こちらで用意しているのは以下の6色（+文字白6色）です。背景色は # 部分で変更します。

http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtn000.gif
http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtnw000.gif
http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtn666.gif
http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtnw666.gif
http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtnccc.gif
http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtnwccc.gif
http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtn39c.gif
http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtnw39c.gif
http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtn9c3.gif
http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtnw9c3.gif
http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtnc33.gif
http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtnwc33.gif

ボタン画像

background: #aaaaaa url(http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtnw666.gif) left top no-repeat;

　色を変更しない画像 a , b を利用する場合は次の変更を行います。

ボタン画像

　画像a（3箇所すべて同じファイルを指定、背景色は削除）

background: url(http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtna.gif) left top no-repeat;

　画像b（3箇所すべて同じファイルを指定、背景色は削除）

background: url(http://blog-imgs-10.fc2.com/p/a/r/paro2day/recentCTbtnb.gif) left top no-repeat;

　その直後にある次のコードを削除します。

#recentCT .rctOpen:hover,#recentCT .rctClose:hover,#recentCT .rctSwitch:hover {
 background-color: #ff9900 !important;
}

デザインスタイルをテンプレートに入れる

　 <style type="text/css"> ～ </style> というコードがあります。これを利用しているテンプレートのスタイルシート編集欄に入れます。

　/* Comments+Trackback */ から /* Comments...T END */ までのスタイルをスタイルシート欄に移動させます。

　プラグイン内の <style type="text/css"> </style> 部分を削除します。

jsファイルをhead要素内に移動させる

　プラグインHTMLの最初にある次のコードを削除します。

<script type="text/javascript" src="https://blog-imgs-46.fc2.com/p/a/r/paro2day/recentCT.js" charset="utf-8"></script>

　テンプレートのHTML編集で head要素 の中に削除したコードを入れます。

<head>
...
<script type="text/javascript" src="https://blog-imgs-46.fc2.com/p/a/r/paro2day/recentCT.js" charset="utf-8"></script>
</head>
<body>

　テンプレートにすでに外部jsファイルが使われている場合は、そのjsファイルを編集して、ファイルの中身 // Author Paroday ～ のコードを貼り付けて、上書きアップロードします。

　他のテンプレートページ（/?template=hoge）でも表示する場合はそのテンプレートのhead要素内にも加える必要があります。移動させない場合は必要ありません。

外部スクリプトを別サーバにアップする

　下記リンクを右クリックして、保存。アップロードします。

» recentCT.js

　アップロードが完了したら、ファイルのアドレスを次のコードの中に入れます。

<script type="text/javascript" src="ファイルのアドレス" charset="utf-8"></script>

　出来上がったコードをテンプレートのHTML編集で head要素 の中に入れます。

<head>
...
<script type="text/javascript" src="ファイルのアドレス" charset="utf-8"></script>
</head>
<body>

　プラグインHTMLの最初にある次のコードを削除します。

<script type="text/javascript" src="https://blog-imgs-46.fc2.com/p/a/r/paro2day/recentCT.js" charset="utf-8"></script>

　テンプレートにすでに外部jsファイルが使われている場合は、そのjsファイルを編集して、ファイルの中身 // Author Paroday ～ のコードを貼り付けて、上書きアップロードします。

ご利用にあたって

動作確認(Win) : IE8、Firefox3、Opera11、Chrome10、Safari5

　質問や不具合・要望などはコメントか@parodayにお願いします。動作や表示がおかしいときは、利用しているテンプレートやブログアドレスなどの情報があると解決するかもしれません。

  • 【利用規約】
  • 改造、使用画像の別サーバへのアップロードはOKです（著作権などは放棄しておりません）。
  • noscript要素（作者リンク）は別の場所に移動させたり、削除することができます。
  • ただし、スクリプトコード内の作者表記「Author Paroday(c)～」は削除しないでください。外部ファイルにコードを移す場合も同様です。
  • 再配布は原則禁止です。カスタマイズ後も含みます。

申請できるのはオリジナルのものに限られます。他所で配布されていたり、掲載されているコードを利用することは認められません。

自作を共有プラグインに登録する

  • 【更新履歴】
  • 2011 04-29 - IEでコメント・トラックバック両方を表示したときのずれを修正。[説明文訂正]『entry : 1』で日付表示。『entry : 0』で最初から記事ごとに分けて表示です。
  • 2011 04-25 - プラグイン公開。
関連記事