--年--月--日

スポンサーサイト

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

右サイドバーのメニューのツリー化する。(1)

「Categories」(カテゴリーリスト)、「Monthly Archives」(アーカイブリスト)、「Recent Entries」(最近のエントリー)、「Links」(リンク)のツリー化をしました。

このカスタマイズは、小粋空間yujiroさんの記事サイドメニューのツリー化スクリプト for FC2 ブログを参考にさせていただきました。yujiroさん、どうもありがとうございました m(_ _)m

  1. yujiroさんの記事サイドメニューのツリー化スクリプト for FC2 ブログを開いて、
    「1.」の『maketree.js』をダウンロードします。
    「5.」のツリーを表示するための画像をダウンロードしておきます。
    実線の場合は「tree_lst_solid.gif」と「tree_end_solid.gif」をダウンロードしましょう。
    点線の場合は「tree_lst_dotted.gif」と「tree_end_dotted.gif」をダウンロードしましょう。
  2. FC2ブログにログインして、管理者ページの左サイドの
    「ホーム」の項目[新しく記事を書く]をクリックします。
  3. [ファイルのアップロード]ボタンをクリックします。
  4. 「ファイルの選択」の[参照]ボタンをクリックして、ダウンロードした『maketree.js』とツリーを表示するための画像を選択して[アップロード]をクリックします。
    実線の場合は『maketree.js』「tree_lst_solid.gif」「tree_end_solid.gif」をアップロードしましょう。
    点線の場合は『maketree.js』「tree_lst_dotted.gif」「tree_end_dotted.gif」をアップロードしましょう。
  5. 左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
  6. 「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
  7. 「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中でクリックします。(この中であればカーソルはどこでも構いません。)
  8. [Ctrl]+[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにCategoriesと入力して、検索してください。
  9. <!-- カテゴリーリスト開始 -->から続く下のコードの赤字のコードを修正します。
    • 必ずバックアップしましょう!

     いつも書いてますが、編集する前に、必ず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>

  10. 「スタイルシートの編集[テンプレート名]を編集しています。」の欄の中でクリックします。(この中であればカーソルはどこでも構いません。)
  11. [Ctrl]+[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これに.sideと入力して、検索してください。
  12. .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のことです。
  13. [プレビュー]で確認して、[更新]をクリックしましょう。

  • yozoからのお願い
 この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m

なお、このテンプレートは、小粋空間yujiroさん作成のFC2ブログテンプレートからお借りしたものです。

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:テンプレート:ブログ

メイン

≪New うさもに異変!?MIXdeツッコミ@後姿ラブリー同盟 | Top | BlogPet「うさも」の背景紹介?入梅間近?4? Old≫

トラックバックURL


コメント

こんばんは!
コメントをありがとうございました。
頑張ってやってみたけど反映されませんでした(T_T) きっと最初にテンプレートを設置した時にめちゃくちゃな事をやっていたからだと思います。
テンプレートを再登録しないと駄目な気配(爆)
また時間を作ってじっくり再登録してみますね。
とても分かりやすい解説でしたよ。ありがとう。

コメント

ととろさん、こんばんはー♪

>頑張ってやってみたけど反映されませんでした(T_T)
あらら・・・それはショックですよね。(/≧◇≦\)アチャー!!
ほんのちょっとしたことで、エラーしてしまうものですから、
めげずにがんばりましょう。\(*⌒0⌒)bがんばっ♪

>テンプレートを再登録しないと駄目な気配(爆)
ふふふ・・・yozoも2、3回同じCSSとHTMLをやり直してますよ。しかも最初から・・・(泣)

>とても分かりやすい解説でしたよ。ありがとう。
いえいえ♪こちらこそ、つたない説明でしたね♪
わかりにくいところは、遠慮なく質問してくださいね♪m(_ _)m

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


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