ボボコフのブックマーク → ブクマページ
2005年05月17日

サブカテゴリ風に表示する

まず前提としてこのカスタマイズは
takoashiさんがライブドアブログ用に作られた
サブカテゴリ表示の方法をそのまま使用している。

本来ならばSeesaa用にアレンジするべきなのだろうが
方法がわからん為、
こっちのHTMLを強引にライブドア風に書き換えて
そのまま使わせていただいている。

なので上手くいったらtakoashiさんに感謝して下さい。

というか、まずはtakoashiさんの方の説明を参照して下さい。
その方が余計な混乱をせずに済むかもw
自分でSeesaa用にアレンジできる方は自分でやって下さい。
Seesaaに適用する方法がわからない方だけ、
ここの説明を見てみて下さい。(自信ないので)

それからこのカスタマイズに挑戦して
問題が発生しても僕は責任を取れないので
予め今の状態をバックアップした方が良いです。

という事を踏まえて、本題。
○ HTML編集
Seesaaのマイブログのページから
デザイン」→「コンテンツ」→
コンテンツ一覧の「カテゴリ」へと移動。
さらに右上の「コンテンツHTML編集」へ。
現在のHTMLが表示される。

デザインによって多少変わるのかもしれないが
恐らく
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br />
<% /loop -%>
<% content.footer -%>
</div>
となっているはず。

こいつを以下のように書き換え。
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<div class="sidebody">
<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)
</div>
<% /loop -%>
<% content.footer -%>
</div>
<script language="JavaScript"
src="http://bobokov.seesaa.net/js/category_tree.js">
</script>
<script language="JavaScript">
category_convert_treeview( "カテゴリ", ":", "  L  ", "links-left" );
</script>
軽く説明すると、
ライブドアブログではカテゴリの一つ一つが
sidebodyというclassになっており、
このカスタマイズにも関係する為追加してやる。

(<% category.article_count | __or__ | echo("0") %>)の後の
改行<br />は邪魔なので削除。

さらにtakoashiさん作成のjsファイルと
その呼び出しを追加。
僕は最初jsファイルを自分で改造するつもりだったので
ダウンロードして自分の所にアップしたモノを使ってるが、
takoashiさんの所を直に
http://blog.livedoor.jp/takoashi/category_tree.js
と指定して構わないと思われる。


[6/1 修正 開始]
takoashiさんの所の元ファイルは文字コードが「EUC」であり、
「Shift_JIS」に変換しなければ
Seesaaでそのまま使うことができない。


自前で変換できる人は
元ファイルを「Shift_JIS」に変換後アップして参照、
できない人は上記のように僕が変換したもの
http://bobokov.seesaa.net/js/category_tree.js
を参照すればOK。
ただし元ファイルが更新されても
僕の所は更新されていない可能性あり。
(現在は6/1時点の最新版)
[修正 終わり]

呼び出し関数category_convert_treeview()の引数は
1、このコンテンツの名前
  通常は「カテゴリ」のはず。僕は「メニュー」としている。
2、区切り文字
  次で説明するが通常は「:」でいいかと。
3、サブカテゴリの装飾HTML
  これも通常このままで良い。
  サブカテゴリの頭についている「L」を変更したければ
  ココを書き換える。
4、「カテゴリ」が存在するサイドバーのID
  Seesaaの場合、カテゴリが左にある場合は「links-left」
  右にある場合は「links」でOKだと思う。

[6/1 追記 開始]
さらに機能の追加に伴い
5、表示形式
6、カテゴリータイトルの前に記述されるHTML
7、カテゴリータイトルの後に記述されるHTML
8、サブカテゴリーのタイトルの前に記述されるHTML
9、サブカテゴリーのタイトルの後に記述されるHTML
10、サブカテゴリー全体を囲むdivタグ(class=tsub)に設定するスタイル
と引数はまだまだあるのだが
この辺りはtakoashiさんの説明を参照して下さい。
これらの機能を使わないのであれば
何も指定しなくて大丈夫。
[追記 終わり]

これでHTML編集は終了。

○ カテゴリ編集
カテゴリ名を
スポーツ:広島カープ
スポーツ:プロ野球
スポーツ:サッカー
のように変更する。
ここで「:」は上記のjs呼び出し関数の
第2引数に指定した文字と同じにする事。

カテゴリ編集はこれだけ。

あとは全てを再構築すれば上手くいく、、ハズ。

問題あれば何でも聞いて下さい。
しかし説明は苦手だ。。。w

カスタマイズ関係は
サブブログの方で色々書いてます!

ブログ? カスタマイズ? アフィリエイト?
この記事へのコメント
こんにちは。

