FC2ブログのテンプレート工房

HTMLの<!--topentry-->～<!--/topentry-->内の任意の場所に、下記の記述を加えてください。

<a href="javascript:;" onclick="javascript:window.open('http://blogvote.fc2.com/pickup/<%blog_id>/<%topentry_no>/clap');" ><img src="<%server_url>image/w-button.gif" width="18" height="18" style="vertical-align:middle; border:none;" alt="この記事に拍手する" /></a>

別窓ではなく、同窓で開きたい場合は target="_blank" を削除してください。

【2009/12/03 追記】

target="_blank"があるとバグを起こしてしまうようなので削除しました。

上のはの画像を表示させるものなので、などの横長のものを使用する場合は下記の記述になります。

<a href="javascript:;" onclick="javascript:window.open('http://blogvote.fc2.com/pickup/<%blog_id>/<%topentry_no>/clap');" ><img src="<%server_url>image/○○" width="80" height="18" style="vertical-align:middle;" alt="この記事に拍手する" /></a>

○○の部分に入れる文字は画像により異なります。お好みの画像名を入れてください。
w-white.gif
w-black.gif
w-blue.gif
w-green.gif
w-orange.gif
w-pink.gif
w-red.gif

二重表示になってしまうので、管理画面から設定する拍手ボタンは「なし」にしてください。
管理ページ→ブログ拍手の管理→拍手ボタンの設定→拍手ボタンの表示→なし

Another HTML-lint(文法チェック)ではエラーが出ますので、気にされる場合はFC2拍手に登録されたほうが良いかと思います。
FC2拍手に登録している場合はそちらの『拍手タグの作成(ブログ用記事別)』からタグを取得して下さい。

例えば、「なんでもスクロール」のHTMLには次のような箇所があります。

<div style="
height:100px; /* スクロールの高さはこの数値を変えて設定してください */
overflow:auto;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#cccccc;
scrollbar-shadow-color:#cccccc;
scrollbar-track-color:#ffffff;">

※スクロールさせる文字やプラグインのHTMLをここに加えてください。

</div>

各スタイル設定の該当箇所は、下の図のようになります。



お好みの色に設定してください。

このカスタマイズをする前に、横カレンダーを実装していることが前提になります。

ブログタイトル下に横カレンダーを入れる

このHTMLに次の赤い箇所を加えてください。

<!--▼ 横カレンダー ▼-->
<div class="line_calendar" id="line_calendar">
<a href="<%prev_month_link>"><%prev_year> <%prev_month></a>
≪
<!--calender2-->
<span class="line_cal_day"><%days></span>
<!--/calender2-->
≫
<a href="<%next_month_link>"><%next_year> <%next_month></a>
</div>
<!--▲ 横カレンダー ▲-->

そしてHTMLの</body>の上に、以下の記述を加えてください。

<script type="text/javascript"><!--
function line_calendarToday() {
var D=new Date();
var T=">"+D.getDate()+"<";
if (D.getFullYear()==<%now_year> && D.getMonth()==<%now_month>-1){
var C=document.getElementById("line_calendar").getElementsByTagName("span");
for (i=0;i<C.length;i++) {
if ( C[i].innerHTML.indexOf(T)>-1 || C[i].innerHTML == D.getDate() ) {

/* ▼横カレンダーの「当日」のスタイル▼ */
C[i].style.background="#ffd700"; /* 背景色 */
C[i].style.border="solid 1px #ffa500"; /* 枠 (実線、太さ、色) */
C[i].style.color="#8b0000"; /* 文字の色 */
C[i].style.padding="1px"; /* 文字から枠までの余白 */
/* ▲横カレンダーの「当日」のスタイル▲ */

}}}}
line_calendarToday();
//--></script>

背景色等の各スタイルはお好みに合わせて設定してください。
スタイル設定が不必要なものがあれば、その行を削除してください。

このカスタマイズによりカレンダーを見て今日が何日なのか解りやすくなると思います。

【2009/09/25 追記】

上記 javascriptを訂正しました。当日に記事を書くとスタイルが適用されない問題がありました。申しわけありません。以前の訂正前の javascriptは以下になります。

<script type="text/javascript"><!--
function line_calendarToday() {
var D=new Date();
if (D.getFullYear()==<%now_year> && D.getMonth()==<%now_month>-1) {
var C=document.getElementById( "line_calendar" ).getElementsByTagName("span");
for (i=0;i<C.length;i++) {
if ( C[i].innerHTML == D.getDate() ) {

/* ▼横カレンダーの「当日」のスタイル▼ */
C[i].style.background="#ffd700"; /* 背景色 */
C[i].style.border="solid 1px #ffa500"; /* 枠 (実線、太さ、色) */
C[i].style.padding="1px"; /* 文字から枠までの余白 */
C[i].style.color="#8b0000"; /* 日付の色 */
/* ▲横カレンダーの「当日」のスタイル▲ */

}}}}
line_calendarToday();
//--></script>

【2009/10/21 追記】

背景に画像を設定したいときはこのように指定してください。

C[i].style.backgroundImage="url(画像URL)";

以下、共有プラグイン「今日の日付入りカレンダー」のHTMLです。

