2006年05月28日
右サイドバーのメニューのツリー化する。(1)
「Categories」(カテゴリーリスト)、「Monthly Archives」(アーカイブリスト)、「Recent Entries」(最近のエントリー)、「Links」(リンク)のツリー化をしました。
このカスタマイズは、小粋空間のyujiroさんの記事サイドメニューのツリー化スクリプト for FC2 ブログを参考にさせていただきました。yujiroさん、どうもありがとうございました m(_ _)m
- yujiroさんの記事サイドメニューのツリー化スクリプト for FC2 ブログを開いて、
「1.」の『maketree.js』をダウンロードします。
「5.」のツリーを表示するための画像をダウンロードしておきます。
実線の場合は「tree_lst_solid.gif」と「tree_end_solid.gif」をダウンロードしましょう。
点線の場合は「tree_lst_dotted.gif」と「tree_end_dotted.gif」をダウンロードしましょう。 - FC2ブログにログインして、管理者ページの左サイドの
「ホーム」の項目[新しく記事を書く]をクリックします。 - [ファイルのアップロード]ボタンをクリックします。
- 「ファイルの選択」の[参照]ボタンをクリックして、ダウンロードした『maketree.js』とツリーを表示するための画像を選択して[アップロード]をクリックします。
実線の場合は『maketree.js』「tree_lst_solid.gif」「tree_end_solid.gif」をアップロードしましょう。
点線の場合は『maketree.js』「tree_lst_dotted.gif」「tree_end_dotted.gif」をアップロードしましょう。 - 左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
- 「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
- 「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
- [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにCategoriesと入力して、検索してください。
- <!-- カテゴリーリスト開始 -->から続く下のコードの赤字のコードを修正します。
- 必ずバックアップしましょう！
いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪<!-- カテゴリーリスト開始 -->
<div class="sidetitle">
Categories
</div><div class="side" id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a></li>
<!--/category-->
</ul>
</div>
<!-- カテゴリーリスト終了 --><script type="text/javascript">
<!--
generateNormalTree("categorylist");
//-->
</script><!-- 月別アーカイブリスト開始 -->
<div class="sidetitle">
Monthly Archives
</div><div class="side" id="archivelist">
<ul>
<!--archive-->
<li><a href="<%archive_link>"><%archive_year>年<%archive_month>月</a> [<%archive_count>]</li>
<!--/archive-->
</ul>
</div>
<!-- 月別アーカイブリスト終了 --><script type="text/javascript">
<!--
generateNormalTree("archivelist");
//-->
</script><!-- エントリーリスト開始 -->
<div class="sidetitle">
Recent Entries
</div><div class="side" id="entrylist">
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>
<!--/recent-->
</ul>
</div>
<!-- エントリーリスト終了 --><script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>この間に
<!-- 最近のコメント開始 -->
〜省略〜
<!-- 最近のコメント終了 -->
<!-- 最近のトラックバック開始 -->
〜省略〜
<!-- 最近のトラックバック終了 -->があります。<!-- リンク開始 -->
<div class="sidetitle">
Links
</div><div class="side" id="linklist">
<ul>
<!--link-->
<li><a href="<%link_url>"><%link_name></a></li>
<!--/link-->
</ul>
</div>
<!-- リンク終了 --><script type="text/javascript">
<!--
generateNormalTree("linklist");
//-->
</script> - 「スタイルシートの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
- [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これに.sideと入力して、検索してください。
- .sideの下に/* サイドバーのツリー化 */以下のコードを追加します。
- 必ずバックアップしましょう！
いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「css_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪.side {
〜省略〜
}/* サイドバーのツリー化 */
ul.tree {
margin: 0 0 0 3px!important;
padding: 0!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0!important;
padding: 0!important;
}
ul.tree li {
margin: 0!important;
padding: 0 0 0 13px!important;
background-image: url(http://〜省略〜/tree_lst_solid.gif);※1
background-position: 0 0;
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(http://〜省略〜/tree_end_solid.gif);※2
list-style: none;
}
※1点線の場合はhttp://〜省略〜/tree_lst_dotted.gifです。
※2点線の場合はhttp://〜省略〜/tree_end_dotted.gifです。
なお、これらのURLは、FC2にアップロードした画像URLです。[ファイルのアップロード]で、[記事を書く]をクリックして投稿される<a href="http://〜省略〜/tree_lst_dotted.gif">のURLのことです。 - [プレビュー]で確認して、[更新]をクリックしましょう。
- yozoからのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New うさもに異変!?MIXdeﾂｯｺﾐ＠後姿ﾗﾌﾞﾘｰ同盟 | Top | BlogPet「うさも」の背景紹介〜入梅間近？4〜 Old≫
トラックバックURL
コメント
コメントをありがとうございました。
頑張ってやってみたけど反映されませんでした（T_T) きっと最初にテンプレートを設置した時にめちゃくちゃな事をやっていたからだと思います。
テンプレートを再登録しないと駄目な気配(爆)
また時間を作ってじっくり再登録してみますね。
とても分かりやすい解説でしたよ。ありがとう。
Posted by ととろ at 2006.05.28 23:53 | edit
コメント
＞頑張ってやってみたけど反映されませんでした（T_T)
あらら・・・それはショックですよね。(/≧◇≦＼)ｱﾁｬｰ!!
ほんのちょっとしたことで、エラーしてしまうものですから、
めげずにがんばりましょう。＼(*⌒0⌒)ｂがんばっ♪
＞テンプレートを再登録しないと駄目な気配(爆)
ふふふ・・・yozoも２、３回同じCSSとHTMLをやり直してますよ。しかも最初から・・・（泣）
＞とても分かりやすい解説でしたよ。ありがとう。
いえいえ♪こちらこそ、つたない説明でしたね♪
わかりにくいところは、遠慮なく質問してくださいね♪m(_ _)m
Posted by ととろさんへ at 2006.05.29 00:09 | edit