第13回：サイドバーをリストごとに折り畳んでみよう
ブログを続けているとサイドバーにいろいろな項目が増えてきてどんどん長くなってきます。
これをスクリプトを使って項目ごとに折り畳めるようにしてみましょう。
このカスタマイズは「facet-divers」 様の 『サイドバー折り畳み2：状態保持機能付き』 の記事を全面的に参考にさせて頂いています。
「facet-divers」様、ありがとうございます(^^) （いつもお世話になってます）
事前準備：スクリプトを準備する
下記のウィンドウ内のスクリプトを全文コピーして「メモ帳」などに貼り付けて下さい。
※facetさんのご好意により転載させて頂きました。ありがとうございました。
<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/myFunctions01a.js">
</script>
<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldSidebar02c.js">
</script>
<script type="text/javascript">
<!--
foldMark = "-";
foldTitle = "close";
unfoldMark = "+";
unfoldTitle = "open";
switchStyle = "float:right;margin:0;width:1.4em;padding:0;height:1.4em;line-height:1em;text-align:center;text-indent:0;";
labelStyle = "letter-spacing:0.1em;";
counterPrefix = "(";
counterPostfix = ")";
counterStyle = "margin-left:2px;letter-spacing:normal;color:silver;";
foldBroadly = true;
//
pattern = "最近の記事|最近のコメント|最近のトラックバック|バックナンバー|カテゴリ|更新|blog";
makeSwitchesBy(pattern);
//
pattern = "最近のコメント|最近のトラックバック|バックナンバー|カテゴリ|更新|blog";
foldContentsBy(pattern);
//
pattern = "最近の記事|最近のコメント|最近のトラックバック|バックナンバー|カテゴリ|更新";
countItemsBy(pattern);
//-->
</script>
※スクリプトをメモ帳に貼り付ける際、メモ帳の設定が「右端で折り返す」 になっていると不要な改行が入ってしまいスクリプトが誤作動する場合があります。
※処理の前にメモ帳の「書式」をクリックしてこの中の「右端で折り返す」にチェックが入ってる場合は、これを外してから貼り付け作業を実施して下さい。
スクリプトを書き換える
上記で準備したスクリプト中の3箇所の「pattern="...";」を必要に応じて書き換えます。
- 「makeSwitchesBy(pattern);」の上にある 「pattern="...";」 に
折り畳みボタンを付けたいリスト名を指定する。
※ここでタイトルを指定したリストだけが折り畳みボタンが付きます。 - 「foldContentsBy(pattern); 」の上にある 「pattern="...";」 に
ページを読み込んだ時に折り畳んでおきたいリスト名を指定する。
※ここでタイトルを指定したリストはブログにアクセスした時に折り畳まれた状態で表示されます。
※例えば「最初は全て閉じた状態にしたい」ときはA.と同じリスト名を全て指定、
「『最近の記事』だけは開いた状態で表示したい」ときはA.のリスト名から『最近の記事』を抜いて指定します。
（デフォルトでは後者の状態になっています） - 「countItemsBy(pattern); 」の上にある 「pattern-"..."; 」 に
リスト内の項目数をカウントして表示したいリスト名を指定する。
※指定するとタイトル横に（10）のような感じで、内容の項目数が表示されます。
※基本的にこの3箇所を自分のブログに合わせて変更するだけでOKです。
※リスト名の書き換え、追加については元のスクリプトに書いてあるものを参考にして記述して下さい。
（リスト名の間を半角の縦線（ | ）で区切るのを忘れずに）
※更に詳しいカスタマイズについては、「facet-divers」様の元記事を参照して下さい。
サイドバーに設置する
マイリストを使って、スクリプトをサイドバーに設置します。
マイリストの作成からサイドバーの設置についての詳細は別ページ
■ 「基本2：マイリストの作成→サイドバーへの設置」
にて確認して下さい。
※このスクリプトは、上記の書き換え時に指定した全てのリストよりも下になるように設置して下さい。
以上です。
うまく出来ましたか？
- このスクリプトは設置場所よりも上にあるリストにのみ有効です。
設置場所（リストを置く場所）に注意しましょう。
例えば右サイドバーの一番下の項目まで折り畳みたいのであれば、その項目の下にスクリプト入りのリストを設置する必要がある、 ということです。 - 両サイドバータイプのスタイルの場合も、右サイドバーの一番下に入れれば左サイドバーの項目まで折り畳めます。
※読み込むまで多少タイムラグがありますので、気になるようなら左右別々に設置するという手もありますが、 その場合スクリプトの内容を更に若干書き換える必要があります。
※詳しくは 「facet-divers」様の 『サイドバー折り畳み２：動作遅延対策』を参照して下さい。 - 設置するためのリストを作成する場合、既に何らかのスクリプトを一番下に置いているなら、 新しくリストを作成せずに既にあるリストに項目を追加する形で置いた方がサイドバーの表示がスッキリすると思います。
※使い勝手の問題もありますので、その辺はお好みで。 - 折り畳みボタンのカスタマイズについては「KOROPPYの本棚」 様内の記事 『折りたたみボタンの色を開閉で変える』に詳しく書かれています。
参考にして下さい。
このスクリプトは使用しているテンプレートによってはブラウザ毎に挙動が違ったり、デザインが崩れたりする場合があるそうです。
その場合はfacetさんが対応して下さるとのお言葉を頂いておりますので、上記の設定をしても上手く動かない場合はfacetさんまで直接ご連絡して下さい。
（ 『サイドバー折り畳み２：状態保持機能付き』の記事のコメント欄に状況を書き込んで下さい）
その際、facetさんがブログの設定内容を確認して下さいますので、設置したスクリプトはそのままの状態でご連絡下さい。
宜しくお願いいたします。
■ 「facet-divers」 様
■「KOROPPYの本棚」 様
■素材サイト 「PRISM」 様
| 固定リンク | 0
「ウェブログ・ココログ関連」カテゴリの記事
- 第38回：DecoWeb提供のココログ用無料テンプレートを使ってみよう(2008.09.28)
- ブログ便利ツール：ブログ投稿支援ソフト(2007.03.11)
- ココログを便利にする「ユーザーさん作成スクリプト」特集(2007.03.04)
- カスタマイズ・サンプル＜No.6：手帳＞(2007.01.28)
- 第37回：記事欄を角丸の画像で囲んでみよう(2006.11.04)
「カスタマイズ」カテゴリの記事
- 第39回：携帯サイトのアイコンを変えてみよう(2009.09.06)
- 第38回：DecoWeb提供のココログ用無料テンプレートを使ってみよう(2008.09.28)
- ココログを便利にする「ユーザーさん作成スクリプト」特集(2007.03.04)
- カスタマイズ・サンプル＜No.6：手帳＞(2007.01.28)
- 第37回：記事欄を角丸の画像で囲んでみよう(2006.11.04)
「サイドバー」カテゴリの記事
- 第26回：サイドバーに「アクセス解析ツール」を設置してみよう(2006.04.15)
- 第23回：サイドバーに掲示板を設置してみよう(2006.03.21)
- 第14回：カレンダーの投稿した日付に色を付けてみよう(2006.03.01)
- 第13回：サイドバーをリストごとに折り畳んでみよう(2006.02.26)
「スクリプト」カテゴリの記事
- ココログを便利にする「ユーザーさん作成スクリプト」特集(2007.03.04)
- 第26回：サイドバーに「アクセス解析ツール」を設置してみよう(2006.04.15)
- 第13回：サイドバーをリストごとに折り畳んでみよう(2006.02.26)
- 第9回：アクセス解析を設置してみよう(2006.02.20)
コメント
記事でのご紹介、ありがとうございます。
実はご連絡いただく前に、既に記事をチェックしてましたｗ
もう「言わずもがな」になってしまいがちな注意点も細かく書かれていて、
初心者でも導入できる丁寧さですね。
今後もエントリを楽しみにしております。
投稿: KOROPPY | 2006/02/27 10:06
こんにちは！
今回は、私も折りたたみボタンを設置したくてチャレンジしてみました。
が、メモ欄に貼り付け、記事に反映してみたら、エラーが出ました。
ボタンは表示されたんですが、開いたままで閉じることが出来ませんでした。それと、スクリプトがそのまま表示されてしまいます。
リスト名は、書き換えずそのまま使用することは出来ますか？
いつもすみませんが、教えていただけませんか？
投稿: シナモン | 2006/02/27 15:43
こんにちは。
最近ブログをはじめた初心者ですが、takoさんのサイトとっても参考になります。
ナニもわからない状態ではじめたのですが、いろいろと手を加える楽しみ方を知ることができました。
これからもがんばってください^ー^
投稿: ナナ | 2006/02/27 21:29
■KOROPPYさん
こんにちは。コメントありがとうございます♪
お褒めの言葉、恐縮です^^;
facetさんにもご連絡したところ、温かいお返事を頂きとても心強く思いました。
私は（特にスクリプトに関しては）自分では理解していないことが多いので、設置方法は説明できてもその後の不具合をフォロー出来ず却って負担を増やしているだけのような気もするのですが…^^;
皆さんお優しいのでついつい甘えてしまいます。
今後も色々とお世話になると思いますが宜しくお願いいたします。
記載ミスや誤解などありましたらいつでも遠慮なくご連絡下さい。
投稿: tako→KOROPPYさん | 2006/02/28 21:30
■シナモンさん
先ほどは成功のご連絡ありがとうございました。
また遊びに来てくださいね。
お待ちしています。
■ナナさん
コメントありがとうございます♪
少しでもお役に立てているようで何よりです。
こちらはスローペースの更新ですが、少しずつでも記事を増やしていきたいと思いますのでまた覗いてみて下さい。
励ましのお言葉、ありがとうございました(^^)
投稿: tako→シナモンさん、ナナさん | 2006/02/28 21:37
今日、記事に書くことが出来ました！
まだいろいろやってみたいことがあるので、
ゆっくりチャレンジしたいと思います。
たぶん、何かとトラブルが起きると思いますので、
その時はお力をお借り出来たら…と思います。
ｍ（*＿＿*）ｍペコ
これからも、いろいろ参考にさせていただきますので、
よろしくお願いします。
投稿: シナモン | 2006/03/02 17:47
ごめんなさい。元記事に脱字等がありました。
counterStyle =
"margin-left:2px;etter-spacing:0.1em;color:silver;";
↓
counterStyle = "margin-left:2px;letter-spacing:normal;color:silver;";
に修正しておいてください。スミマセン。
投稿: facet | 2006/03/04 23:08
質問に答えて頂きありがとうございました。
takoさんのブログを拝見させていただきました。
もの凄く勉強になります。これからもちょくちょく
訪問させていただきます。わからない事があった
時はまたご指導お願いします。
投稿: yamato | 2006/03/05 05:05
■facetさん
こんにちは。
わざわざご連絡ありがとうございました。
早速修正致しました。
また宜しくお願いします(^^)
投稿: tako→facetさん | 2006/03/05 09:51
■yamatoさん
こんにちは。コメントありがとうございます。
「みんなで解決！広場」での回答、お役に立ったようで何よりです。
フリープランはやはり無料だけあって多少の制限はありますが、
機能的にも容量的にもかなり使い易いと思います。
使える機能を有効に使って、これからもブログを楽しんで下さいね。
またのご訪問、お待ちしています♪
投稿: tako→yamatoさん | 2006/03/05 09:58
はじめまして！
とても簡単に出来ました。ありがとうございました。
でも、＋－の四角なのですが、グレー以外に出来たらなぁなんて思ったり。。。
どうでしょーか？
投稿: しずく | 2006/03/18 11:22
■しずくさん
こんにちは。コメントありがとうございます。
ボタンのカスタマイズについては私にはちょっと判らないのですが、KOROPPYさんが記事にされています。
上記「point」に参照先のリンクが書いてありますので、そちらを訪問してみて下さいね。
宜しくお願いします。
投稿: tako→しずくさん | 2006/03/18 12:14
はじめまして！
こちらを参考に折り畳みにチャレンジし、なんとか設置することが出来ました。ありがとうございましたm(__)m
とてもわかりやすく書かれているにもかかわらず、途中私のうっかりでfacetさまにもお世話になってしまいました。
事後報告になってしまい申し訳ありません。
これからもいろいろなカスタマイズのエントリー楽しみにしています！！
投稿: joon-be | 2006/03/20 17:06
■joon-beさん
こんにちは。
折り畳み設置成功、おめでとうございます。
出来てしまえば「ああ！」ということでも、初めてだと何が正しいのかよく判らないし緊張しますよね。
私もこの記事を書くまでに何度もfacetさんの手を煩わせてチェックを入れていただきました^^;
また何か使えそうなものがありましたらどんどん挑戦してみて下さいね。
今回はコメント＆TBありがとうございました。
投稿: tako→joon-beさん | 2006/03/20 21:45
バナーを無事貼れたので、折り畳みに挑戦しました。無事成功して、とっても嬉しいです。今までブログがまとまりなかったから・・・スッキリできてうれしいです。ありがとうございます♪
バナーの動画を多くすると、ブログが重くなるのですね。この頃、とっても、プログを開くのに時間がかかってしまっています。バナーには気をつけないといけないですね！
また、勉強させてもらいに来ます。
投稿: チョコマスク | 2006/03/24 13:09
■チョコマスクさん
こんにちは。コメントありがとうございます。
折り畳み、成功おめでとうございます(^^)
折り畳みの「開いて表示する部分」「閉じたままで表示する部分」を上手く使うと、自分のブログのどこを見てもらいたいかを閲覧者自然にアピール出来ると思います。
項目を入れ替えたりしながら上手にカスタマイズして下さいね。
投稿: tako→チョコマスクさん | 2006/03/25 15:49
takoさん、はじめまして、
センスのいいﾌﾞﾛｸですね。
わたしも、やっとカテゴリーの折りたたみ、
コメントのツリー化をすることができました。
丁寧な説明ありがとうございました。
私のブログからリンクさせていただきますね。
投稿: ぴあの | 2006/03/26 23:24
■ぴあのさん
こんにちは。お返事が遅くなってしまってごめんなさい。
コメント＆リンクありがとうございました。
私のブログがセンス良く見えているとしたらそれは全て素敵な素材を提供して下さっている素材サイト様のおかげです。
ありがたや～♪
ぴあのさんもお気に入りの素材を見つけて自分らしいブログをデザインしてみて下さいね。
またのご訪問お待ちしています。
投稿: tako→ぴあのさん | 2006/03/31 22:49
こんにちは！
こちらの記事を参考に折りたたみボタンを設置してみました。見た目がスッキリして、大助かりです。
ありがとうございました。
投稿: kolohe | 2006/04/18 21:47
■koloheさん
こんにちは。コメントありがとうございます。
折り畳み成功、おめでとうございます(^^)
少しでもお役に立てて何よりです。
またのご訪問お待ちしています。
投稿: tako→koloheさん | 2006/04/19 21:36
はじまして。
サイドバーをまとめたくて、いろいろ調べていたところこちらのページに辿り着きました。お蔭でうまくまとめることが出来ました！
これからも、沢山参考にさせてもらうと思います。
ありがとうございました。
投稿: misarina | 2006/04/21 23:20
■misarinaさん
こんにちは。コメントありがとうございます。
折り畳み成功、おめでとうございます。
お役に立てて何よりです(^^)
また遊びに来てくださいね。
投稿: tako→misarinaさん | 2006/04/22 20:24
はじめまして。
takoさんのおかげでサイドバーの折り畳みみ成功しました。
すっきりして、とても嬉しいです。
今度は左のサイドバーの折り畳みに挑戦したのですが、何も変わらなかったです。「ココログからのお知らせ」を折り畳みたいのですが。
それと、「「書式」をクリックしてこの中の「右端で折り返す」にチェックが入ってる場合は、これを外してから貼り付け作業を実施して下さい。」とありますが、どれを外せばいいですか？もしよろしければ教えて頂けませんでしょうか？こんな質問で本当にごめんなさい。
投稿: 姫sakura | 2006/04/29 18:22
■姫sakuraさん
こんにちは。コメントありがとうございます。
サイドバー折り畳みを左右に分けて設置する場合はfacetさんの下記の記事に注意事項が書いてあるようですので、読んでみて下さい。
『サイドバー折り畳み２：動作遅延対策』
http://facet.cocolog-nifty.com/divers/2004/10/post_2.html
「メモ帳」の「右端で折り返す」の件は、メモ帳の「書式」をクリックすると「右端で折り返す」と「フォント」という項目があると思いますが、この中の「右端で～」の名前の前にチェックマークが付いてませんか？ということです。
もしこれが付いていたら、その「右端で～」をクリックすると外れますので、その状態でスクリプトを扱ってください。
※でも、右サイドバーが折り畳めたのだったら問題ないんじゃないかな、と思いますが。
参考になれば幸いです。
投稿: tako→姫sakuraさん | 2006/04/29 23:23
takoさん
ありがとうございます。左のサイドバーが折り畳めたと思ったら、左下に余計なスペースができてしまいました。デザインが崩れているのでしょうか。facetさんにお聞きした方がいいですか？
それと、「メモ帳」はマイリストのメモ帳ですか？ごめんなさい、「書式」がどこにあるか分かりません。フリーなのでないのでしょうか。
投稿: 姫sakura | 2006/04/30 01:19
■姫sakuraさん
こんにちは。
＞デザインが崩れているのでしょうか
う～ん、そちらのブログのurlの記載がなく実際の状態を拝見できないので、その情報だけでは何とも言えないですね。
ただ、そのスペースだけの問題だとすれば「デザインの崩れ」とまでは判断しにくいですが。
もしfacetさんに連絡されるのでしたら、ご自分のブログのurlも明記するようにして下さい。
（但し、現在facetさんはしばらくブログへのレスはお休み中だったと思います）
＞「メモ帳」はマイリストのメモ帳ですか？
Windows付属の「メモ帳」（テキストエディター）のことです。
特に使わずに設置が出来ているのであれば、気にすることはないので忘れて下さい（笑）
投稿: tako→姫sakuraさん | 2006/04/30 01:30
はじめまして。
最近サイドバーがゴテゴテしすぎて困っていたところ、こちらの記事を見つけました。
多少の試行錯誤はありましたが、無事に折りたたみボタンを設置出来ました。
お陰で見た目がスッキリして、大助かりです。
ありがとうございました。
今度は「サイト内検索」に挑戦してみます。
投稿: Nde | 2006/06/01 21:05
■Ndeさん
こんにちは。コメントありがとうございます。
お役に立てて何よりです。
スクリプトの書き換えは初めてだとちょっととまどうことがありますが一度やってしまえば慣れると思います。
「サイト内検索」は「折り畳み」より簡単だと思いますので、ぜひ挑戦してみて下さいね。
またのご訪問お待ちしています。
投稿: tako→Ndeさん | 2006/06/03 07:20
はじめまして。
前からサイドバーが長くなり気にしていました。ただ使用しているのがリッチテンプレートだったため出来ないと思っていました。
ところが試しにこちらを参考にやってみたら反映された！
いいのかどうかはちょっと自信が無いのですが、覚えにしばらく設置したいと思います。
初心者の私にもとても分かりやすい解説をありがとうございました。
投稿: ととろ | 2006/06/03 13:55
■ととろさん
こんにちは。コメントありがとうございます。
リッチテンプレートはデザインを変更してしまうのは規約違反ですが、サイドバーの折り畳みはデザインそのものを触っているのではないので大丈夫かと思いますよ。
また何か使えそうな記事がありましたら覗いてみて下さいね。
お待ちしています。
投稿: tako→ととろさん | 2006/06/03 21:42
はじめまして、ふれと申します。
こちらのページを見てサイドバーの折り畳みができたので、うれしくて報告させていただきました。
これからも参考にさせていただきます。
どうもありがとうございました。
投稿: ふれ | 2006/06/19 14:02
■ふれさん
こんにちは。
私の記事が少しでもお役に立ったのなら何よりです。
また遊びに来て下さいね(^^)
コメントありがとうございました。
投稿: tako→ふれさん | 2006/06/19 22:34
ありがとうございます！
ようやくサイドバーの折りたたみができました！
他のサイトさんのやり方で試してもなかなかうまくいかず、検索ワードに”ココログ”も加えたら、こちらのサイトとめぐり合えることができました。
ブログ更新が楽しみなので、これからもちょくちょく勉強しに来ます。
投稿: ミドリ | 2006/06/24 15:15
■ミドリさん
こんにちは。コメントありがとうございます。
折り畳み成功おめでとうございます(^^)
お役に立てて何よりです。
ちょっとした変化でも規定のテンプレートが自分らしくなりますよね。
これからも使えそうな記事があったらどんどん取り入れてみて下さい。
投稿: tako→ミドリさん | 2006/06/25 10:19
こんにちわ。はじめまして。
貴BLOGの記事の通りに手を加えると、実に簡単に
カスタマイズが出来ました。ありがとうございました。
今後とも楽しみにしております。
投稿: s_boldor | 2006/06/26 11:59
■s_bolderさん
こんにちは、はじめまして。
コメントありがとうございます。
サイドバーにリンクもして下さっているんですね！感謝です(^^)
私も「BlogPeople」のリストに加えさせて頂きました。
シンプルなデザインで読みやすいブログですね。
写真もキレイで、見ているこちらも清々しい気分になります(^^)
これからも楽しんで更新続けて下さいね。
私の方は最近はちょっとネタ切れで^^;更新も滞りがちですが、少しずつでも記事が増やせるよう頑張りますので今後とも宜しくお願いします。
投稿: tako→s_bolderさん | 2006/06/27 23:26
こんばんわ。
褒めて頂くと純粋にうれしいです。ありがとうございます。
これからも末永く、無理せずBLOG更新をやりましょう。
今後とも参考に致します。
投稿: s_boldor | 2006/06/28 22:57
こんにちは！
何度も伺っていたのですが、やっとできました。
最初は、わけがわからず諦めていたのですが、あまりにサイドバーが長くなって意を決して挑戦してみました。
ありがとうございました。
調子に乗って、またべつの機能にも挑戦してもようかなぁ～
その時は、またよろしくお願いします。
投稿: orenge | 2006/06/29 18:01
■s_bolderさん
こんにちは。
応援ありがとうございます(^^)
ブログは「義務」ではないので、無理なく楽しく続けていくのが長続きする秘訣ですよね。
これからもマイペースを保ちながら、みんなで「楽しい」「便利」を共有出来るような記事を書いていければいいなと思ってます。
宜しくお願いいたします。
投稿: tako→s_bolderさん | 2006/07/02 21:16
■orengeさん
こんにちは。コメントありがとうございます。
スクリプトについては、その記述内容や動作には私も全く知識がなくてよく判っていないのですが、どこをどうすればココログに適用できるようになるかについてならちょっとは役に立てるかな～と思っています。
その辺りをなるべく判りやすく書いているつもりですが、もし不明点があったら遠慮なく質問して下さいね。
判る範囲で回答したいと思います。
これからも楽しんでブログを続けて下さいね。
投稿: tako→orangeさん | 2006/07/02 21:21
こんにちは、郭嘉です。折りたたみ、何とかできました＾＾
すごくわかりやすくて、助かりました。
ここで質問なのですが、成功したもののマイリストのアンダーラインが
残ってしまいます。これは消せないでしょうか？よろしければご教授お願いします。
投稿: 郭嘉 | 2006/07/11 16:25
■郭嘉さん
こんにちは。
ご質問の件ですが、他の方からも同様のお問い合わせを何度か頂きました。
「よくある質問集」のページに回答を書いておきましたので参照してみて下さい。
http://tea-for-me.cocolog-nifty.com/blog/2006/04/post_5405_1.html#13">http://tea-for-me.cocolog-nifty.com/blog/2006/04/post_5405_1.html#13
※不明点がありましたらまたご連絡下さいね。
投稿: tako→郭嘉さん | 2006/07/12 21:32
ラインを表示しないで落ち着きました。
アドバイスありがとう御座います。
投稿: 郭嘉→takoさん | 2006/07/12 23:38
はじめまして。
ココログを始めて1年半ほどですが、本格的なカスタマイズをしたことが無くて、全体の色をちょっとさわるぐらいでした。
たまたま貴ブログを見つけ、ちょっとやってみようかな・・・という気持ちになりました。
折りたたみ、上手くいきました。分かりやすい解説ありがとうございました。でも、リスト名がサイドバーに表示されてしまうので、どうしたものかと２～３時間悩んでしまいましたが、解決しました。リスト名を「スペース」で入れるなんて・・・。
リンク、当方ブログに勝手に貼らせていただきました。
よろしいですか？
投稿: ｈｉｔｏｃｈａｎ | 2006/07/17 18:42
■ｈｉｔｏｃｈａｎさん
こんにちは。はじめまして。
こちらの記事がお役に立てたようで何よりです。
カスタマイズもやり始めると楽しくなってくると思います。
そのきっかけになれたらとても嬉しく思います。
リンクについては、大歓迎です！
ありがとうございます(^^)
こちらでもBlogPeopleのリストに加えさせて頂きますね。
今後とも宜しくお願いします。
投稿: tako→ｈｉｔｏｃｈａｎさん | 2006/07/17 18:59
こんにちは＾＾前回も バナーをつけるのにお世話になりありがとうございました。今回も 新しい事にチャレンジしました。前回とは違って簡単に設置できました。ありがとうございます。もう私の中では 設置に困ったら takoさんのサイトに アクセスするようになってしまいました。これからも 参考にさせて下さいね＾＾ありがとうございました。
投稿: piyo | 2006/07/19 21:59
■piyoさん
こんにちは。コメントありがとうございます。
折り畳み成功おめでとうございます。
お役に立ててなによりです。
これからもいろいろ挑戦してみて下さいね。
投稿: tako→piyoさん | 2006/07/23 11:53
こんにちわ☆初めまして!!
takoさまの記事を拝見し何度もチャレンジしてやっとサイドバーの折り畳みみに成功致しました!!
初心者の私にもわかりやすい説明本当にどうもありがとうございます!!
ボタンの色変えにも挑戦してみたのですが、こちらは中々うまくいかず、ボタンの周りだけうっすらと色がついています(^_^;)
ボタンの色変えの方はこれからまた色々やり方を変えて挑戦してみようと思っています☆
これからもtakoさまの記事楽しみにしております☆★☆
本当にどうもありがとうございました!!o（＾－＾）o
投稿: 雛 | 2006/08/28 06:38
■雛さん
こんにちは。はじめまして。
折り畳み成功おめでとうございます。
このカスタマイズは書き換える部分があったりして、初めてスクリプトのタグを見る人にはちょっと難しいかもしれませんね。
でも一度出来てしまえば、このあとは自分でどんどん修正出来るようになると思いますよ。
ボタンのカスタマイズもまた挑戦して下さいね。
コメントありがとうございました。
投稿: tako→雛さん | 2006/09/03 10:22
takoさん はじめまして。
とても分りやすい解説で勉強させていただいています。
いろいろと挑戦したいと思っています。
今後ともよろしくお願いします。
投稿: yabusame | 2006/09/09 21:07
■yabusameさん
こんにちは。コメントありがとうございます。
いろいろ挑戦されているようですね。
これからも楽しんでブログを続けて下さい。
またのご訪問お待ちしています。
投稿: tako→yabusameさん | 2006/09/09 21:52
はじめまして～☆
facetさんのところからここへたどり着いて～「折りたたみ」の記事のわかり易い説明にとても感謝しています
私にも出来ました、ありがとうございます
他にもたくさんの解説が書かれていますので利用させて頂きたいと思います
よろしくお願いします
投稿: mie | 2006/11/07 22:09
■mieさん
こんにちは。コメントありがとうございます(^^)
お食事のお店をやっていらっしゃるんですね。
写真がないのが残念でしたが、豊富なメニューとリーズナブルなお値段が魅力的でした。
もっと近かったらお伺い出来たのに…！
これから忙しい季節になると思いますので、あまり無理をせずにお仕事＆ブログを続けて下さいね。
こちらにもまたのご訪問お待ちしています。
投稿: tako→mieさん | 2006/11/07 23:00
tako様
初めまして。facet様のところから流れてきました。もうこういうサイトを探して三千里って感じです。かなり感激！一生懸命勉強させていただきます。
ところで、facet様のところでもコメントとして残したのですが、この「折り畳み」スクリプトはtypepad.jpでも使えますか？やってみたのですが反映されませんでした。
なにか根本的に間違ったことをしているのか、ココログはtypepad.jpとは設定が違うのか。
まだブログをはじめて６ヶ月のテク音痴おやじの戯言にお付き合いさせてしまい恐縮ですが、何かご教授いただけると大変助かります。どうか宜しくお願いします。
投稿: yoichi | 2006/12/18 16:32
tako様
上記問題、facet様のご助言により解決いたしました。お騒がせいたしました。
また、引き続き勉強に寄らせてもらいますね。勝手ながらBlogPeopleのリンクリストに追加させていただきました。今後ともどうぞ宜しくお願いします。
投稿: yoichi | 2006/12/19 07:22
■yoichiさん
こんにちは。コメントありがとうございます。
ご質問の件、facetさんのほうから回答があったようですね(^^)
残念ながら私はHTMLとCSSがなんとかボチボチ…というレベルなので、スクリプトについては設置方法の説明だったら出来るのですが「動作」についてはサッパリです^^;
そんなわけで、この他のスクリプトについても「上手く動かない」などの質問にはお答え出来ませんので、各作品の作者様にご連絡頂けるようにお願いいたします。
こんなハンパな管理人のブログですが、ご贔屓にしていただければ幸いです。
今後とも宜しくお願いいたします。
投稿: tako→yoichiさん | 2006/12/19 07:26
こんばんは～
サイドバーの折りたたみ成功しました。
ありがとうございます。
私の使ってるテンプレートは♪が頭についているので
コメントとかトラックバックとかの間が空き過ぎてる気がしますが
改良は可能でしょうか？
また来年、時間のある時にこちらのブログでいろいろと勉強させて頂きます。
またよろしくお願いいたします。
良いお年をお迎えくださいませ。
投稿: はにはに | 2006/12/30 22:40
■はにはにさん
あけましておめでとうございます。
しばらくオフライン状態でしたので対応が遅くなり申し訳ありません。
さてご質問の件ですが、リッチテンプレートは規約で「CSSの改変が出来ない」ことになっているので、マイリストの行間を変更するのは残念ながら無理です。
（ちなみにカスタムテンプレートでもこの辺りを変更するのはちょっと難しいと思います。）
ご希望の回答が出来ず申し訳ありませんが、悪しからずご了承下さい。
本年も宜しくお願いします。
投稿: tako→はにはにさん | 2007/01/03 20:38
はじめまして。
このところ、貴サイトへ頻繁に訪れ、
サイドバーの折り畳み、バナーを貼る、
等を当方のブログへ無事設置することができました。
有難うございました。
ところで、サイドバーの折り畳みは、
その閲覧者がopenして、そのままの状態で
IEを閉じて、再度開いた場合、
サイドバーは開かれた状態のままで、自動的にcloseされているということではないのでしょうか？
お暇な折にでも、宜しく御教示下さい。
投稿: 龍 | 2007/02/15 12:32
■龍さん
こんにちは。はじめまして。
当ブログをご贔屓にして下さっているとのこと、ありがとうございます(^^)
さて、お問い合わせの件ですが、
＞その閲覧者がopenして、そのままの状態で
＞IEを閉じて、再度開いた場合、
＞サイドバーは開かれた状態のまま
と書いて下さっている通りの動作になっているはずです。
（なので名前も「サイドバー折り畳み２：状態保持機能付き」というわけです）
但し、古いタイプ（IEだったらVer.4以前とか）では作動しない場合もあるそうです。
詳細についてはスクリプトを作って下さったfacetさんの元記事で解説されていますので、参照してみて下さい。
http://facet.cocolog-nifty.com/divers/2004/10/post_1.html">http://facet.cocolog-nifty.com/divers/2004/10/post_1.html
それでは、今後も宜しくお願いいたします。
投稿: tako→龍さん | 2007/02/15 22:19
tako様、早速の御返事、有難うございました。
御指示のサイトをも訪問し、了解いたしました。
今後とも、宜しくお願いいたします。
投稿: 龍 | 2007/02/16 10:06
■龍さん
こんにちは。
返信したあとで「ちゃんと質問の回答になっていたかな？」とちょっと不安だったのですが、了解いただけて安心しました。
ご報告ありがとうございました。
投稿: tako→龍さん | 2007/02/18 00:29
本日、２度目のこんばんは、です。
すみません、教えてください。
折りたたみは無事、完了したのですが、右サイドバーに「マイリストのメモ」で使用した「サイドバー」の文字が残ってしまいました。
おそらく初歩的なミスだとは思うのですが、対処方法が解りません。
助言をお願い致します。
投稿: tsuduku | 2007/03/01 22:48
■tsudukuさん
こんにちは。
リストのタイトルは文字を入力する欄に「半角or全角スペースだけ」を入れて保存すれば、「（見た目上）文字のないタイトルのリスト」にはなります。
ただ、（ここもそうですが）tsudukiさんのようにリストタイトルに画像を表示させている場合は、その画像だけは残ることになりますので念のため。
（画像の指定はタイトル全てに一律なため）
例えばこのブログの右サイドバーの一番下に何も書いてない付箋紙（風罫線）が表示されてますよね？
タイトル文字を表示しないと、そんな感じになります。
ご参考まで。
投稿: tako→tsudukuさん | 2007/03/01 23:51
こんにちは。
タイトル画像を使用しているのが問題だったのですね。
この画像を活かせる何かがないか、考えてみます。
その時はまた、助言、お願いします。
投稿: tsuduku | 2007/03/02 13:12
これもお借りしたのです・・・∑(ﾟ∇ﾟ|||)
いつも事後報告になって申し訳ありません。
takoさんからお借りしたカスタマイズはすべて
記事にしています。
（ちょっと遅れるときもありますが・・・(汗;
これからもよろしくお願いします。
（ココログにtakoさんがいてくれてよかった～～)
投稿: まっきー | 2007/05/11 00:42
■まっきーさん
こんにちは。
たくさん参照して頂いてありがとうございます♪
＞いつも事後報告になって申し訳ありません。
いえいえ、とんでもないです。
記事を読んで下さって、しかもそれが少しでもお役に立っていると判るだけでもとても嬉しいです。
今度まっきーさんのブログでカスタマイズの記事を書かれたら、是非こちらの該当記事までトラックバックして下さいね。
お待ちしています。
投稿: tako→まっきーさん | 2007/05/12 14:07
takoさん
こんにちわ みゅーと申します^^/
ココログヘルプでもいつもお世話になり
ありがとうございます。
今回も最近の記事に日付を付けたい！
の質問に色々コメントくださり
ありがとうございました^0^
お陰さまで、超初心者な私でも
設置することができました^^
ありがとうございました*^.^*/
投稿: みゅー | 2007/06/04 17:28
■みゅーさん
こんにちは。
わざわざブログのほうまで来ていただいてありがとうございます♪
お役に立てたようで何よりです。
スクリプトは何だか難しい言葉がたくさん並んでいるので最初ちょっと引いてしまいますが^^;、いくつも見ているとなんとなく法則が見えてきます。
ココログにはユーザーさん作の便利なスクリプトがたくさんあるのでいろいろ試してみるといいと思いますよ。
これからも楽しんでブログを続けて下さいね。
投稿: tako→みゅーさん | 2007/06/04 22:21
takoさん、こんにちは。
以前に「まっきーあのね・・・」でトラックバックを送らせていただきましたが、ブログタイトル、サイトURLがかわったので
また改めて送信させていただきました。
お手数おかけしますがよろしくお願いいたします。
投稿: まっきー | 2007/06/15 14:11
■まっきーさん
こんにちは。コメント＆TBありがとうございました。
内容了解しました。
以前のアドレスで頂いていた重複したTBは削除させて頂きましたのでご了承下さい。
今後とも宜しくお願いします。
投稿: tako→まっきーさん | 2007/06/16 12:02
こんにちは。あやと申します。
記事を参考にさせていただき、無事できました。
見やすくてとても分かり易かったです。
どうもありがとうございました。
今後も参考にさせていただきたいと思います。
投稿: あや | 2007/07/07 13:27
■あやさん
こんにちは。コメント＆TBありがとうございました。
最近はカスタマイズ小技の備蓄も底をついている状態で殆ど更新出来ていませんが^^;、過去の残骸でも何か役に立ちそうなものがありましたらご利用頂ければ幸いです。
またお立ち寄り下さいね(^^)
投稿: tako→あやさん | 2007/07/08 16:32
みんなで解決！広場で
サイドバーについてでの質問に
答えてくださってありがとうございました！
無事、サイドバーの折り畳みが出来ました！
もうひとつ、質問してよろしいでしょうか？
このtakoさんのブログの右のサイドバーにある
最近のコメントのように
１つの折り畳みを開くと
二つの大きな項目が出てくる。
というように出来ませんでしょうか？
私は、リンクというマイリストを作ったんですが、
その中で、さらに
相互と片道で分けたいんです。
わかりづらくてスミマセン（汗
投稿: 苗 | 2008/03/14 18:24
■苗さん
こんにちは。コメントありがとうございます。
私の回答が役に立ったようで何よりです(^^)
さて、今回のお問い合わせの件ですが、あれは「コメントを記事ごとにツリー表示する」というスクリプトをお借りして表示させています。
つまり「最近のコメント」専用のスクリプトであって、マイリストで作成した任意の内容をツリー化するものではないのです。
もしかしたらどなたかがご希望のような表示に出来るスクリプトを公開している可能性もありますが、残念ながら私は存じ上げません。
また、私は自分ではスクリプトは1行も書けません。
なので苗さんにアドバイス出来るとすれば、「メモリスト」を使って手書きでリンクを作成する方法くらいでしょうか。
メモリストを作成して、その備考欄に
★相互
├<a href="リンク先Aのアドレス">リンク先A</a>
├<a href="リンク先Bのアドレス">リンク先B</a>
├<a href="リンク先Cのアドレス">リンク先C</a>
☆片道
├<a href="リンク先Dのアドレス">リンク先D</a>
├<a href="リンク先Eのアドレス">リンク先E</a>
├<a href="リンク先Fのアドレス">リンク先F</a>
という感じで全て手書きしてリンクを記述し、サイドバーに設置すれば「見た目は」ご希望のようになると思います。
（手間はかなり掛かりそうですが…^^;）
以上、ご参考まで。
投稿: tako→苗さん | 2008/03/14 22:05
ありがとうございます！
そうなんですか；
挑戦してみます！！
投稿: 苗 | 2008/03/20 01:00
こんばんは
以前もお世話になったことがあるのですが、またお願いいたします。
デザインを替えたらサイドバーの折り畳みができなくなりました。
ブラウザーをFireFoxに替えたからかと思い IEに戻したのですがそれでも同じです。
何がどうなっているのか皆目検討がつかず途方に暮れています。
お忙しいことと存知ます。お暇なときによろしくお願いいたいします。
(ブログ名 四季 )
投稿: kaori | 2008/07/08 20:18
■Kaoriさん
こんにちは。コメントありがとうございます。
ソースを拝見しましたが、折り畳みのスクリプト自体が存在しないようです。
デザインを変更したときに、スクリプトの入ったリストをサイドバーから外してしまったのではないでしょうか？
再度見直してみて下さい。
投稿: tako→Kaoriさん | 2008/07/08 20:45
takoさんおはようございます
ソースを表示してみましたがありました。
ブログのCSSにもコピーさせていただいたスクリプトがありますし・・・
少し前まではきちんと使えていたので不思議です。
他にも表示できないものがあるんです。
お忙しいところありがとうございました。
今日も頑張ってあれこれやってみます。
また、ご助言いただけましたら幸せます。
投稿: Kaori | 2008/07/09 08:55
■Kaoriさん
こんにちは。
原因は、
＞CSSにもコピーさせていただいたスクリプトがあります
の部分です。
折り畳みはCSSではなくJavaScriptですので、「CSSの編集」の中に書いても動きません。
上記の設置方法でも
「マイリストに記述して、サイドバーに設置する」
としてあります。
デザインを変える前は折り畳み出来ていたのだとすれば、スクリプトが記述してあるマイリストがどこかにあるのではないかと思います。
「デザイン」→「表示項目の選択」でそのマイリストを表示させる設定にして保存すればスクリプトが有効になるはずです。
試してみて下さい。
※もし不明でしたら、上記の記事を読んで再度設定し直してみて下さい。
投稿: tako→Kaoriさん | 2008/07/09 20:12
takoさん
わざわざ私のブログまで来て下さってありがとうございました。
「マイリストに記述してサイドバーに設置」
この部分を読み落としておりました。まことに申し訳ありません。
しかし、以前はマイリストを使わなくても使えていましたが、変更があったのでしょうか・・・
何はともあれ、お陰様で無事に表示できました。
お忙しいところ 本当にありがとうございました。
感謝いたします。m(__)m
投稿: kaori | 2008/07/09 20:55
とっても参考になりました！！
ありがとうございます！m(_ _)m
ブログがごみごみしてきていて、どうしたらよいか悩んでいたのですが・・・。
おかげさまで、スッキリ整理されました。
これからも、ブログをたくさん拝見させていただきますね！＾＾
投稿: コリアマスター | 2008/09/21 13:31
■コリアマスターさん
こんにちは。
折り畳み成功おめでとうございます！
他にもココログユーザーさん作成の便利なスクリプトがたくさんありますので、上手に利用すると使い勝手がよくなると思います。
いろいろ工夫してココログを楽しんで下さいね。
コメントありがとうございました。
投稿: tako→コリアマスターさん | 2008/09/22 09:42
サイドバーの折りたたみに何とか成功しました。
本当に助かりました。
ありがとうございます
初心者なのでこれからもまたお邪魔するかもしれません。
その節はぜひぜひ宜しくお願いします。
投稿: みみぽん | 2009/03/01 11:25
■みみぽんさん
こんにちは。
この記事を書いたのももう3年も前なんですねえ…（しみじみ）。
そんな昔の記事なのに今でも参照して下さる方がいるのは、本当に嬉しい限りです。
新規の記事が書けず申し訳ありませんが、他にも何かお役に立つ記事があれば幸いです。
今後とも宜しくお願い致します。
投稿: tako→みみぽんさん | 2009/03/04 22:54
こんにちは。
先日お世話になった花はなです。
こちらを参考にして、コメントのツリー化も無事に出来ました！ありがとうございます。
今度はサイドバーの折りたたみにチャレンジしたのですが、ボタンを同じ位置で縦並びに出来ないものでしょうか？そして文字色が2色なのも気になります。
それと、マイリストの作成の時、リストのタイトルが必要ですよね。それを“a”と付けて作ったんですが、そのaがブログに表示されてしまいます。
「facet-divers」でコメント欄を探したのですが見つかりませんでした。
友達のブログでは綺麗に並んでいますし、リスト名も表示されていません。
どこか間違っているのでしょうか。
説明が下手で済みませんが、よろしくお願いします。
お返事がある間に、色々対策をやってみようと思いますが・・・
投稿: 花はな | 2011/10/21 15:00
■花はなさん
こんにちは。何度もご訪問ありがとうございます。
＞ボタンを同じ位置で縦並び
多分、ボタンを閉じると階段状になってしまう、ということを仰っているのだと思うのですが、
これはボタンの高さよりもサイドバーに設置されているリストのタイトルの高さが小さいためにそこに入りきらずずれてきてしまうためです。
ですので、下記の記述を加えてタイトル部分の高さを今よりも高く設定してやれば閉じても同じ位置にボタンが収まると思います。
.sidebar h2{height:20px;}
数値は多分20くらいで大丈夫なはずですが、もし上手くいかないようならご自分で様子を見ながら適当に調整してみてください。
リスト名を非表示にする場合は、リストの「名前」欄を＜!-- と --＞で囲んで書きます。
例えば今「a」というリスト名になっているなら
＜!-- a --＞
にする、ということです。
※上記の記述で＜と＞を全角で書いていますが、これはこのコメント欄では半角の＜ と ＞を使えない（消えてしまう）ためです。
※実際にリストのタイトルに入れるときは半角に書きなおしてください。
＞文字色が2色なのも気になります。
についてはよく判りませんでした。
どこの文字色のことでしょうか。
とりあえず、以上ご参考まで。
投稿: tako→花はなさん | 2011/10/21 20:34
Takoさま。
ありがとうございました。
見た目がとてもスッキリです！
細かな事まで教えていただき、感謝です。
文字の色はタイトルやリンクなど、全て同じにしました。
これからも試してみたい事がありそうなので
こちらの記事を参考にさせていただきます。
また、よろしくお願いいたします。
お世話になりました。
投稿: 花はな | 2011/10/21 23:35