カテゴリ一覧をサブカテゴリ化し、ツリー表示。
更に開閉式、2ch風表示にカスタマイズします
※このカスタマイズはライブドアブログ限定です。
ライブドアブログの記事は2つのカテゴリを指定できます。
しかしこれは1つの記事を2つの別のカテゴリに登録できる
という事で、親カテゴリ・サブカテゴリという階層式では
ありません。
記事が増えるにつれ、丁寧にカテゴリ分けをしておかないと
訪問者さんに見てもらいにくくなってきます。
丁寧ににカテゴリ分けされており、訪問者さんに優し
いという事はSEOにおいても有利なのは間違いありません。
そうなると標準のプラグインのカテゴリ表示だけでは機能的
に少々心もとないですね。
htmlでIndexを作るか、サイドバーにフリーエリアを置いて、
やはりhtmlを書くしかありません。
しかしどちらも記事が追加される度に自分で書き直さなけ
ればならないのですから大変な作業です。
そこでカテゴリをサブカテゴリ化してくれるスクリプトの
紹介です。
今日紹介する方法はスクリプトを使用しますので、記事
の更新時にカテゴリの指定さえ忘れなければ後は勝手に
サブカテゴリ化し、表示してくれます。
ゆっくり読んで頂ければ案外簡単なカスタマイズです。
ぜひ利用して頂きたいと思います。
※どのカスタマイズでもそうですが、
まず先にバックアップを取ってから行います。
また、カスタマイズが不安な場合、
テスト用のブログを作って
そこで試してからメインブログに反映させましょう。
では始めましょう。
■手順1
まず、ブログの管理画面から
「プラグインの設定 / 新規追加」「基本プラグイン」
より「カテゴリ別アーカイブ」を追加しておきます。
すでに追加してある場合は追加の必要はありません。
※ここで付けたプラグイン名を覚えておいて下さい。
後で必要になります。
■手順2
フリーエリアをプラグインの一番最後に作成します。
※3カラム化している場合必ず「Bの最後」にして下さい。
■手順3
以下のコードを先程作成したフリーエリアに貼り付けてください。
----------- ここからフリーエリアBに貼り付け -----------
<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>
----------- ここまでフリーエリアBに貼り付け -----------
※("Categories"); ←のCategoriesの部分は、
「カテゴリ別アーカイブ」のプラグインを追加した時に
あなたが設定したプラグイン名に変えて下さい。
特別に変更していない場合、プラグイン名は標準では
Categoriesになっていますのでそのままでかまいません。
■手順4
以下のコードをCSSに追記します。
一行目目↓
@charset "EUC-JP"; の次行へ追加すれば良いです。
----------- ここからCSSに貼り付け -----------
<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(https://image.blog.livedoor.jp/takoashi/tbm.gif) no-repeat;
}
.leaf_last {
padding:2px 2px 2px 18px;
margin:0;
background: url(https://image.blog.livedoor.jp/takoashi/tbe.gif) no-repeat;
}
</style>
----------- ここまでCSSに貼り付け -----------
※このコードはCSSだけでなく、先ほどのコードと一緒に
フリーエリアに一緒に記述しても構いません。
CSSに記述して、デザインが崩れた等の不都合がある場合
はフリーエリアにに記述して下さい。
どちらでも動作は同じです。
■手順5
カテゴリの設定の変更をします。
アフィリエイト(アクセスアップ)
アフィリエイト(商材レビュー)
のようなカテゴリにしていた場合、カテゴリの設定から
以下のように設定しなおして下さい。
アフィリエイト：アクセスアップ
アフィリエイト：商材レビュー
※「：」は必ず全角です。
これで、親カテゴリ【アフィリエイト】の下に「アクセスアップ」と
「商材レビュー」のサブカテゴリーを設定した事になります。
もちろん、各記事もカテゴリの設定をしなおす必要
があります。
すでに記事数の多い場合、大変な作業になると思いますが、
一度設定しておけば、その後は自動でやってくれますので
頑張って設定して頂きたいと思います。
■手順6
忘れないように「全て」再構築して下さい。
これで、カテゴリのツリー化が完成しているはずです。
しかし、カテゴリが増え、記事が増えるとツリーが長く
なり過ぎて困る事があります。
では、ツリーを開閉できるようにしてしまいましょう。
■手順7
以下のコードをさきほどフリーエリアに貼り付けたコードの
「おまじない」の次の行に挿入します。
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>';
----------- ここまで -----------
【挿入済みのコードはこうなります】↓
----------- ここからフリーエリアBに貼り付け -----------
<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>
----------- ここまでフリーエリアBに貼り付け -----------
これでツリーが開閉式になりました。
各カテゴリ横の「+」をクリックする事で開閉ができます。
■おまけ
開閉式でなく、2chのスレッド一覧風にするには、先程の
コードの代わりに同じく次のコードを挿入して下さい。
var cate_td = new TreeDataObj(); // おまじない
*********** ここに挿入します ***********
ConvertTree(cate_tree,cate_div,cate_td);
----------- ここから -----------
cate_td.LeafTS = '';
cate_td.LeafTSL = '';
cate_td.LeafTE = ' / ';
cate_td.LeafTEL = '';
----------- ここまで -----------
【挿入済みのコードはこうなります】↓
----------- ここからフリーエリアBに貼り付け -----------
<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>
----------- ここまでフリーエリアBに貼り付け -----------
お好みに合わせて使いわけて下さい。
なお、本日の改造は下記サイトのソースを利用させて
頂き、説明の少々わかり難い部分を私なりに書き直さ
せて頂いたものです。
こちらは、ライブドアブログ利用者にとっては非常に
参考になるカスタマイズ方法がたくさんありますので
ぜひご覧になって下さい。
すでに有名ですね。
弱小エンジニアの小言
http://www.takoashi.net/archives/30087011.html
ぜひ、ご活用下さい。
- 2007年04月09日
- ブログカスタマイズ：css/html
- コメント(24)
- トラックバック(7)
1. Posted by 「ブログアフィリエイトで稼ぐ大学生のブログ！」@由希 2007年04月09日 00:45
こんばんはtomさん！由希です＾＾
さきほどはお手数おかけしました（汗）
もうDLできるようになりましたｗ
これだけのタグ見たら・・・今すぐ寝られそうです（爆）
いえいえ！私がコレに弱いだけですｗ
応援させていただきます♪
2. Posted by 戦略の匠 2007年04月09日 00:51
こんばんは！匠です。
う〜ん。ライブドアブログ使ってる人が
うらやましくなってきました（笑
タグが並んでるのみたら酔いました（爆
応援です。
3. Posted by 情報商材レビュー 自由人 2007年04月09日 00:56
お！一番のり〜。
tomさん、おひさです。自由人です。
コメント回りお休みさせて貰っていますが、いまランキングを眺めてたら
tomさんのブログ紹介文が面白くて立ち寄ってみました（笑）
小熊ってなんでしょう？（笑）
まあ、それはおいといて。
少し前の記事から読ませて貰いましたが、確かに前とは変わりましたね。
「素材」としてのブログ。
いいっすな。
自分が作りあげてきたブログって財産だと思いますし。
それが人の役に立つものなら尚更ですよね。
今日の記事なんかもよく勉強してるなあって感心してしまいました＾＾
tomさんがいまやっていること。
まさに「日給8万円」のおずさんがやってきたことと同じ事だと感じました。
tomさんと語ると長くなるのでこのへんで（笑）
またメールしますね〜。
応援ポチッとな♪
4. Posted by 情報商材レビュー 自由人 2007年04月09日 00:57
ありゃ、3番手になってもうた。。。
PS.コメントのお返しはいいですよ〜。記事更新してないし（笑）
5. Posted by たもちゃん 2007年04月09日 01:31
こんばんは♪たもちゃんです＾＾
タグがぁ・・・
並んでる・・・
こういうのみたら頭が痛くなる・・・（笑
応援ぽちっ☆
6. Posted by ちょっと復活しました…＠町田鈴香 2007年04月09日 04:47
tomさん、おはようございます！
町田鈴香です。
すごいですね！カスタマイズタグがいっぱい！
しかも2ch風ですか！
カスタマイズは、やり始めると、
時間を忘れますよね（笑）。
今日も応援クリックしておきました！
またお話を聞かせていただきに来ますね！
次回も楽しみにしています！
7. Posted by ebayと情報起業で自由人・・・ing 2007年04月09日 08:11
tomさん、おはようございます。
tavathaです。
あ〜〜これなら解りやすいかも・・・。
実は私はこれに挑戦したのですが、
どうしてもツリーにならなくて、
カテゴリーわけされたままとなってました♪
ちょっといつか試してみます^^:
ありがとうございます♪
応援♪
8. Posted by 情報商材＠在宅アフィリエイトでラクラク不労所得 2007年04月09日 09:03
tomさん、Kazzaです。すごいです！このツリーレッスン。。ちょいとプリントアウトしてもう一度やってみようと思います。やりたかったんですが、、なんせHTMLの知識不足でして。。ありがとうございました！
9. Posted by セールス分析のささ 2007年04月09日 10:11
こんにちは
カスタマイズのみにかんしては
永遠の課題です
応援
10. Posted by 寝ながら稼ぐ男 でん 2007年04月09日 10:56
コンニチワ〜
でんです。
最近ＴＯＭさんのブログの記事はカスタマイズの話が多いですね〜
私は知らない話ばかりなので楽しいです〜
実行していないけど（汗）
応援クリーック！
11. Posted by marimama◆誰でもできる超簡単アフィリエイト２倍法則の方法◆ 2007年04月09日 11:20
こんにちは♪tomさん♪
marimamaです♪
いつも、訪問＆コメント＆応援ありがとう(^^♪
これ、凄く良いね。
でも、なんだか、難しそう。。
このサイトもあとでじっくり、みよっと。
カスタマイズ。。良いな。。
でも。。時間が。。。
応援ポチッとな＼(*⌒0⌒)ｂがんばっ♪
12. Posted by びっくり 2007年04月09日 11:46
こんにちわ。
岡田塾って稼げるんですね｡
私も入塾したいなあ。
でもお金が・・
応援ぽち！
13. Posted by 夢をカタチにする★もへじのネット起業冒険記 2007年04月09日 13:02
こんにちは〜
もへじです。
いつも、
訪問・コメント
ありがとうございます。
はい。
岡田塾、
いよいよはじまりますね。
楽しみです。＾＾
心をこめて
応援(^o^)/････☆..
クリ〜ック★
14. Posted by おすし 2007年04月09日 13:11
tomさん、こんにちは。
お世話になります、おすしです。
ツリー表示で開閉式だと本当に便利ですね。
勉強になりました。
ちょっとしたミスで全てがパーになってしまうこともありますので、カスタマイズ前には必ずバックアップを取っておきたいですね。
今日がいい日になりますように”凸”
15. Posted by 電脳牧師の How to アフィリエイト 2007年04月09日 14:39
こんにちは。電脳牧師のたいぢです。
詳しい説明、感謝。
ただ、私はライブドアじゃない〜（爆）
自分のブログを、自分でカスタマイズできるようになるとおもしろいですよね。
私も、記事の内容そっちのけではまりました。
応援ポチッ☆
笑顔同封 たいぢ
16. Posted by 情報商材アフィリエイト王国☆あんず王子 2007年04月09日 16:04
tomさん こんにちは
あんず王子でっす。
ツリー化は、まだやっていなかったです・・
というか、java入れて重くなるのが怖くて(^-^;
やはり、最新コメント欄とかは、
ツリーの方が、見やすいですもんね？！
>ラスボスの魔法使いが気になります^^
お気づきかもですが、tomさんも非常に
お世話になっている、アノお方です。
それでは応援していきまーっす。
『あいッ!!』
17. Posted by サト愛☆愛でいっぱいのお金持ち 2007年04月09日 16:56
こんにちは
サトです。
すごいです〜
してみたい・・・
でも記事数が多すぎる・・・
どうしよう〜〜
とりあえず、ブックマークにして
この記事を保存させていただきました＾＾
ありがとう〜〜
応援します！ぽち＾＾
18. Posted by ヤフオク情報商材鑑定士 コウ 2007年04月09日 18:46
ヤフオク情報商材鑑定士 コウです。
ＳＥＯ講座ですね。
与える精神、本当にすばらしいです」。
応援ポチ！！
19. Posted by 野良犬まっさーのアフィリエイトブログ。 2007年04月09日 20:37
こんばんは〜
まっさーです＾＾
私も以前挑戦したんですけど
なぜかうまく行きませんでした（泣）
何でだろ・・・
色々カスタマイズしてるから
訳分からなくなってます（汗
応援▼・ェ・▼ワン♪
20. Posted by 初心者だってネットでお小遣いを稼げる！(bagil) 2007年04月09日 21:11
tomさん こんばんは
bagilです。
ライブドアの人には最高ですね
今日はFC２を触ってたのでもう見たくありません（笑
tomさんのランキングはカテゴリ変えましたね
私も前から思ってましたけど小熊って？
ありがとうございます。 応援ポチ
21. Posted by 情報商材アフィリエイトの極意☆知幸（ともゆき） 2007年04月09日 22:45
tomさん☆ こんばんは〜
知幸（ともゆき）です♪
カテゴリーのツリー化
やってみたいのですが、
挫折した覚えがあります（汗
ちょっと、試してみますね＾＾
では また訪問します♪ 応援☆！
22. Posted by カズヤマ 2007年04月09日 23:01
オーバチュアダイエト600円もあったんですね。。
調べてみたら今最高1200円てのがありました。。使えないですね（笑）
ライブドアのカスタマイズ方法まじ助かります！
今度まとめてカスタマイズするとき重宝させていただきます！
応援ぷちゅ！また遊びにきます〜♪
23. Posted by アフィリエイト冒険塾!!☆夢叶えドットコム 2007年04月10日 02:32
こんばんは！tomさん
らいと☆です。
ご訪問＆あたたかいお言葉ありがとうございます。
それにしてもtomさんのブログはホントに役立つ
情報が満載ですね
きっとこれからもコメント残さずこっそり来ること
もあると思いますので、不審に思わないで
下さいね（笑）
色々活用したいものがありすぎて一度で読みきれません（笑）
ではではー。
応援♪
24. Posted by 根本★情報商材レビューブログ失敗しない商材選び 2008年02月27日 00:41
こんばんは tomさん
根本です。
いつもお世話になっております。
サブカテゴリ
うまくいかず諦めようかと
思っていましたが
tomさんのブログに救われました。
ありがとうございます。
これからもよろしくお願いします。
教えて欲しいことがあるので
あとでメールさせて下さい。
では
応援ポチ
