FC2テンプレート配布所【天ぷれ屋 猫壱飾堂】

テンプレートカスタマイズ

FC2用テンプレート配布所【天ぷれ屋猫壱飾堂】
FC2用テンプレート配布所「天ぷれ屋 猫壱飾堂」です♪ごひいきに!
~「簡易版」利用規約~

【OKなもの】
カスタマイズなど基本的には何でも可

【ダメなこと】
著作権表示リンク部分の削除
テンプレート内画像の流用
FC2ブログ利用規約に反するブログへの使用

詳しくは⇒「使用上のご注意」を一読してね!
※テンプレ作り再開しました!

スポンサーサイト

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

横型カレンダーを付ける

よくヘッダーバナーの下などについている
横型のカレンダーの設置方法です

最初にHTMLはコレ↓


<ul class="head-c">
<li><a href="<%prev_month_link>" title="前の月">
<%prev_year>.<%prev_month></a>&nbsp;&laquo;</li>
<!--calender2-->
<li><%days></li>
<!--/calender2-->
<li>&raquo;&nbsp;<a href="<%next_month_link>" title="次の月">
<%next_year>.<%next_month></a></li>
</ul>


このHTMLをバナー下など表示させたい部分に設置したら
次にスタイルシートで指定します


.head-c {
position: relative;
text-align: center;
margin:5px 10px 5px 10px;
font-size: 10px
}
.head-c li {
display: inline;
padding-right: 2px;
font-weight: bold;
}


コレで完成です
いつもながらDIV指定は猫壱流ですので
お好きなように変更してください
ただしCSSとセットで変更しないととんでもない事になります

なお最初からついているものを外す場合は
上記の部分を見つけて削除してください
スポンサーサイト

「続きを読む」をカスタマイズ

「続きを読む」の折りたたみ方法です

「続きを読む」の部分のHTMLの記述部分は
<!--more_link-->~<!--/more_link-->内なので
猫壱のテンプレートで通常の場合は


<!--more_link-->
<div class="m-link">
<a href="<%topentry_link>#more">【続きを読む】</a>
</div>
<!--/more_link-->


という記述ですので下記に変更します


<!--more_link-->
<div class="m-link">
<!--BisEntryIfExtended-->
<span id="varP<%topentry_no>">
<a href="<%topentry_link>#<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>
#<%topentry_no>');return false;">【続きを読む】</a>
</span>

<div id="varXYZ<%topentry_no>" class="text" style="display: none">
<%topentry_more><br />
<a href="#<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;">【閉じる】</a>
</div>
<!--/BisEntryIfExtended-->
</div>
<!--/more_link-->



次に<head>~</head>内に下記のJavaScriptを挿入します


<script type="text/javascript">
<!--
function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}
//-->
</script>


これでOKです
どこかのサイトさんで見つけた方法ですので
他にも方法はあると思いますが
猫壱のテンプレートでは、この方法を使っています

他のテンプレートで使う場合はDIV指定の
<div class="m-link">の部分は
各テンプレ作者で指定が違うと思いますので
<div class="○○○">は変更しないでください
(普通はmore_linkが多いのかな?)


初めから折りたたみ式の場合は
逆の方法で折りたたみのHTMLを削除して
ノーマルの記述を挿入すれば、通常表示に戻ります
ちなみに
別窓で飛ばしたければ


<!--more_link-->
<div class="m-link">
<a href="<%topentry_link>#more" target="_blank">【続きを読む】</a>
</div>
<!--/more_link-->


と書けばOKなんですが
そんなことぐらい解りますよね・・・・すいません
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。