[亜] custom

--------

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

2005-05-22

記事を複数カテゴリで分類したいって要望がありますが、めんどうなやり方なら代替案もなきにしもです。以前私も使ってましたがブログ内検索を使うと似たようなことができます。

検索結果のページはすべてhttp://ID.blogX.fc2.com/index.php?q=検索語（index.phpはなくても平気）となるので、記事内に毎回（必要に応じて）これを仕込めばいいわけです。でもデザインを自分で変更しないと少し不格好に見えるかもしれません。

例えば親カテゴリを記事内に入り込む形にしてしまい、記事の頭に小カテゴリを手打ち（PCの辞書に登録しとけばいくらか楽）するとか。ほんの一例をひとつ。

<div class="entry_block">
<a href="<%topentry_category_link>"><%topentry_category></a>
<%topentry_body>
</div>

上記のように<%topentry_body>の前に親カテゴリを移動し、記事の書き出しに - <a href="http://ID.blogX.fc2.com/?q=小カテゴリ名">小カテゴリ名</a><br>と書けば

記事タイトル
親カテゴリ - 小カテゴリ
本文

となるわけです。そのかわり検索結果を使っているので、小カテゴリ別に表示したときに、小カテゴリと同じ言葉が使われている記事も拾ってしまうので注意。小カテゴリが本文中に使う日本語なら英語に、英語なら日本語にカテゴリ名を変えると余計な記事も拾わず安心です。

2005-05-14

リファ辿ったら*1「はてなダイアリー風のコメントリストにしたい」って言ってる人がいたから「訊いてくれれば教えるのに～」とか思いつつ、書くネタができたからログイン。

コメントリストにしてみる

はてな風のコメントリストにする場合はテンプレート機能一覧にあるを使います。基本形は以下。

<p><%topentry_comment_list_name>
『<%topentry_comment_list_body>』</p>

リストの上に [コメントを書く] というコメント投稿欄へのリンクを貼る場合は以下。

<p>[<a href="<%topentry_link>#comment">コメントを書く</a>]</p>

<p>にclassを指定したり、それぞれの項目を<span>で囲んでCSSで装飾します。

コメント投稿欄＝個別記事（blog-entry-x.html）なので、個別記事に移動すると上記コメントリスト＋従来の寄稿コメントになってしまいます。ですから上記2つをとで囲みます。

1日1つのコメントリスト

はてなダイアリーのようにコメントリストを1日1つ表示したいと思った私は、<%topentry_minute>（記事投稿時間の“分”）を使いました。を使用した上で*2、HTMLとCSSを以下のようにします。

--HTML--
<div class="com<%topentry_minute>">
コメントリスト
</div>

--CSS--
div.com00 { display: none; }

同日中の最下（最古）記事以外にコメントリストを表示しないようにするため、記事を投稿するときに投稿時間の“分”を00に変更します。そうすれば<%topentry_minute>＝ 00 となり、CSSのdisplay: none;が有効になり、コメントリストが表示されません。

*1 あと徳保さんに捕捉されててべっくらこいた。
*2 私のとこではsame_dayの使い方でちょっと説明してます。

2005-04-26

を詳しく説明しようと思ったけど、テンプレによってカスタマイズの方法が違いすぎるので断念します。

かいつまんで説明すると、この変数は日付毎に何かを挿入するものです。私のブログのように日付を入れるのが一般的ですが、他にもアイディア次第で何かできるかも。
視覚的にはdanielさんのブログにあった

<h2>日付</h2>

<h3>記事タイトル1</h3>
－－－－－－－－－－－－－－
－－－－　記事本文　－－－－
－－－－－－－－－－－－－－

<h3>記事タイトル2</h3>
－－－－－－－－－－－－－－
－－－－　記事本文　－－－－
－－－－－－－－－－－－－－

という図がわかりやすいと思います。こんな感じになります。あとはlivedoorBlog。
以前に要望がでていたことなので需要はあると思うけど、HTMLをイジらないと適応できないってのが敷居を高くしてるかなぁ。

