o|(´∀` *)あの子のリコーダー ... [FC2]カスタマイズ

【2005/07/18 (Mon)】リンク＆カテゴリリストのカテゴリ分け

上図のように、カテゴリーを細かく分類＆ツリー化させるスクリプト

■■■ 手順１．javascriptを設置 ■■■

管理画面で「テンプレートの設定」のページを開く。
変更したいテンプレの「修正」を選ぶ。
HTMLの編集のソースの一番下、</body>の手前に以下の内容を挿入。

<script type="text/javascript">

</script>

■■■ 手順２．HTMLの編集のソース中のカテゴリ表示の部分を変更 ■■■

(カテゴリリスト)

<ul>

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

</ul>

↑の部分を↓の文に書き直す。（コピペでいけるはず）

<div id="categorylist">
<ul>

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

</ul>
</div>

(リンクリスト)

<ul>

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

<li><a href="./?admin">管理者ページ</a></li>
</ul>

↑の部分を↓の文に書き直す。（コピペでいけるはず）

<div id="linklist">
<ul>

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

</ul>
</div>

に直す。
（プラグインの場合は、管理画面で「プラグインの設定」のページを開く。
「カテゴリー」と「リンク」の「HTML編集」を開いて同じように直せばいいはず。）
javascript設置はこれで終わり。

■■■ 手順３．カテゴリー名の修正 ■■■

（カテゴリリスト）
管理画面で「カテゴリーの編集」を開く。
現在あるカテゴリーを全て

[見出し]カテゴリ名

という形に修正してください。（↓図参照）

（リンクリスト）
管理画面で「リンクの編集」を開く。
「カテゴリの編集」のように[見出し]カテゴリ名という形に修正してください

注）[]は必ず半角に。全角だとうまくいきません。
また、一つでも[見出し]カテゴリ名の形に直していないと
うまくいかないので必ず全部修正してください。

[FC2]カスタマイズ // TRACKBACK(0) // COMMENT(0)

【2005/07/17 (Sun)】ツリー化（画像編）

ツリー化スクリプトの
1.HTMLの編集のソース中のエントリ等の部分を変更
を行う。

■■■ ツリーを画像にしたい場合 ■■■

普通のツリー化と同じくHTMLの編集のソースの一番下
</body>の手前に以下の内容を挿入。（コピペ推奨）
赤文字のところが画像を変えるところです。

（ツリー画像有り用スクリプト）

<script type="text/javascript">

</script>

■■■ ツリーの元になる画像を用意する(通常用と末端用) ■■■

・以下のようなもの(左が通常用、右が末端用)

通常用	末端用

FC2管理画面から「ファイルアップロード」で画像2点をアップする。

続いてスタイルシートを記述します。
以下のようなスタイルを「スタイルシートの編集(css)」の最後に追加してください。

ul.tree {
list-style: none;
margin: 0px;
padding: 0px;
}
ul.tree li {
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(アップした通常用の画像ファイルURL);
background-repeat: no-repeat;
}
ul.tree li.end {
background-image: url(アップした末端用の画像ファイルURL);
}

アップした画像ファイルURLを記述（例）

通常用：http://blog○.fc2.com/f/○○○/file/cate1.gif
末端用：http://blog○.fc2.com/f/○○○/file/cate2.gif

行間を空けたいとか、フォントサイズを設定したいという場合、

ul.tree {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 希望のフォントサイズ;
line-height: 150%;
}

のようにul.tree内に設定を追加します。

[FC2]カスタマイズ // TRACKBACK(0) // COMMENT(0)

【2005/07/16 (Sat)】ツリー化スクリプト

管理画面で「テンプレートの設定」のページを開く。
変更したいテンプレの「修正」を選ぶ。

■■■ 1.HTMLの編集のソース中のエントリ等の部分を変更 ■■■

ツリー化したいところを以下(赤文字)の文面に直す。
（テンプレートによって記述方法は様々なので最初見つけるのは
難しいかもしれませんが大体同じようなものなので理解すれば簡単だと思います。）

(最新エントリーリスト)

<ul>

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

</ul>
↓
日付けごとにツリー化
<div id="newentrylist">
<ul>

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

</ul>
</div>
日付けごとにツリー化しない
<div id="entrylist">
<ul>

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

</ul>
</div>

(コメントリスト)

<ul>

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

</ul>
↓
<div id="commentlist">
<ul>

<li><%rcomment_etitle><br><a href="<%rcomment_link>#comment"><%rcomment_name>(<%rcomment_month>/<%rcomment_day>)</a></li>

</ul>
</div>

(トラックバックリスト)

<ul>

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

</ul>
↓
<div id="tblist">
<ul>

<li><%rtrackback_etitle><br><a href="<%rtrackback_link>#trackback"><%rtrackback_blog_name>(<%rtrackback_month>/<%rtrackback_day>)</a></li>

</ul>
</div>

(リンクリスト)

<ul>

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

<li><a href="./?admin">管理者ページ</a></li>
</ul>
↓
<div id="linklist">
<ul>

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

</ul>
</div>

(カテゴリリスト)

<ul>

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

</ul>
↓
<div id="categorylist">
<ul>

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

</ul>
</div>

リンクリストとカテゴリリストのツリー化に関しては、
リンクのカテゴリ分け が必要になります。
カテゴリ分けをしていない場合はツリー化は行われません。

■■■ 2.　javascriptを設置 ■■■

HTMLの編集のソースの一番下
</body>の手前に以下の内容を挿入。（コピペ推奨）

ツリー画像無し用スクリプト（ツリー画像有り用スクリプトはこちら）

<script type="text/javascript">

</script>