【カテゴリ：パソコン ブログカスタマイズの記録】
このブログのサイドバーに表示していた『カテゴリ』の一覧ですが、折り畳み可能なツリー形式で表示できるように変更したので、その記録です。
今回参考にさせていただいたのは、以下のページです。
Lc-Factory＠Seesaaブログ: Lc.ツリーカテゴリー(for Seesaa)を配布です。:
http://lctree.seesaa.net/article/94747204.html
http://lctree.seesaa.net/article/94747204.html
上記ページは約５年以上も前のものでしたが、内容は非常に素晴らしいものでした。
自分は上記ページから『Seesaaブログ向けLc.ツリーカテゴリーのソース』をコピーさせて頂き、ソース内のパラメータを一部変更するだけで簡単にツリー化させることができました。
スポンサーリンク
ただ、実際にこのブログ用としてカスタマイズするにあたり色々と試行錯誤はありましたが．．．
以降、今回の変更内容及び手順です。
１．以下のような『デザイン＞ PC＞ コンテンツ』の画面を表示します。
２．『カテゴリ』のコンテンツアイコンをクリックします。
３．以下のような画面が表示されるので、自分の場合は表示件数を最大値の100に設定しました。
４．右上の『コンテンツHTML編集』をクリックします。
５．以下のような『カテゴリのHTML編集』画面が表示されるので、デフォルトの内容は全て削除し、前記の作者様のページ（＝ http://lctree.seesaa.net/article/94747204.html ）内から『Seesaaブログ向けLc.ツリーカテゴリーのソース』をコピーして貼り付けます。
【補足】：『再配布はＮＧ』となっていましたので、この記事内にソースは掲載していません。
６．『ファイルのアップロード』にて、ツリーを開閉するフォルダアイコンをアップロードします。
このフォルダアイコンの画像ファイルは、以下のページからダウンロードさせて頂きました。（同じ作者様が配布しているページです。）
７．ソース内のパラメータを変更します。
以下は例として、自分のブログ用にカスタマイズした変更内容です。（あくまでも 2013-10-10 時点のものであり、今後更に見直し／変更するかもしれないです。）
８．『保存』ボタンをクリックして保存します。
保存後は、以下のように『設定を完了しました』と表示されます。
９．右上の『×』マークをクリックして画面を閉じます。
１０．ツリー表示をさせるにあたってカテゴリの名前を変更する必要があるので、以下のように『設定』画面で『カテゴリ設定』をクリックします。
カテゴリの名前は全角のブランクで区切ることでツリー化されます。（例．『100円ショップでお買い物 ライト ランチャー』など）
以下は、参考用として自分のブログでの設定内容です。
１１．カテゴリ名を見直して整理する場合、『一括編集』が便利です。『一括編集』するには『記事一覧』画面で『一括編集』タブをクリックします。
表示件数は、以下のように最大200件まで表示できます。（記事の件数が多い場合、多く表示した方が一気に変更できて便利です。）
カテゴリ名はプルダウンメニューから選択します。（記事毎に選択します。）
選択が終わったら『保存』ボタンをクリックして保存し、変更内容を反映させます。
．．．
参考までに、以下はこのブログでの表示例です。
以上です。
以降、今回の変更内容及び手順です。
１．以下のような『デザイン＞ PC＞ コンテンツ』の画面を表示します。
２．『カテゴリ』のコンテンツアイコンをクリックします。
３．以下のような画面が表示されるので、自分の場合は表示件数を最大値の100に設定しました。
４．右上の『コンテンツHTML編集』をクリックします。
５．以下のような『カテゴリのHTML編集』画面が表示されるので、デフォルトの内容は全て削除し、前記の作者様のページ（＝ http://lctree.seesaa.net/article/94747204.html ）内から『Seesaaブログ向けLc.ツリーカテゴリーのソース』をコピーして貼り付けます。
【補足】：『再配布はＮＧ』となっていましたので、この記事内にソースは掲載していません。
６．『ファイルのアップロード』にて、ツリーを開閉するフォルダアイコンをアップロードします。
このフォルダアイコンの画像ファイルは、以下のページからダウンロードさせて頂きました。（同じ作者様が配布しているページです。）
Lc-Factory/雑記 ツリーカテゴリーでフォルダ表示？:
http://lctreetz.blog69.fc2.com/blog-entry-375.html
http://lctreetz.blog69.fc2.com/blog-entry-375.html
７．ソース内のパラメータを変更します。
以下は例として、自分のブログ用にカスタマイズした変更内容です。（あくまでも 2013-10-10 時点のものであり、今後更に見直し／変更するかもしれないです。）
***** オリジナル
var LC_CAT_PARENTBOX = true; //親の＋などをボックス表示
***** 変更後
var LC_CAT_PARENTBOX = false; //親の＋などをボックス表示
*****
***** オリジナル
var LC_CAT_INDENTCHR = ' ';
***** 変更後
var LC_CAT_INDENTCHR = " ";
*****
***** オリジナル
var LC_CAT_BOX_CLOSED = '＋';
var LC_CAT_BOX_OPENED = '−';
var LC_CAT_BRANCH_CONNECT = '├';
var LC_CAT_BRANCH_EDGE= '└';
***** 変更後
var LC_CAT_BOX_CLOSED = '<img src="https://kingpcfx.up.seesaa.net/image/folder24x14_01.gif" alt="folder24x14_01.gif" border="0" style="margin-right:2pt;">';
var LC_CAT_BOX_OPENED = '<img src="https://kingpcfx.up.seesaa.net/image/folder24x14_02.gif" alt="folder24x14_02.gif" border="0" style="margin-right:2pt;">';
var LC_CAT_BRANCH_CONNECT = ' ├';
var LC_CAT_BRANCH_EDGE= ' └';
*****
***** オリジナル
var LC_CAT_CATEGORY_MARK = "★";
***** 変更後
var LC_CAT_CATEGORY_MARK = '<img src="https://blog.seesaa.jp/img/listCategoryArticle.gif" border="0">';
*****８．『保存』ボタンをクリックして保存します。
保存後は、以下のように『設定を完了しました』と表示されます。
９．右上の『×』マークをクリックして画面を閉じます。
１０．ツリー表示をさせるにあたってカテゴリの名前を変更する必要があるので、以下のように『設定』画面で『カテゴリ設定』をクリックします。
カテゴリの名前は全角のブランクで区切ることでツリー化されます。（例．『100円ショップでお買い物 ライト ランチャー』など）
以下は、参考用として自分のブログでの設定内容です。
１１．カテゴリ名を見直して整理する場合、『一括編集』が便利です。『一括編集』するには『記事一覧』画面で『一括編集』タブをクリックします。
表示件数は、以下のように最大200件まで表示できます。（記事の件数が多い場合、多く表示した方が一気に変更できて便利です。）
カテゴリ名はプルダウンメニューから選択します。（記事毎に選択します。）
選択が終わったら『保存』ボタンをクリックして保存し、変更内容を反映させます。
．．．
参考までに、以下はこのブログでの表示例です。
以上です。
スポンサーリンク
【カテゴリ：パソコン ブログカスタマイズの記録】の最新記事
- 今更ですが、サイドバーにアクセスカウンターを設置した
- 『Seesaa』ブログで『記事のコンテンツHTML』を新しいソーシャルボタンの仕様に対応させた
- 『Seesaa』ブログで記事の中の画像に枠を付ける方法について
- 『Seesaa』ブログでCSS（スタイルシート）やHTMLを編集する際の手順
- 『Seesaa』ブログで『続きを読む』の文言を表示させる方法を変更した
- 『Seesaa』ブログでディスク使用量が2GBに到達したので『ストレージプラン』を申し込んでみた
- 『Seesaa』ブログのスマホ用ページに『Google Analytics』を設置する手順
- 『Seesaa』ブログに『3D球体タグクラウド』を設置してみた
- 『ブログカスタマイズ』最近変更した箇所のまとめ
- 『Seesaa』ブログでカテゴリの一覧を『メニューバー』のように表示させてみた
- サイドバーに『CUBACLOCK』のブログパーツを設置した
- 『Seesaa』ブログで記事本文の右上に『カテゴリ』を表示するようにした
- 『Seesaa』ブログで『続きを読む』の文言を画像で表示することができた
- 『Seesaa』ブログに『LinkWithin』を導入した
- 『我RSS』を利用して『最近の記事』の一覧を画像付きで表示するようにした
- ユニクロのブログパーツ『UNIQLO CALENDAR』と『UNIQLOCK』をサイドバーに設置した
- 『ACR WEB』の『ページランキング』で画像が表示できた
- 『Seesaa』ブログで記事タイトルの右上に画像を表示させてみた
- 『Seesaa』ブログに『ファビコン』を設置した
- 『最近のコメント』と『最近の記事』の一覧にスクロールバーを付けた
フリー素材*ヒバナ * *
市川明彦 (03/26)