http://blog.livedoor.jp/takoashi/category_tree.js は、直接利用されても構いません。時々、バグを修正したりしているのでそちらのほうが便利だとは思います。
#バグを埋め込むかもしれませんが・・・

しかし、ライブドアブログの仕様が変わったら利用できなくなるかもしれません。

それ以外は、問題ないと思います。うちもそろそろ書き直そう。。
Posted by takoashi at 2005年05月17日 16:32
大丈夫ですか、了解です。
説明するのって難しいですね。。。
Posted by ボボコフ at 2005年05月18日 12:55
ボボコフさんありがとうございます!

早速チャレンジしてみようと思います。
結果はまたコメントします。
Posted by sanshiro at 2005年05月18日 13:41
ちょっとメンドイですけど頑張ってください!
上手くいくといいんですけど。。
Posted by ボボコフ at 2005年05月18日 17:48
はじめまして。
takoashiさんに教えてもらってやってきました。
上の記述マル写ししたんですが・・・
なぜかうまくいきません。。。
原因もまったくわからないのです・・・
Posted by みや at 2005年05月31日 13:01
はじめまして。

うまくいきませんでしたか。。。
変更前のHTMLもここに書いているものと同じでした?

む、みやさんのブログを拝見しようとしたのですが
表示されませんね。。
アドレスあってますか?

何とか原因を突き止めたいのですが。。
Posted by ボボコフ at 2005年05月31日 13:12
あぁ、早いレスありがとうございます(^^)
変更前のHTMLも全く同じで、
追加する内容もそのとおりに記述(というか、コピペ)しました!

アドレス・・・すいません。たまによく間違えるようです・・・こっちはいけるハズ・・・
Posted by みや at 2005年05月31日 13:22
二重トラバしちゃいました・・・。
すいません。
もう一つのほうのブログをトラバさせていただいてます。
こっちは最近立ち上げたばかりなので、
コンテンツどころじゃありませんが・・・
なにとぞ、アドバイスを・・・!
Posted by みや at 2005年05月31日 15:03
すみません、うまくいかないのは
僕が重大な見落としをしてたからでした!