基本的には<%topentry_title>の前後にある年月日の変数を消して、<!––topentry––>の下か、そのまた下の<div>の下に

<!––same_day––>
<h2><a href="<%url>blog-date-<%topentry_year><%topentry_month>
<%topentry_day>.html"><%topentry_year>/<%topentry_month>/
<%topentry_day></a></h2>
<!––/same_day––>

を入れればいいわけです。入れる場所はテンプレによって違うので一概にどうとは言えないです。CSSが少しでも使える人はとりあえず上のを入れて整えれば形になりますよ。

2005-04-24

■ [custom] 折りたたみメニュー

姉妹カスタマイズ : プラグインの折りたたみ

基本となるJavaScript（以下js）はfrom DFJの折りたたみメニューから使わせて頂きます。

この『折りたたみメニュー』の導入結果は、共有テンプレートに登録したimitationで試してみてください。

jsを写す

HTMLの<head>から</head>の間に以下を挿入します。

HTMLを変更する - ボタン設置

折りたたみメニューを設置する場所を指定するために、【<div id="fo0">】と【</div>】で囲む必要があります。サイドバーに設置する場合は、サイドを囲んでいるタグ*1の下に<div id="fo0">を、サイド囲みの終了タグ（</div>）の上に</div>を挿入します。

次にたたんだメニューを開く＆閉じるためのボタンとなるものを決めます。ここでは『メニュータイトルをクリックして開く』ことを基本に進めます。

ボタンになる文字を通常のリンクのように<a href="javascript:void(0)" onclick="dd('fo01')">と</a>で囲みます。メニュータイトルが【<h3>最新記事</h3>】の場合は<h3><a href="javascript:void(0)" onclick="dd('fo01')">最新記事</a></h3>となります。<h3>の部分はテンプレによって違うので、他の例はサイドカスタマイズでいくつか見られるので参考にしてください。

ボタンを画像にしたり、■などのボタン風文字にすることもできます。画像にする場合はリンク文字を<img>タグに変えます。■にする場合はリンク文字を■にして、<a>タグの前か後ろ（<h3>の中）にメニュータイトルを表記します。

HTMLを変更する - メニューを囲む

開かれる＆閉じられるメニューを囲みます。上項で設置・変更したボタンの下にメニュー本文があるので、折りたたむ部分（通常は単体メニューひとつ）を<div style="display:none" id="fo01">と</div>で囲みます。

また、この『折りたたみメニュー』はjsを使用するため、閲覧者の中にはjsをOFFにしていることがいることも考え【<noscript>】*2を使います。最新記事の場合は以下のようになります。

<h3><a href="javascript:void(0)" onclick="dd('fo01')">最新記事</a></h3>
<div style="display:none" id="fo01">
<ul>

<li><a href="<%recent_link>"><%recent_title></a></li>

</ul>
</div>
<noscript>
<ul>

<li><a href="<%recent_link>"><%recent_title></a></li>

</ul>
</noscript>

注意すべきところがあります。【onclick="dd('fo01')"】と【id="fo01"】のfo01という部分です。これはボタンと開くメニューを一致させるもので、ページ内に同じものがあってはいけません。なのでメニューごとにfo02、fo03と変えなければいけません。また数字は上から順番に大きくならなくてはいけません（はず）*3。

最初は閉じずに表示しておき、ボタンをクリックすることで閉じることができるようにすることもできます。メニューを囲んだタグのstyle="display:none"を消すことで可能になります。

おまけ

最後におまけとして、公式テンプレの中でもシェアが高く、サイドメニューの構成もシンプルな[black]の改変例を記します。blackはサイド囲みのタグが運よく【<div class="right">】だった*4ので、それを<div class="right" id="fo0">に変えてください。

<h3><a href="javascript:void(0)" onclick="dd('fo02')">Recent Entries</a></h3>
<div style="display:none" id="fo02">
<ul>

