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

猫壱のFC2用テンプレート配布所

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

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

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

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

スポンサーサイト

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

blue-gray-2R(ブルー&グレー2カラム右)

ブルー&グレー(2カラム右)

タイトル:blue-gray-2R
(ブルー&グレー2カラム右)

猫壱飾堂の第一弾テンプレートは、いたってシンプルにしてみました
薄いブルーとグレーそして黒のみで構成してみました
とはいってもグレーだけで数種類使ってるんですケドね!
わかんないと思うけど(涙)
季節感ナシでオールマイティに使える・・・・・・かな?

タイトルバックの黒い部分はタイトルの長さに連動しますが
あまり長いタイトルだと2段になるのでお勧めしませんし
短すぎてもかっこ悪いかも・・・・・
あと、「続きを読む」は折りたたみ式にしてみました
横カレンダーもついてます

※ただいま公開中です

3/17
特に問題ない部分ですがCSSを一部修正しました
(二重指定部分削除)

【関連記事】
「続きを読む」をカスタマイズ
横型カレンダーを付ける

横型カレンダーを付ける

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

最初に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なんですが
そんなことぐらい解りますよね・・・・すいません

全テンプレートの注意事項

【表示確認環境】
当サイトのテンプレートは、次の環境で確認しています

OS:Windows XP
ブラウザ:IE6、IE7、Firefox2

各ブラウザで見え方は若干異なりますが
問題ない程度に表示されます
上記以外のOS、ブラウザでの表示は確認しておりませんので
各自の判断でお使いください

なお、確認漏れによる不具合等ありましたら
コメント、メールフォームなどからお知らせくだると助かります


【カラム落ちについて】
上記の環境でカラム落ちする場合は
主に指定幅より大きな画像などを貼ったことが原因です
画像の縮小などで対応してください

【プラグインの対応】
下記の公式プラグインは確認済みです
~表示確認済みプラグイン~
基本プラグインすべて、天気予報、占い、フリーエリア
ただし、QRコードは指定幅以内で使用してください
詳細設定は「タイトル分の文字設定」のみ調整不可(CSSで変更可)

【本文ツールアイコンの対応】
小さい文字以外には対応
小さい文字にしたい場合は
<span style="font-size:x-small;">小さい文字</span>を
<span style="font-size:8px;">小さい文字</span>など
pxの数値で設定してください

テンプレート利用規約

利用規約(H.20.2.20)

【使用条件】
FC2ブログ利用規約に反しないすべてのブログ
つまり、違反行為をしていないブログであれば問題ないです

【禁止事項】
著作権者表示の削除、および同リンクの削除
テンプレート内の画像の流用、再配布等
その他著作権侵害にあたる行為

【免責】
当サイトのテンプレート、画像および情報等を使用をしたことに起因
または関連して生じた一切の損害について
当サイト運営者が賠償責任を負わないことに同意した上でご使用ください

【カスタマイズについて】
著作権者表示の削除、および同リンク削除を除く
HTML、スタイルシートのカスタマイズ可
画像やアイコンを入れ替えるなども問題ないです

【画像について】
テンプレート内の画像は
・当サイトオリジナルの画像
・著作留保を宣言したサイトから主に加工して使用
の2種類がございますが、混在している為
どちらにしても流用、再配布等はご遠慮ください
どうしても使用したい場合は、メールフォームよりご相談ください

※なお、利用規約は予告なく改定いたします
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。