<script type="text/javascript">
weeks = new Array("日","月","火","水","木","金","土") ;
today = new Date() ;
y = today.getFullYear() ;
m = today.getMonth() + 1 ;
d = today.getDate() ;
w = weeks[today.getDay()] ;
document.write (y,"/",m,"/",d,"(",w,")");
</script>
<br />
<div class="plugin-calender">
<table summary="カレンダー" class="calender">
<caption>
<a href="<%prev_month_link>"><%prev_month></a>
| <%now_year>/<%now_month> |
<a href="<%next_month_link>"><%next_month></a>
</caption>
<tr>
<th abbr="日曜日" scope="col" id="sun">日</th>
<th abbr="月曜日" scope="col">月</th>
<th abbr="火曜日" scope="col">火</th>
<th abbr="水曜日" scope="col">水</th>
<th abbr="木曜日" scope="col">木</th>
<th abbr="金曜日" scope="col">金</th>
<th abbr="土曜日" scope="col" id="sat">土</th>
</tr>
<!--calender-->
<tr>
<td><%calender_sun></td>
<td><%calender_mon></td>
<td><%calender_tue></td>
<td><%calender_wed></td>
<td><%calender_thu></td>
<td><%calender_fri></td>
<td><%calender_sat></td>
</tr>
<!--/calender-->
</table>
</div>

赤文字部が日付表示用のスクリプトタグです。
日付だけ表示したい場合は、赤文字部分以外を削除してください。

この今日の日付表示の色や大きさを変えたい場合は、以下のようなカスタマイズが出来ます。

【色を変更】
<font color="#○○○○○○">日付表示スクリプト</font>
※○○○○○○には色名の数字6桁を。
色選びはWebセーフカラー様が参考になります。

【センター(中央)寄せ】
<div align="center">日付表示スクリプト</div>

【色変更＆中央寄せ】
<div align="center"><font color="#○○○○○○">日付表示スクリプト</font></div>

【色変更＆フォントサイズ変更】
<font color="#○○○○○○" size="1">日付表示スクリプト</font>
※数値は1～7まで指定出来ますが、大きくしすぎるとデザイン崩れの原因になります。


今日の日付が表示されるカレンダーは暦の役割もしてくれるので便利そうです。

以下、共有プラグイン「なんでもスクロール」のHTMLです。

<div style="
height:100px; /* スクロールの高さはこの数値を変えて設定してください */
overflow:auto;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#cccccc;
scrollbar-shadow-color:#cccccc;
scrollbar-track-color:#ffffff;">

※スクロールさせる文字やプラグインのHTMLをここに加えてください。

</div>

表示したい内容を
※スクロールさせる文字やプラグインのHTMLをここに加えてください。
と入れ替えてください。

このプラグインの高さや、IEしか有効ではありませんがスクロールバー各箇所の色もお好みにあわせて設定してください。

これで長く下に伸びすぎたプラグインをスッキリ短く見せることが出来ます。

以下standardシリーズを例にHTMLの該当箇所を示しますが、
lightframeシリーズも似ているので参考になると思います。

<!--▼コメント投稿▼-->
<p><strong>コメントの投稿</strong></p>
<form method="post" action="./" name="comment_form" id="comment_form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />

<label for="subject">題名:</label><br />
<input id="subject" type="text" name="comment[title]" size="40" /><br />

<label for="name">名前:</label><br />
<input id="name" type="text" name="comment[name]" size="40" value="<%cookie_name>" /><br />

<label for="url">URL:</label><br />
<input id="url" type="text" name="comment[url]" size="40" value="<%cookie_url>" /><br />

<label for="comment">COMMENT:</label><br />
<script type="text/javascript" src="<%server_url>load.js"></script><br />
<textarea id="comment" cols="50" rows="8" name="comment[body]"></textarea><br />

<label for="pass">PASS:</label><br />
<input id="pass" type="password" name="comment[pass]" size="20" /><br />

<label for="himitu">SECRET:</label><br />
<input id="himitu" type="checkbox" name="comment[himitu]" value="管理者にだけ表示を許可する" />管理者にだけ表示を許可する

<p><input type="submit" value="送信" /></p>
</form>
</div><!--/article-->
<!--/comment_area-->
<!--▲コメント投稿▲-->

もし不要だと思われる項目があれば、その該当箇所を削除してください。

HTMLを編集します。
月別記事ナビゲーションの便利ナビタイトル部分
lightframeシリーズであれば <div class="various_title">～</div>
standardシリーズであれば <div class="menu_title">～</div>
の中を、以下の赤いスクリプトに置き換えてください。

<!--▼月別記事ナビゲーション▼-->
<!--date_area-->
<div class="various_outline">
<div class="various_title">

<script type="text/javascript">
<!--
t = "<%sub_title>";
l = t.length;
str = t.substr(1,4) + "年" + t.substr(5,2) +"月";

if(l<=7)
str = "[ 月別一覧 ]　" + str;
else
str = "[ 日別一覧 ]　" + str + t.substr(7,2) + "日";

document.write(str);
//-->
</script>

</div>
<div class="various_body">
～
<!--▲月別記事ナビゲーション▲-->

これで日別表示でその日付を表示することが出来ます。
スクリプトを公開してくれたhatenaさん、ありがとうございました。