2008/08/20
ライブドアブログでカテゴリ一覧をサブカテゴリ化する方法
メルマガ配信解除 ⇒ http://www.mag2.com/m/0000265351.html こんにちは、 ご無沙汰してました、ジュウザです。 無料レポートの作成にてこずってましたが、 ようやく完成しました。 編集後記に続きます。 さて、今日は少しマニアックなネタです。 というのは、 みなさんブログはされてますよね。 何使ってますか？ シーサー？ ＦＣ２？ ライブドア？ アメーバ？ まぁ、色々ありますけど、 今回はライブドア限定のネタです。 ライブドアブログのカテゴリ一覧を サブカテゴリ化し、ツリー表示。 更に開閉式、 ２ch的な表示にカスタマイズする方法です。 なのでライブドア以外のブログを使われてる方には 今日のメルマガは為にならないと思います。 ごめんなさい。 さて、ブログで色々と記事が増えてくると カテゴリ別に整理する必要が出てきます。 そこで、カテゴリを分別していくのですが、 ライブドアブログの記事は２つのカテゴリを指定できます。 ところが、この方法は、 １つの記事を２つの別々のカテゴリに登録できるだけで、 親カテゴリ→サブカテゴリという階層式ではありません。 例えば、 メルマガ系というカテゴリの中のＡという商材を カテゴリ表示したくても、標準の方法では、 親カテゴリが２つに増えてしまうだけで、 サブカテゴリとして表示できません。 そうはいっても、記事が増えていくことで、 きちんとカテゴリ分けをしておかないと 訪問者さんにブログを見てもらいにくくなってしまいます。 一方、丁寧にカテゴリ分けされたブログは、 訪問者さんにとっても、ブログ運営者さん自身にとっても 見やすくて優しいですよね。 それに間違いなく、 ＳＥＯ的にも有利になります。 となると、 標準のプラグインのカテゴリ表示だけでは 機能的にも不足感は否めません。 考えられる方法の一つとして、 サイドバーにフリーエリアを置いてｈｔｍｌを書くか、 ｈｔｍｌでＩｎｄｅｘを作るという方法があります。 ところが、これらの方法では、 どちらも記事を追加する都度、 自分で書き直さなければならないです。 これはこれは大変な作業です。 これでは記事を作ることがストレスになってしまいます。 なので、この方法は使わずに、 カテゴリをサブカテゴリ化してくれる スクリプトをご紹介します。 今回ご紹介する方法は、スクリプトを使用するため、 記事を更新する際にカテゴリの指定をきちんと行えば、 後は自動的にサブカテゴリ化して表示してくれます。 何か難しそうと思われるかもしれませんが、 案外やってみると、簡単にできるはずですから ゆっくり読んで、安心して取り組んでください。 念のため、カスタマイズするときは、 先にバックアップを行うことをオススメします。 また、現在気に入ったブログをお持ちで、 カスタマイズすることで変わってしまわないか 不安な方もいるかと思います。 そんな方は、別にテスト用のブログを作って そこで試しながら、主となるブログに反映させていきましょう。 では始めます。 ◆ 順序その１ まず、ブログの管理画面から 「プラグインの設定 / 新規追加」 ↓ 「基本プラグイン」 ↓ 「カテゴリ別アーカイブ」から「追加する」で カテゴリへのリンクを再度バーに追加してください。 すでに追加してある場合は追加の必要はありません。 またここで付けたタイトルを覚えておいてください。 ◆ 順序その２ フリーエリアをプラグインの一番最後に作成してください。 なお、３カラム化している場合には、 必ず位置を「Ｂの最後」にして下さい。 ◆ 順序その３ 以下のコードを 先ほど作成したフリーエリアに貼り付けてください。 ----------- ここからフリーエリアＢに貼り付け ----------- <script type="text/javascript" src="http://blog.livedoor.jp/takoashi/js/ConvertTree.js"></script> <script type="text/javascript" src="http://blog.livedoor.jp/takoashi/js/CreateCategoryTree.js"></script> <script language="JavaScript"><!-- var cate_div = GetPluginByTitle("Categories"); var cate_tree = CreateTreeDataFromCategories(cate_div,"："); var cate_td = new TreeDataObj(); // おまじない ConvertTree(cate_tree,cate_div,cate_td); // --></script> ----------- ここまでフリーエリアＢに貼り付け ----------- ※("Categories"); ←のCategoriesの部分は、 「カテゴリ別アーカイブ」のプラグインを追加した際に あなたが設定したタイトル名に変えて下さい。 特に変更していない場合は、タイトル名は 標準では「Categories」になっていますので、 そのままで結構です。 ◆ 順序その４ 以下のコードをＣＳＳに追記します。 一行目目↓ @charset "EUC-JP"; の次行へ追加すれば良いです。 ----------- ここからＣＳＳに貼り付け ----------- <style> .key_area { padding:0 0 0 10px; text-align:left; } .key { } .leaf_area { margin:3px 3px 3px 3px; text-align:left; } .leaf { padding:2px 2px 2px 18px; margin:0; background: url(http://image.blog.livedoor.jp/takoashi/tbm.gif) no-repeat; } .leaf_last { padding:2px 2px 2px 18px; margin:0; background: url(http://image.blog.livedoor.jp/takoashi/tbe.gif) no-repeat; } </style> ----------- ここまでＣＳＳに貼り付け ----------- なおこのコードは、ＣＳＳだけでなく、 先ほどのコードと一緒にフリーエリアに記述しても結構です。 ＣＳＳに記述した場合、もしかしたら デザインが崩れてしまう等の不都合が 発生するかもしれません。 そのときは、 フリーエリアに記述して下さい。 どちらでも動作は同じです。 ◆ 順序その５ カテゴリの設定の変更をします。 メルマガ系(商材Ａ) メルマガ系(商材Ｂ) のようなカテゴリにしていたときは、 カテゴリの設定から下記のように 再設定してください。 メルマガ系：商材Ａ メルマガ系：商材Ｂ ここで大切なことですが、 「：」は必ず全角にしてください。 こうすることで、 親カテゴリ【メルマガ系】の下に 「商材Ａ」と「商材Ｂ」のサブカテゴリーが 設定できたことになります。 また当然のことながら、 他の各記事もカテゴリの設定を 再設定する必要があるのでご注意ください。 もちろん、すでに多くの記事がある場合は、 結構大変な作業になってしまいますが、 いったん再設定してしまえば、 ごは自動的に分別されますので、 根気よく再設定してください。 ◆ 順序その６ ここまでで、 カテゴリのツリー化が完成しているはずですが、 「全て」を再構築しておくことを忘れないようにして下さい。 これでツリー化できましたが、 記事が増え、カテゴリも増えてくると ツリーが長くなり過ぎて困ってしまうこともあります。 そこで、今度は、 ツリーを開閉できるようにする方法です。 ◆ 順序その７ 以下のコードを 先ほどフリーエリアに貼り付けたコードの 「おまじない」の次の行に挿入してください。 var cate_td = new TreeDataObj(); // おまじない *********** ここに挿入します *********** ConvertTree(cate_tree,cate_div,cate_td); ----------- 挿入部分はここから ----------- // 開閉するための関数 function opentree(cate_id) { var catediv = document.getElementById(cate_id); if( catediv != null && catediv.style.display == "none" ) { catediv.style.display = "block"; } else { catediv.style.display = "none"; } } // 開閉するための設定 cate_td.KeyTS = '<div class="key"><a href=javascript:opentree(\'##ID##\') class="atcate">[+]</a> '; cate_td.KeyTE = '</div>'; cate_td.KeyTSN = '<div class="key">'; cate_td.KeyTEN = '</div>'; cate_td.LeafAS = '<div class="leaf_area" style="display:none" id="##ID##">'; cate_td.LeafAE = '</div>'; ----------- 挿入部分はここまで ----------- 【挿入済みのコードはこうなります】↓ ----------- ここからフリーエリアＢに貼り付け ----------- <script type="text/javascript" src="http://blog.livedoor.jp/takoashi/js/ConvertTree.js"></script> <script type="text/javascript" src="http://blog.livedoor.jp/takoashi/js/CreateCategoryTree.js"></script> <script language="JavaScript"><!-- var cate_div = GetPluginByTitle("Categories"); var cate_tree = CreateTreeDataFromCategories(cate_div,"："); var cate_td = new TreeDataObj(); // おまじない // 開閉するための関数 function opentree(cate_id) { var catediv = document.getElementById(cate_id); if( catediv != null && catediv.style.display == "none" ) { catediv.style.display = "block"; } else { catediv.style.display = "none"; } } // 開閉するための設定 cate_td.KeyTS = '<div class="key"><a href=javascript:opentree(\'##ID##\') class="atcate">[+]</a> '; cate_td.KeyTE = '</div>'; cate_td.KeyTSN = '<div class="key">'; cate_td.KeyTEN = '</div>'; cate_td.LeafAS = '<div class="leaf_area" style="display:none" id="##ID##">'; cate_td.LeafAE = '</div>'; ConvertTree(cate_tree,cate_div,cate_td); // --></script> ----------- ここまでフリーエリアＢに貼り付け ----------- これでツリーが開閉式になり、 各カテゴリ横の「＋」をクリックすると 開閉できるようになりました。 ◆ こちらはお好みで 開閉式でなく、２chのスレッド一覧風にするには、 先程のコードの代わりに次のコードを挿入して下さい。 var cate_td = new TreeDataObj(); // おまじない *********** ここに挿入します *********** ConvertTree(cate_tree,cate_div,cate_td); ----------- ここから ----------- cate_td.LeafTS = ''; cate_td.LeafTSL = ''; cate_td.LeafTE = ' / '; cate_td.LeafTEL = ''; ----------- ここまで ----------- 挿入済みのコードはこうなります】↓ ----------- ここからフリーエリアＢに貼り付け ----------- <script type="text/javascript" src="http://blog.livedoor.jp/takoashi/js/ConvertTree.js"></script> <script type="text/javascript" src="http://blog.livedoor.jp/takoashi/js/CreateCategoryTree.js"></script> <script language="JavaScript"><!-- var cate_div = GetPluginByTitle("Categories"); var cate_tree = CreateTreeDataFromCategories(cate_div,"："); var cate_td = new TreeDataObj(); // おまじない cate_td.LeafTS = ''; cate_td.LeafTSL = ''; cate_td.LeafTE = ' / '; cate_td.LeafTEL = ''; ConvertTree(cate_tree,cate_div,cate_td); // --></script> ----------- ここまでフリーエリアＢに貼り付け ----------- お好みに合わせて使いわけるといいでしょう。 なお、今回のカスタマイズは、 下記サイトを利用させて頂き、 難しい部分を私なりに分かりやすく 書き直したものです。 ライブドアブログ利用者にとっては、 とても参考になるカスタマイズ方法が たくさんあるサイトですので、 是非ご覧下さい。 『弱小エンジニアの小言』 ⇒ http://www.takoashi.net/archives/30087011.html ◇ 編集後記 ◆ 思いのほか、 無料レポートに時間がかかってしまったので、 メルマガ発行がご無沙汰になってしまいました。 ごめんなさい。 ですが、時間をかけた分、 それなりのレポートには できたのではないかと思います。 ジュウザの最新レポート 『【ジュウザ】１日たった３０分の作業なのに、 アフィリエイトをはじめて２ヶ月目から 月１３万を稼いだ魔王の悪戯 （再配布可特典２つ付）』 ⇒ http://s-ter.net/juza/c/00029.html 何だか長ったらしいタイトルになってしまいましたが、 なかなかアフィリエイトで稼げていないって方には 是非参考にしてもらいたい内容です。 また、今回、再配布可の特典を２つ付けましたので、 こちらを手に入れるだけでも有益ではないかと思います。 よろしければ、ダウンロードしてみてください。 ダウンロードはこちらから ⇒ http://s-ter.net/juza/c/00029.html では、今回も最後までありがとうございます。 心から感謝します。 ◇ メールポリシー ◆ このメルマガにお寄せ頂いたご意見やご相談は、 事前の断りなく、個人情報などを伏せた上で、 ブログやメルマガでご紹介させて頂く場合があります。 引用を望まない方はその旨を必ずお知らせ下さい。 メールはこちらからどうぞ ⇒ http://s-ter.net/juza/c/00017.html ◇ 発行者情報 ◆ 発行者 ： ジュウザ e-mail ： syon227@nifty.com blog ： http://syon227.livedoor.biz/ 登録・解除 ： http://www.mag2.com/m/0000265351.html 意見・相談 ： http://s-ter.net/juza/c/00018.html
