2008.07/05 （Sat）
親子カテゴリー用スタイルシート
FC2公式プラグインに新たに登場した親子カテゴリ
chakoさんやひよこさんのブログでいち早く対応しているのは拝見はしていのですが、当初は合算数値が出ず、あんまり使えそうじゃないので放置していたのですが、一昨日、FC2の方で改良ソースが出されたのを期に、対応させてみました。
【ブログ】親子カテゴリ改良・新変数リスト公開のお知らせ
親子カテゴリを使う方は、背景が白や薄い色のテンプレの場合は、以下のソースを、場所はどこでもいいので、スタイルシートに付け加えてください。
現在このブログで表示されているようになります（別に親子にするほどカテゴリないんですけど、表示確認のために無理に親子にしてみたり……）。
背景が黒や濃い色の場合は以下で。
点線の素材を直リンしているので、他の方のテンプレにこのまんまコピペはしないでくださいねー。
上のでおそらく私のどのテンプレも、それなりな表示になると思いますが、ものによっては点線がちょっとあくので、気になる方は、
/* メニューリスト子要素 */
.menu_body li
に行間設定line-heighがある場合、それを
/*メニューリスト親要素*/
.menu_body ul
の方に移して、また上下のpaddingやmarginあったら0にしてもらえばきれいに表示できると思います。つまった感じになったら、行間を適当に広げて調節してください。
ちなみにpaddingやmarginは、4箇所書いてあったら上・右・下・左、3箇所なら上・左右・下、2箇所なら上下・左右、1箇所なら全部同じです。
ところで、共有プラグインに親子カテゴリもの、ありましたよね……それを使えば、どのテンプレでも使えるんで、頻繁にテンプレを変える方はそっちを使った方がいいかもです。
テンプレート部門に参加中。クリックしてくださると励みになります♪
chakoさんやひよこさんのブログでいち早く対応しているのは拝見はしていのですが、当初は合算数値が出ず、あんまり使えそうじゃないので放置していたのですが、一昨日、FC2の方で改良ソースが出されたのを期に、対応させてみました。
【ブログ】親子カテゴリ改良・新変数リスト公開のお知らせ
親子カテゴリを使う方は、背景が白や薄い色のテンプレの場合は、以下のソースを、場所はどこでもいいので、スタイルシートに付け加えてください。
現在このブログで表示されているようになります（別に親子にするほどカテゴリないんですけど、表示確認のために無理に親子にしてみたり……）。
背景が黒や濃い色の場合は以下で。
点線の素材を直リンしているので、他の方のテンプレにこのまんまコピペはしないでくださいねー。
上のでおそらく私のどのテンプレも、それなりな表示になると思いますが、ものによっては点線がちょっとあくので、気になる方は、
/* メニューリスト子要素 */
.menu_body li
に行間設定line-heighがある場合、それを
/*メニューリスト親要素*/
.menu_body ul
の方に移して、また上下のpaddingやmarginあったら0にしてもらえばきれいに表示できると思います。つまった感じになったら、行間を適当に広げて調節してください。
ちなみにpaddingやmarginは、4箇所書いてあったら上・右・下・左、3箇所なら上・左右・下、2箇所なら上下・左右、1箇所なら全部同じです。
ところで、共有プラグインに親子カテゴリもの、ありましたよね……それを使えば、どのテンプレでも使えるんで、頻繁にテンプレを変える方はそっちを使った方がいいかもです。
スポンサーサイト
テンプレート部門に参加中。クリックしてくださると励みになります♪
2008.05/12 （Mon）
do_popflowerのコメント不具合
また禁止ワードにひっかかってコメントできないので新記事でお答えします；
禁止ワードをなしにしても、英数字100パーセントでOKにしても、ソースを書くと駄目みたいで……FC2の方で蹴られちゃってるのかな？；
http://dokode.blog87.fc2.com/blog-entry-51.html#comment1248へのコメントレスです。
do_popflowerでコメントが送れないとのことですが、あれ、本当ですね……前はコメントできたので、数日前に書き直した時に何かおかしなことになったようです……でも、ソース見ても変なところは見つからない……うっかりメモ帳に保存でもしたのかな……
ともあれHTMLの
<!--▼コメント投稿ここから-->
から
<!--/コメント編集ここまで-->
の部分を追記に載せたソースに差し替えれば、コメントできるようになると思います。
申し訳ありませんが、不具合の出る方は、その部分をコピペで差し替えてくださいませm(_ _)m
禁止ワードをなしにしても、英数字100パーセントでOKにしても、ソースを書くと駄目みたいで……FC2の方で蹴られちゃってるのかな？；
http://dokode.blog87.fc2.com/blog-entry-51.html#comment1248へのコメントレスです。
do_popflowerでコメントが送れないとのことですが、あれ、本当ですね……前はコメントできたので、数日前に書き直した時に何かおかしなことになったようです……でも、ソース見ても変なところは見つからない……うっかりメモ帳に保存でもしたのかな……
ともあれHTMLの
<!--▼コメント投稿ここから-->
から
<!--/コメント編集ここまで-->
の部分を追記に載せたソースに差し替えれば、コメントできるようになると思います。
申し訳ありませんが、不具合の出る方は、その部分をコピペで差し替えてくださいませm(_ _)m
2008.05/11 （Sun）
do_resky3cのカスタマイズ
禁止した覚えのない禁止ワードにひっかかってコメントできないので； 新記事でお答えします。
http://dokode.blog87.fc2.com/blog-entry-105.html#comment1243へのレスです。
>hotmaikoさんへ
簡単に出来ますよ。
これがこんな風になればいいんですよね？
HTMLの順番を
全体レイアウト→ヘッダー→横カレンダー→左メニュー＋中央記事→中央メイン……
にするだけです。
そのレイアウトなら、横カレンダーはdo_re_sky2cのを流用するのではなく、以下のものを使った方がいいかも。
該当部分を以下に差し替えてください。
テンプレート部門に参加中。クリックしてくださると励みになります♪
http://dokode.blog87.fc2.com/blog-entry-105.html#comment1243へのレスです。
>hotmaikoさんへ
簡単に出来ますよ。
これがこんな風になればいいんですよね？
HTMLの順番を
全体レイアウト→ヘッダー→横カレンダー→左メニュー＋中央記事→中央メイン……
にするだけです。
そのレイアウトなら、横カレンダーはdo_re_sky2cのを流用するのではなく、以下のものを使った方がいいかも。
該当部分を以下に差し替えてください。
<!--▼全体のレイアウトここから▼-->
<div id="layout">
<!--▼ヘッダーここから▼-->
<div id="header">
<h1 id="pagetop"><a href="<%url>"><%blog_name></a></h1>
<p class="intro"><%introduction></p>
<p class="admin">
<a href="<%url>?all" target="_self" title="全記事リストへ">★All archives</a>
<a href="<%server_url>control.php" title="管理ページトップへ">★Admin</a></p>
</div>
<!--/ヘッダーここまで-->
<!--▼横カレンダーここから（いらない場合はここから削除▼-->
<div class="yoko_calender">
<b><%now_year>年<%now_month>月</b>/
<a href="<%prev_month_link>"><%prev_month>月≪</a>
<!--calender2-->
<span class="day"><%days></span>
<!--/calender2-->
<a href="<%next_month_link>">≫<%next_month>月</a>
</div>
<!--/横カレンダーここまで（いらない場合はここまでを削除）-->
<!--▼左メニュー＋中央記事ここから▼-->
<div id="left_and_main">
<!--▼中央メインここから▼-->
<div id="main_block">
テンプレート部門に参加中。クリックしてくださると励みになります♪
2008.05/02 （Fri）
投稿時間等のカスタマイズ
＞AAAさんへ
投稿時間を消したいというご質問をいただいたのですが、どのテンプレでも共通なので、新記事にしておきます。
まず、テンプレートの編集のHTMLのところからリンクされている、テンプレート中に使える変数一覧をご覧になってください。
すると、<%topentry_hour>が時間を表示し、<%topentry_minute>は分を表示する……等のことがおわかりなると思います。
で、テンプレのHTMLからそれらの独自変数を探して下さい。
私は、記事下のデータと、コメント下のデータにそれらの変数を使っております。
必要なければそれらの変数を削除すればいいわけです。
変数一覧表見て、HTMLから対応変数を探すようにすれば、ご自分で必要に応じて、場所を移したり、いらないものは削除したり、いるものを付け加えたりと色々カスタマイズできるようになりますよ♪
ただ記事下データの方は記事にリンクを貼っていますので、そのリンクはいる、でも投稿時間は表示させたくないのであれば、投稿時間・分をあらわしている<%topentry_hour>:<%topentry_minute>をなんでもいいので代わりのものに差し替えてください。「この記事を開く」とか「この記事を別窓で」あたりかな。↓例
<a href="<%topentry_link>" target="_blank" title="この記事を別窓で開く">この記事を別窓で開く</a>
もっとも、記事タイトルからも記事にリンク貼っているので、リンクもいらなければ、下記の赤字部分を丸ごと削除しちゃってください。
<!--▼記事下データここから▼-->
<div class="entry_state">
<a href="<%topentry_link>" target="_blank" title="この記事を別窓で開く"><%topentry_hour>:<%topentry_minute></a>
テンプレート部門に参加中。クリックしてくださると励みになります♪
投稿時間を消したいというご質問をいただいたのですが、どのテンプレでも共通なので、新記事にしておきます。
まず、テンプレートの編集のHTMLのところからリンクされている、テンプレート中に使える変数一覧をご覧になってください。
すると、<%topentry_hour>が時間を表示し、<%topentry_minute>は分を表示する……等のことがおわかりなると思います。
で、テンプレのHTMLからそれらの独自変数を探して下さい。
私は、記事下のデータと、コメント下のデータにそれらの変数を使っております。
必要なければそれらの変数を削除すればいいわけです。
変数一覧表見て、HTMLから対応変数を探すようにすれば、ご自分で必要に応じて、場所を移したり、いらないものは削除したり、いるものを付け加えたりと色々カスタマイズできるようになりますよ♪
ただ記事下データの方は記事にリンクを貼っていますので、そのリンクはいる、でも投稿時間は表示させたくないのであれば、投稿時間・分をあらわしている<%topentry_hour>:<%topentry_minute>をなんでもいいので代わりのものに差し替えてください。「この記事を開く」とか「この記事を別窓で」あたりかな。↓例
<a href="<%topentry_link>" target="_blank" title="この記事を別窓で開く">この記事を別窓で開く</a>
もっとも、記事タイトルからも記事にリンク貼っているので、リンクもいらなければ、下記の赤字部分を丸ごと削除しちゃってください。
<!--▼記事下データここから▼-->
<div class="entry_state">
<a href="<%topentry_link>" target="_blank" title="この記事を別窓で開く"><%topentry_hour>:<%topentry_minute></a>
テンプレート部門に参加中。クリックしてくださると励みになります♪
2008.04/13 （Sun）
プラグイン1と2で文字設定を変える
2カラムのdo_renight2cで、プラグイン1と2の文字色をそれぞれ変えたいという質問があったのですが、私のテンプレの2カラムはどれも共通ですので、また同じ質問があった時に見つけやすいよう、あらたに記事にしておきます。
文字色でしたら、HTMLの編集で、プラグイン1と2のそれぞれにある
<div class="menu_text">
をまず探してください。
そしてプラグイン1の部分は
<div class="menu_text1">
プラグイン2は
<div class="menu_text2">
にでもしてください（なんでもいいんですが、ようは1と2で違うクラス名にするってことです。あ、テンプレの他の部分で使われてないのにしてくださいね）。
そして、今度はスタイルシートから
.menu_text
と
.menu_text p
の設定を探し、これをコピペし、それぞれ.menu_text1 と.menu_text1 pと.menu_text2と.menu_text2 pに変え、個々に文字色などをお好きなように設定すればいいわけです。
同じ要領で、プラグインのタイトル（menu_title）やリストマーク（menu_body ul）の色なども1と2で別に設定できます。
HTMLとスタイルシートを両方をつきあわせて見れば、私のテンプレはどれが何なのか説明入れてますし、すぐわかると思いますので、お好きなようにカスタマイズしてくださいね。
でも、プラグイン部分の文字みたいな、表示しないことも多いものではなく、おそらくリストのリンク色を変えたいんじゃないか……という「推測」のもとに； その方法も書いておきますね。
これはテンプレによって、設定違うんですが、スタイルシートのリンク設定を見れば、プラグイン（サイドメニュー）部分は、ご質問いただいたdo_re_night_2cの場合、全体のリンク色が適用されていることがわかりますよね（ものによっては、メニュー部分に個別にリンク色設定していることもあります）。
HTMLでサイドメニュー部分の設定を見て、プラグイン1と2にある
<div class="menu_body">
の末尾にそれぞれわかりやすく1とか2でもつけて、違うクラス名にしてください。
（あ、書き忘れてましたが、スタイルシートの
.menu_body {
なんとかかんとか
}
の設定は、
.menu_body1, .menu_body2 {
なんとかかんとか
}
に変えておいてくださいね；）。
でもって、もしどちらかのリンク色が、初期設定のままでいいのなら、変えたいものだけリンク色をあらたに設定します。両方変えたいのなら、両方、設定してください。
たとえば、スタイルシートに以下のような設定を付け加えれば、プラグイン2部分のリンク色のみ、初期設定とは違う色（この場合は#f00……赤）になるわけです。
menu_body1（プラグイン1部分）にも設定したければ、同じ要領でどうぞ。
で、もし、メニュー部分に全体の設定とは別にリンク色が設定してあるテンプレだと、有効にならないかもしれませんので、その場合は、
color:#f00 !important;
のように !importantを付け加えてください。最優先でその設定が適用されます。
（!importantは便利だけど、あまり乱用しない方がいいみたいなので、どうしても必要な時だけ使ってください）。
別に上のに限らず、やり方は色々ですがようは、HTMLのプラグイン1も2も、同じクラスで、CSSで一括で設定している初期状態から、カスタマイズで別なクラス名にし、スタイルシートでもそれぞれ別個に設定すればいいってだけです。
テンプレート部門に参加中。クリックしてくださると励みになります♪
文字色でしたら、HTMLの編集で、プラグイン1と2のそれぞれにある
<div class="menu_text">
をまず探してください。
そしてプラグイン1の部分は
<div class="menu_text1">
プラグイン2は
<div class="menu_text2">
にでもしてください（なんでもいいんですが、ようは1と2で違うクラス名にするってことです。あ、テンプレの他の部分で使われてないのにしてくださいね）。
そして、今度はスタイルシートから
.menu_text
と
.menu_text p
の設定を探し、これをコピペし、それぞれ.menu_text1 と.menu_text1 pと.menu_text2と.menu_text2 pに変え、個々に文字色などをお好きなように設定すればいいわけです。
同じ要領で、プラグインのタイトル（menu_title）やリストマーク（menu_body ul）の色なども1と2で別に設定できます。
HTMLとスタイルシートを両方をつきあわせて見れば、私のテンプレはどれが何なのか説明入れてますし、すぐわかると思いますので、お好きなようにカスタマイズしてくださいね。
でも、プラグイン部分の文字みたいな、表示しないことも多いものではなく、おそらくリストのリンク色を変えたいんじゃないか……という「推測」のもとに； その方法も書いておきますね。
これはテンプレによって、設定違うんですが、スタイルシートのリンク設定を見れば、プラグイン（サイドメニュー）部分は、ご質問いただいたdo_re_night_2cの場合、全体のリンク色が適用されていることがわかりますよね（ものによっては、メニュー部分に個別にリンク色設定していることもあります）。
HTMLでサイドメニュー部分の設定を見て、プラグイン1と2にある
<div class="menu_body">
の末尾にそれぞれわかりやすく1とか2でもつけて、違うクラス名にしてください。
（あ、書き忘れてましたが、スタイルシートの
.menu_body {
なんとかかんとか
}
の設定は、
.menu_body1, .menu_body2 {
なんとかかんとか
}
に変えておいてくださいね；）。
でもって、もしどちらかのリンク色が、初期設定のままでいいのなら、変えたいものだけリンク色をあらたに設定します。両方変えたいのなら、両方、設定してください。
たとえば、スタイルシートに以下のような設定を付け加えれば、プラグイン2部分のリンク色のみ、初期設定とは違う色（この場合は#f00……赤）になるわけです。
/* 未閲覧 */
.menu_body2 a:link {
color:#f00; /* リンク色 */
text-decoration:none; /* 下線をなしに */
}
/* 閲覧済 */
.menu_body2 a:visited {
color:#f00;
text-decoration:none;
}
/* カーソルが乗った時 */
.menu_body2 a:hover {
color:#999;
text-decoration:none;
}
menu_body1（プラグイン1部分）にも設定したければ、同じ要領でどうぞ。
で、もし、メニュー部分に全体の設定とは別にリンク色が設定してあるテンプレだと、有効にならないかもしれませんので、その場合は、
color:#f00 !important;
のように !importantを付け加えてください。最優先でその設定が適用されます。
（!importantは便利だけど、あまり乱用しない方がいいみたいなので、どうしても必要な時だけ使ってください）。
別に上のに限らず、やり方は色々ですがようは、HTMLのプラグイン1も2も、同じクラスで、CSSで一括で設定している初期状態から、カスタマイズで別なクラス名にし、スタイルシートでもそれぞれ別個に設定すればいいってだけです。
テンプレート部門に参加中。クリックしてくださると励みになります♪
2008.04/05 （Sat）
do_renightの3カラム版ソース配布
リクいただいたのdo_re_night_2cの3カラム版ソースを配布します。
3カラム見本
使いたい方は、適当なテンプレをDLするか、複製して、まずHTMLとCSSをすべて消し、追記に載せたHTMLとCSSをコピペしてくださいませ。
このテンプレはかなり融通のきく作りにしてますので、記事幅・メニュー幅とも簡単に増減できます。カスタマイズしたい方はソースに入れた説明をご覧になってくださいね。
XHTML、総CSSレイアウト、シンプルレイアウトで、画像も軽いので、この見た目でも、画像なしのテーブルレイアウトテンプレとかよりも軽いんじゃないかと思います。
ちょっとでももっと軽くしたい方は、ソースに入れている説明はいらなきゃ取っちゃってください。
08年4月22日最終更新しました。
3カラム見本
・WIN・XPにて、IE5.5、IE6、IE7、FIREFOX、ネスケ、OPERA、SAFARIの最新版で動作・表示確認済。MAC用ブラウザは、スクリーンショットの表示のみ確認。
・アダルトで利益の出るブログと違法ブログは使用不可。
・ソース・素材ともカスタマイズ可ですが、再配布は不可です。
・著作権部分やFC2の広告の削除・改変不可
使いたい方は、適当なテンプレをDLするか、複製して、まずHTMLとCSSをすべて消し、追記に載せたHTMLとCSSをコピペしてくださいませ。
このテンプレはかなり融通のきく作りにしてますので、記事幅・メニュー幅とも簡単に増減できます。カスタマイズしたい方はソースに入れた説明をご覧になってくださいね。
XHTML、総CSSレイアウト、シンプルレイアウトで、画像も軽いので、この見た目でも、画像なしのテーブルレイアウトテンプレとかよりも軽いんじゃないかと思います。
ちょっとでももっと軽くしたい方は、ソースに入れている説明はいらなきゃ取っちゃってください。
08年4月22日最終更新しました。
2008.03/29 （Sat）
記事中の画像設定
＞ぴぃーさんへ
テンプレ気にいっていただけて、嬉しいです（*＾▽＾*）
do_qp_dotに対する質問だったのですが、どのテンプレでも共通なので、新規記事でお答えします。
というのは、これと同じ質問、何度も答えてるんですけど、 それぞれのテンプレの個別記事にいっちゃってるもんで、探しにくいんですよね……なんせ自分でも探すの大変でした；
（不精がってないで、いい加減、よくある質問と回答くらい作らないとなー；）
ということで新規記事にしておきます。
記事にUPした写真等の画像に常に枠をつける等の修飾をするには、スタイルシートにそのような設定を書き加えてください。
私のテンプレですと、HTMLにもCSSにも説明を入れているので、すぐわかると思いますが、記事内部のクラス名は、entry_bodyです。
ですので、スタイルシートに、以下のタグを場所はどこでもいいので入れれば出来ます。
.entry_body img {
お好きな内容に設定してください
}
つまりは
.entry_body（←設定したいクラス） img（←画像） {
お好きな内容に設定してください
}
ってことです。
imgに一律で設定してしまうと、テンプレにあらかじめ使っている画像すべてに影響出ますので、気をつけてくださいね。
他の方のテンプレでも、該当クラス名を探せば、同じ要領で出来ますよ。
あ、画像枠を指定する時は、記事を書いた時に、FC2ブログでファイル挿入を使って、画像を挿入した時に挿入されるタグから
border="0"
は削除してくださいね。
＞2n29nさんへ
テンプレ気にいっていただけて、嬉しいです（*＾▽＾*）
常に画像の一番上の右からとは、一体どういう状態なのか、わかりづらいのですが、画像の横に文章を回りこませたいのではないかと推測……（的外れだったらすみません）。
だとしたら、特にテンプレに限った話ではないんですが、これも何度か答えている質問なので、ここに書いておきますね。
個別に記事内で設定するのでしたら、FC2ブログで画像挿入をすると、下のようなタグが自動で挿入されますよね。
上のタグを以下のように書き換えます。
alignでleftとrightのどちらに回り込ませるか、marginでどこにどれだけ余白を取るか指定してください。 例のmarginは上・右・下・左の順に設定してあります。適当にお好みで変えてください。
<br clear="all" />は回り込みを解除するタグです。 解除しない場合は、削除してください。
テンプレート部門に参加中。クリックしてくださると励みになります♪
テンプレ気にいっていただけて、嬉しいです（*＾▽＾*）
do_qp_dotに対する質問だったのですが、どのテンプレでも共通なので、新規記事でお答えします。
というのは、これと同じ質問、何度も答えてるんですけど、 それぞれのテンプレの個別記事にいっちゃってるもんで、探しにくいんですよね……なんせ自分でも探すの大変でした；
（不精がってないで、いい加減、よくある質問と回答くらい作らないとなー；）
ということで新規記事にしておきます。
記事にUPした写真等の画像に常に枠をつける等の修飾をするには、スタイルシートにそのような設定を書き加えてください。
私のテンプレですと、HTMLにもCSSにも説明を入れているので、すぐわかると思いますが、記事内部のクラス名は、entry_bodyです。
ですので、スタイルシートに、以下のタグを場所はどこでもいいので入れれば出来ます。
.entry_body img {
お好きな内容に設定してください
}
つまりは
.entry_body（←設定したいクラス） img（←画像） {
お好きな内容に設定してください
}
ってことです。
imgに一律で設定してしまうと、テンプレにあらかじめ使っている画像すべてに影響出ますので、気をつけてくださいね。
例）
.entry_body img {
padding:5px; /* 画像の余白を5pxに設定 */
background-color:#fff; /* 余白部分の色を白に設定 */
border:1px solid #000; /* 枠のサイズを1pxに、色は黒を指定 */
}
他の方のテンプレでも、該当クラス名を探せば、同じ要領で出来ますよ。
あ、画像枠を指定する時は、記事を書いた時に、FC2ブログでファイル挿入を使って、画像を挿入した時に挿入されるタグから
border="0"
は削除してくださいね。
＞2n29nさんへ
テンプレ気にいっていただけて、嬉しいです（*＾▽＾*）
常に画像の一番上の右からとは、一体どういう状態なのか、わかりづらいのですが、画像の横に文章を回りこませたいのではないかと推測……（的外れだったらすみません）。
だとしたら、特にテンプレに限った話ではないんですが、これも何度か答えている質問なので、ここに書いておきますね。
個別に記事内で設定するのでしたら、FC2ブログで画像挿入をすると、下のようなタグが自動で挿入されますよね。
上のタグを以下のように書き換えます。
alignでleftとrightのどちらに回り込ませるか、marginでどこにどれだけ余白を取るか指定してください。 例のmarginは上・右・下・左の順に設定してあります。適当にお好みで変えてください。
<br clear="all" />は回り込みを解除するタグです。 解除しない場合は、削除してください。
テンプレート部門に参加中。クリックしてくださると励みになります♪