>takoashiさんの所を直に
http://blog.livedoor.jp/takoashi/category_tree.js
>と指定して構わないと思われる。
と書いたのですがそれじゃ駄目なんです。
僕自身この部分で悩んだのに忘れてました(汗

大元のtakoashiさんのjsファイルは
文字コードがEUCなんですが、
Seesaaで普通に使うには
Shift-JISにしないとダメなんでした。

takoashiさんの所のjsファイルを自分の所で
Shift-JISに変換できるのであれば
変換したものを使ってみて下さい。
できないのであればとりあえず僕の所の
http://bobokov.seesaa.net/js/category_tree.js
これを直接参照するか、
落として自分のところにアップするかして
使ってみて下さい。

それでもうまくいかないとか
↑の方法がよくわからないとかあれば
またコメント下さい。

takoashiさんに確認した上で
本文も修正しなければ。

本当にごめんなさい。
Posted by ボボコフ at 2005年05月31日 16:18
あ、でも僕が使わせていただいてるのは
旧バージョンなので
takoashiさんが追加された新機能が使えません。

僕の方も新バージョンにしておくべきだろか。。。
Posted by ボボコフ at 2005年05月31日 16:23
できました!!!
ボボコフさんのおかげで、
大きな山を越えました!
ありがとうございます(^^)

ところで、
>大元のtakoashiさんのjsファイルは
>文字コードがEUCなんですが、
>Seesaaで普通に使うには
>Shift-JISにしないとダメなんでした。

っていうのは、
「設定」−「MTインポート」で、
「MT形式ログファイル」をcategory_tree(takoashiさんとこのヤツ)にして、
「文字コード」を「Shift-JIS」にしたら、
変換できるんでしょうか?
それとも、「MT形式ログファイル」の
category_treeが、EUCだから、「EUC-JP」にして
インポートして、そのあとにエクスポートで
「Shift_JIS」に変換するんでしょうか?

すいません・・・初心者で・・・↓
Posted by みや at 2005年06月01日 08:18
できましたか、良かったです。
チャレンジしてくれた人自体初だったのでw

おかげで足りない部分にも気づけたし助かりました。

EUCからShift-JISへの変換は、
>「設定」−「MTインポート」で、〜
では無く、
僕の場合はまずEUCのファイルを自分のPCに
ダウンロードして、
エディタ(僕は秀丸エディタ)で開き、
名前を付けて保存で形式をShift-JISにして保存する、
という方法で変換しました。

方法は他にも色々あるのだと思いますが
僕もあまり詳しくないもので。。(汗
Posted by ボボコフ at 2005年06月01日 10:13
こんにちは♪
さっそくのお返事ありがとうございます(^^)
変換はちょっとややこしそうですね・・・
(あと、お金がかかるのが・・・(汗))

何はともあれ、うまくできてほんと助かりました!
次は、何をいじろうかなぁ・・・
Posted by みや at 2005年06月01日 12:09
こんにちは!
takoashiさんのとこのを参考(というよりマル写し)して、
サブカテゴリが開閉できるようにしました!

ボボコフさんのアドバイスがなければ、
実現できなかった・・・!(ほんとに)

ありがとうございました(^^)
Posted by みや at 2005年06月01日 14:58
>変換はちょっとややこしそうですね・・・
>(あと、お金がかかるのが・・・(汗))
お金はかけなくてもできますよ。
でもまあ頑張ってやる必要も無いと思います。

あ、もしサブカテゴリを
一段下げて表示したいのであれば
category_convert_treeviewの引数の
" L "としている所のスペースを
「 」に置き換えるといいですよ。
たしか半角スペースになるはずだったと思います。


>サブカテゴリが開閉できるようにしました!
拝見しました。
いい感じですね!

うまくいって良かったです。
Posted by ボボコフ at 2005年06月01日 15:05
ありがとう。
半日かかってなんとか出来ました。
どうしても開閉式が欲しくて悪戦苦闘しました(笑

今はとても嬉しいです。

ありがとう。
Posted by at 2005年10月03日 18:12
説明が下手で申し訳ないです(汗

でも出来て良かったです。
いい感じですね!
Posted by ボボコフ at 2005年10月04日 06:37
ボボコフさん

はじめまして。
このページを参照して、格闘すること
1時間、やっとできましたヽ(T∀T )ノワッショーイ!!!!

うまくいかなかったのは、「links-left」
にしていたからみたいです。

本当にどうもありがとうございました。
Posted by banyan at 2005年11月23日 17:54
もっと上手く説明できればいいんですけどね。。
とにかくうまくいって良かったです!
Posted by ボボコフ at 2005年11月24日 10:30
はじめまして。

前々から参考にさせて頂いてます。

今回、こちらの記事についてブログに書かせて頂いた&記事内でリンクを貼らせて頂いたので、報告に参りました。

マズイ記述がありましたら忠告ください。

よろしくお願い致します。
Posted by ETY at 2006年03月08日 17:40
リンク、ありがとうございます。
大歓迎です。

丁寧に書いていただいて嬉しいです。
Posted by ボボコフ at 2006年03月08日 18:24
jsファイルを参照させてもらいました。
ありがとうございます。

サブカテゴリ間に改行が入るのは、こちらの環境に
依存するのでしょうか?
Posted by gaichi56 at 2006年05月02日 14:51
コメントありがとうございます。

>サブカテゴリ間に改行が入る
これは、

>(<% category.article_count | __or__ | echo("0") %>)の後の
>改行<br />は邪魔なので削除。
恐らくこれで解決するんじゃないかと思うのですがどうでしょうか。
それでもまだ改行があるようでしたら申し訳ありませんがもう一度コメント下さい。
よろしくお願いします。
Posted by ボボコフ at 2006年05月02日 15:37
はじめまして。サブカテゴリ、成功しました!
感動です!
ありがとうございました。
今後とも参考にさせていただきます。
Posted by つかっちー at 2007年06月22日 12:46
はじめまして。
お役に立てて良かったです。
また何かあればよろしくお願いします。
Posted by ボボコフ at 2007年06月22日 13:32
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのTrackBack URL
http://blog.seesaa.jp/tb/3700762
今週も戦ってます。
Excerpt: 今週もがんばってます。早く次のステップにすすみたいなぁ・・・
Weblog: ブログを見やすくするためにテストするブログ
Tracked: 2005-05-31 15:01
サブカテゴリ風に表示する
Excerpt: 2005/10/28日現在、 Seesaaブログはサブカテゴリの設定に対応してませんが、 無理やりサブカテゴリ風に表示する方法です。 僕のもう一つのブログに以前書いたので そっちへのリンクを貼ってお..
Weblog: ブログ? カスタマイズ? アフィリエイト?
Tracked: 2005-10-28 11:58
メニューのサブカテゴリ化と開閉メニュー
Excerpt: サブカテゴリ化については、ボボコフさんがお書きになった「サブカテゴリ風に表示する」を参照しました。
Weblog: Fabfours(仮名)
Tracked: 2005-11-24 01:23
カテゴリの分類とツリー化【2】
Excerpt: サブカテゴリ化の方法をもう一つ、見つけましたのでご紹介。 こちらの方法だと、2chのスレッド一覧のような表示や、↓の画像のように、サイドコンテンツの開閉ではなくサブカテゴリ自体の開閉が出来るように偽..
Weblog: 雑記
Tracked: 2006-09-17 08:34
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。