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

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

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

この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)";

以下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さん、ありがとうございました。

HTMLを編集します。
この「この記事にトラックバックする(FC2ブログユーザー) 」を表示させたいところに、次の記述を加えてください。

<a href="javascript:window.location.replace('http://blog.fc2.com/?url='+window.location.href);" title="<%template_trackback_this>"><%template_trackback_this></a>

当サイト配布のテンプレートであれば次のような箇所があるので、この下に加えるか差し替えるのが良いと思います。

<!--▼トラックバック表示▼-->
～
この記事のトラックバックURL<br />
<a href="<%trackback_url>"><%trackback_url></a><br />
～
<!--▲トラックバック表示▲-->

これで「この記事にトラックバックする(FC2ブログユーザー) 」を表示することが出来ます。

このカスタマイズによりトラックバックを貰えることが多くなるかもしれませんね。
教えてくれたちゃんさん、ありがとうございました m(__)m

HTMLの<body>に、次のように赤い記述を加えてください。

<body id="top">

【2009/09/03 追記】

以前は<body>の直下に<a name="top" id="top"></a>を設定する方法を紹介していましたが、空タグが出来てしまうので上記の方法に修正しました。

次にページトップへ戻るリンクを表示したい所に次のタグを加えてください。

<a href="#top" title="△ページトップへ戻る">△ページトップへ戻る</a>

青い文言は好きな様に変えてください。
これでそのページの上へ戻るリンクが設置できます。


当サイト配布のテンプレートであれば次のような箇所に表示すると良いかも知れません。

lightframeシリーズのフッターの右上に表示する場合

HTMLの次の箇所に赤い記述を挿入してください。

～
<br class="c-both" />

<div class="pagetop_link"><a href="#top" title="△ページトップへ戻る">△ページトップへ戻る</a></div>

<!--▼▼ フッター ▼▼-->
～

そしてスタイルシートの末尾に以下を加えてください。

.pagetop_link {
text-align:right; /* 右寄せ表示 */
font-size:9pt; /* 文字の大きさ */
margin-right:5px; /* 右の余白 */
}

standardシリーズのフッターの上（中央）に表示する場合

HTMLの次の箇所に赤い記述を挿入してください。

～
</table>

<div class="pagetop_link"><a href="#top" title="△ページトップへ戻る">△ページトップへ戻る</a></div>

</td></tr>
<!--▲▲▲▲ メインボディ（コンテンツ部分）▲▲▲▲-->
～

そしてスタイルシートの末尾に以下を加えてください。

.pagetop_link {
text-align:center; /* 中央表示 */
font-size:9pt; /* 文字の大きさ */
}

これはあくまで表示する箇所の例ですので、お好きな箇所に表示してください。

１つの記事が長い方は、記事下部にあるナビゲーションに
[日時] カテゴリ | TB(0) | CM(0) | △TOP
等と表示しても良いかもしれませんね。

まず背景画像として使用する透過pngが必要です。
いくつかサンプルを用意しました。自分のファイル置き場にアップロードしてご自由にお使いください。




半透明にしたい要素の背景にこの透過pngを設定することで、半透明化を実現します。

当サイトが公開している共有テンプレートであれば、スタイルシートの末尾に以下を加えると、記事等の背景を半透明にしてbodyに設定した背景画像が透けて見えるようになります。

【standardの場合】

/* コンテンツ内側背景の半透明化 */
#main_body {
background-color: transparent; /* 背景色なし設定 */
background-image: url("透過pngのURL");
}

/* 重なる要素の背景色なし設定 */
.base_table {
background-color: transparent;
}

【lightframeの場合】

/* コンテンツ内側背景の半透明化 */
#outline {
background-color: transparent; /* 背景色なし設定 */
background-image: url("透過pngのURL");
}

/* 重なる要素の背景色なし設定 */
.plugin3_body,
.various_body,
.ently_outline,
.comment_outline,
.trackback_outline,
.plugin1_body,
.plugin2_body {
background-color: transparent;
}

重なる要素の背景に透過pngを設定しても構いません。

これでIE7以上では、bodyに設定した背景画像が透けて見えるようになります。
IE6は透過pngに対応していないため、さらに工夫が必要になります。

Drew Diller's blogさんがIE6でも透過pngを有効にするjavascriptを公開されています。
DD_belatedPNG: Medicine for your IE6/PNG headache!

ページの真ん中あたりにあるDD_belatedPNG_0.0.8a.jsというjavascriptをダウンロード（コピーしてメモ帳等に貼付け）してください。
現時点(2009/08/06)では最新バージョンが0.0.8aですが、今後さらに上がるかもしれません。

ファイル名にドット「.」があるとFC2にアップロードできないようです。
DD_belatedPNG.js等と名前を変えてからFC2にファイルアップロードしてください。

そしてHTMLの<head>～</head>の間に以下を加えてください。

<!--[if lte IE 6]>
<script type="text/javascript" src="DD_belatedPNG.jsのURL"></script>
<script type="text/javascript">
DD_belatedPNG.fix( '#outline, #main_body');
</script>
<![endif]-->

赤い箇所は透過pngを使っているクラスやIDを設定します。
カンマ「,」で区切って複数設定することもできます。

当サイトが公開している共有テンプレートであれば
lightframe なら #outline
standard なら #main_body
を設定してください。不要なほうは削除して構いません。

これでIE6でも透過pngが有効になります。