<li><a href="<%recent_link>" title="<%recent_body>"><%recent_title></a><span>(<%recent_month>/<%recent_day>)</span></li>

</ul>
</div>
<noscript>
<ul>

<li><a href="<%recent_link>" title="<%recent_body>"><%recent_title></a><span>(<%recent_month>/<%recent_day>)</span></li>

</ul>
</noscript>

<h3><a href="javascript:void(0)" onclick="dd('fo04')">Recent Comments</a></h3>
<div style="display:none" id="fo04">
<ul>

<li><a href="<%rcomment_link>#comment<%rcomment_no>"><%rcomment_name>:<%rcomment_title></a><span>(<%rcomment_month>/<%rcomment_day>)</span></li>

</ul>
</div>
<noscript>
<ul>

<li><a href="<%rcomment_link>#comment<%rcomment_no>"><%rcomment_name>:<%rcomment_title></a><span>(<%rcomment_month>/<%rcomment_day>)</span></li>

</ul>
</noscript>

<h3><a href="javascript:void(0)" onclick="dd('fo06')">Recent Trackbacks</a></h3>
<div style="display:none" id="fo06">
<ul>

<li><a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_excerpt>"><%rtrackback_blog_name>:<%rtrackback_title></a>(<%rtrackback_month>/<%rtrackback_day>)</li>

</ul>
</div>
<noscript>
<ul>

<li><a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_excerpt>"><%rtrackback_blog_name>:<%rtrackback_title></a>(<%rtrackback_month>/<%rtrackback_day>)</li>

</ul>
</noscript>

<h3><a href="javascript:void(0)" onclick="dd('fo08')">Archives</a></h3>
<div style="display:none" id="fo08">
<ul>

<li><a href="<%archive_link>" title="<%archive_year>年<%archive_month>月"><%archive_year>年<%archive_month>月 (<%archive_count>)</a></li>

</ul>
</div>
<noscript>
<ul>

<li><a href="<%archive_link>" title="<%archive_year>年<%archive_month>月"><%archive_year>年<%archive_month>月 (<%archive_count>)</a></li>

</ul>
</noscript>

<h3><a href="javascript:void(0)" onclick="dd('fo10')">Category</a></h3>
<div style="display:none" id="fo10">
<ul>

<li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>

</ul>
</div>
<noscript>
<ul>

<li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>

</ul>
</noscript>

<h3><a href="javascript:void(0)" onclick="dd('fo12')">Links</a></h3>
<div style="display:none" id="fo12">
<ul>

<li><a href="<%link_url>" title="<%link_name>"><%link_name></a></li>

</ul>
</div>
<noscript>
<ul>

<li><a href="<%link_url>" title="<%link_name>"><%link_name></a></li>

</ul>
</noscript>

<h3><a href="javascript:void(0)" onclick="dd('fo14')">Search</a></h3>
<div style="display:none" id="fo14">
<ul>
<form action="./" method="get">
<input type="text" size="20" name="q" value="" maxlength="200">
<input type="submit" value=" Search ">
</form>
</ul>
</div>
<noscript>
<ul>
<form action="./" method="get">
<input type="text" size="20" name="q" value="" maxlength="200">
<input type="submit" value=" Search ">
</form>
</ul>
</noscript>

質問・注意などはコメント欄へどうぞ。恐縮ですが「参考にしました」などのお礼のコメントはトップページ下のメールフォームから送っていただけると嬉しいです。

*1 CSSでサイドの指定部分に#rightと指定してあれば、HTMLでは<div id="right">となっています。これはテンプレによって違うので確認をしてください。
*2 jsが動作しない場合、代わりに表示するHTMLを囲むためのタグ。
*3 数字が大きくなりさえすればいいので、02,04,06と飛んでもいい。こうしておけば後で新しくメニューを加えるときに楽。
*4 idは2つ指定することができない。classとidの共存は可。