• 設定方法
• 文字色・文字サイズ・行間などの変更
• 点線の色を変更する
• 展開画像[+][-]の変更
• 展開画像[+][-]を非表示にする
• 右上の「<>」「+」「-」画像を非表示にする
• デザインスタイルをテンプレートに入れる
• jsファイルをhead要素内に移動させる
• 外部スクリプトを別サーバにアップする
• ご利用にあたって・更新履歴 2012 05-13
• コメント

設定方法

変更場所 ▼ メニュー[環境設定][ブログの設定][コメント設定][最新コメント表示]

　表示件数[　]件 で表示する数を指定します。

• 表示形式（日付・記事ごと）
• 新着マークの設定
• 最初から展開する日数（最も新しいコメントの投稿日からの日数分展開）
• 記事・日付ごとのテキスト表示形式
• 管理者向けテキスト表示形式（管理者の投稿のみ表示変更）

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

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

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!
┗投稿者の名前 : 記事タイトル

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

#recentC .newCmnt,#recentC .newCmnt:hover { /* new mark */
 margin: 0 0 0 3px !important;
 color: #ff0000; font-size: 11px;
}

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

#recentC .newCmnt,#recentC .newCmnt:hover { /* new mark */
  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' ,

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

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

　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 を指定します。

var 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 : 投稿者の名前

管理者向けテキスト表示形式

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

　不要な場合は 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)

• ▲

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

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

• 日付・記事タイトル（クリックするテキスト）の文字色の変更
• リンクの文字色、下線の変更
• 文字サイズの変更
• 行間の変更

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

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

#recentC .rctDate {  /* date */
  line-height: 1.5;
  cursor: pointer;
}

■文字色変更

#recentC .rctDate {  /* date */
  line-height: 1.5;
  color: #000000;
  cursor: pointer;
}

■文字サイズ変更

#recentC .rctDate {  /* date */
  line-height: 1.5;
  font-size: 13px;
  cursor: pointer;
}

■太字

#recentC .rctDate {  /* date */
  line-height: 1.5;
  font-weight: bold;
  cursor: pointer;
}

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

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

#recentC .rctDate:hover {
  color: #cc0000;
}

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

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

リンクの文字色、下線の変更

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

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

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

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

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

color: #000000 !important;

文字サイズの変更

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

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

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

font-size: 12px !important;

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

#recentC {
  font-size: 88%;
}

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

>div#recentC ul li {
  font-size: 100%;
  margin: 3px 0 !important;
}

行間の変更

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

#recentC ul,#recentC ul li {
  margin: 0 !important; padding: 0 !important;
  border: 0 none !important; display: list-item;
  min-height: 1px; line-height: 1.4 !important;  /* line-height */
  list-style-type: none !important;
  list-style-image: none !important;
  background: none;
  text-align: left;
}
#recentC .rctDate {		/* date */
  line-height: 1.5;
  cursor: pointer;
}
div#recentC 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#recentC li li.rcLast {
  padding: 0 0 1px 20px !important;
  background-position: 4px -311px !important;
}
div#recentC 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; /* この1行は削除します */
}
div#recentC li li.rcFirst {
  padding: 2px 0 2px 20px !important;
  background-position: 4px -2px !important;
}

• ▲

点線の色を変更する

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

　変更箇所は次のスタイルの comA の部分です。

div#recentC 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#recentC 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; /* この1行は削除します */
}

　#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

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

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

• ▲

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

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

 img : {
  on : true,
  op : 'http://blog-imgs-53.fc2.com/p/a/r/paro2day/plgrcop.gif', //　開いたとき
  cl : 'http://blog-imgs-53.fc2.com/p/a/r/paro2day/plgrccl.gif', // 閉じたとき
  wh : [18,12] // 画像のサイズ [横幅,高さ]
 }

[1] デフォルト - A - 18,12

op : 'http://blog-imgs-53.fc2.com/p/a/r/paro2day/plgrcop.gif',
cl : 'http://blog-imgs-53.fc2.com/p/a/r/paro2day/plgrccl.gif',
wh : [18,12]

　末尾に s をつけると四角になります。

op : 'http://blog-imgs-53.fc2.com/p/a/r/paro2day/plgrcops.gif',
cl : 'http://blog-imgs-53.fc2.com/p/a/r/paro2day/plgrccls.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#recentC 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#recentC li li.rcLast {
  padding: 0 0 1px 19px !important;
  background-position: 3px -311px !important;
}
div#recentC li li.rcFirstLast {
  padding: 2px 0 1px 19px !important;
  background-position: 3px -309px !important;
  background: url(http://blog-imgs-47.fc2.com/p/a/r/paro2day/comA.gif) 4px -309px no-repeat !important; /* この1行は削除します */
}
div#recentC li li.rcFirst {
  padding: 2px 0 2px 19px !important;
  background-position: 3px -2px !important;
}

• ▲

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

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

 img : {
  on : false,
  op : 'http://blog-imgs-53.fc2.com/p/a/r/paro2day/plgrcop.gif',
  cl : 'http://blog-imgs-53.fc2.com/p/a/r/paro2day/plgrccl.gif',
  wh : [18,12]
 }

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

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

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

• ▲

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

　次の箇所を削除します。

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

　元に戻すときは追加し直します。

• ▲

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

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

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

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

• ▲

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

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

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

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

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

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

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

• ▲

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

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

» recentC.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-42.fc2.com/p/a/r/paro2day/recentC.js" charset="utf-8"></script>

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

• ▲

ご利用にあたって

動作確認(Win) : IE6-9、Firefox2-3,12、Opera10、chrome4,18、Safari4

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

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

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

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

---

• 【更新履歴】
• 2012 05-13 - Comments+Trackbackと同じ形式に。必要であれば再ダウンロード。
• 2010 08-02 - 管理人からのコメントは、名前の代わりにコメントタイトルを表示するを追加。
• 2010 06-25 - 展開画像[+][-]の変更、投稿者名と記事タイトルのあいだのテキストを変更する、右上の「<>」「+」「-」画像の非表示を追加。
• 2010 06-17 - ファイルの上書き破損修正。
• 2010 06-16 - 公開。

• 【関連項目】
• Paroday - FC2ブログインフォメーション / プラグイン関連記事

関連記事

• ツイートを指定した件数ずつ表示するプラグイン　Twitter...A
• ツイートを表示するプラグイン　Twitter...
• 親子孫カテゴリプラグイン改良版 カテゴリに新着マークをつける
• 最新コメントのプラグイン『Comments...A』
• 親子孫カテゴリプラグイン「Categories...B」
• 親子カテゴリの展開と子カテゴリを孫カテゴリにするプラグイン
• 表示ページを指定のテンプレートで閲覧するFC2ブログプラグイン