naoKの「ホイきたー！」 : サイドバーの折りたたみを実装してみました

サイドバーの折りたたみを実装してみました

2004/5/23

あー，さっき書いた記事消えちゃった…シクシク。

さて，落ち込んでいても仕方ないので書き直します。

今回参考にさせていただいたのは加野瀬未友さんのARTIFACT ―人工事実― というサイトです。ここのMovable Type作業メモの中に書いてある"長くなっている部分を隠す"という記事。

naoKはppBlog利用者なので，今回は"Recently"を隠す場合の例を書きます。

index.phpの中を次のように。＜＞は全角ですので実際使うときは（そんな人いるのか知りませんが）半角に直してください。

$recently .= ' ＜script type="text/javascript" src="showhide.js"＞＜/script＞＜div class="box-cap" title="最近の記事"＞Recently＜a href="javascript:void(0);" onClick="showHide(\'c0\');"＞▼＜/a＞＜br /＞＜/div＞＜div class="sidehide" id="c0" style="padding-left:20px;"＞＜!--一部省略--＞ $recently .= "\n ＜/div＞\n ＜div class=\"box-foot\"＞＜/div＞\n"; }

"▼印じゃイヤだ!"という人は▼を何か他のものに変えてください。画像でも出来ると思います（未確認）。で，クリックするたびに表示，非表示が切り替わります。あと，class="box-body"となっているところをclass="sidehide"と変えることになります。styleを設定しているのはcssとの兼ね合いで，ここだけ特別に変えないと対処できなかったので… それから，cssに.sidehideの定義が必要な場合があります。特にbasicスタイルを使用している場合ですね。.box-bodyの定義をコピーして，コピーしたものを.sidehideに名前を書き換えれば済みます。何箇所かに適用したい場合は"c0"の文字を他のダブらないものに変えてください。

javascriptファイル（showhide.js）は加野瀬さんのサイトからダウンロードし，index.phpと同じディレクトリにアップ。

で，naoKはここでふと思いました。 "メニューって，みんなに見てもらいたいから乗せてるんじゃん?それをわざわざ隠すの?"

…orz

まぁ，やってみたかったんですよ。でもいざどれを折りたたもうかと考えると，これが難しい。コメントもトラックバックも隠せないよなー。後はリンク位かなぁー。でもこれもなぁー。ボソボソ。

…相変わらず長いくせに分かりにくい文章だ，マッタク自分。

5/23 17:20追記。ようやく安定したみたいなので注記を外しました。~~更に追記。現在はARTIFACTさんのものからふろむにうじぃのtakkyunさんによるこちらの折りたたみシステムに変えています。~~ppBlog v1.4.xにて折りたたみスクリプトが標準搭載になりました。上記2つのスクリプトにはお世話になりました。改めて感謝です。

この記事に対するコメント・トラックバック [16件]

1. りえっぺ — 2004/05/23@01:00:55

お！
あたしちょっとだけ前から入れてますよー
右下の方の月別ログって所。

ひじょーに気づきにくい。汗

最初はカテゴリーもやってたんですけどね。
わかりにくくなるかなーと思ってやめました。

naoK 2004/05/23@01:10:51

ホントだ!今言われてようやく気付いた。
なんだー教えてくださいよー。
りえっぺさんはどこのサイトを参考にされました?

3. りえっぺ — 2004/05/23@01:32:58

ん？同じサイトですよー
続きを表示を探していて見つけました。
ひっそりと設置。笑

あたしMartinさんのjavaうまく設置出来てない･･･
＿|￣|○じくじぐ。

4. りえっぺ — 2004/05/23@01:34:58

ありっ？
ここの続きを読む･･･はどう設置したのですか？
はり？

naoK 2004/05/23@01:40:52

へへへ。いいでしょー。
operaからでも大丈夫。個別表示でもおK!

でも折りたたみ関連のスクリプト入れてからものすごく不安定になった。donutpが落ちるなんて…あまり酷いようだったら取り外そっと。

6. りえっぺ — 2004/05/23@01:55:59

尻たいー笑
教えて。こっそり(･∀･)と。

shadow.jsを拡張したんでつか？
そんなヨカーン

naoK 2004/05/23@03:43:31

拡張ではありませんが，はずれでもありません。
ちょっと今日はサイドバーの折りたたみ記事を丸々失って書き直したので疲労困憊です。
明日また書きます。とかいってるうちにたぶんmartinセンセがもっといいやつを提供してくれます，間違いなく。

8. edgeout — 2004/05/23@03:57:41

IEコンポーネントを使ったブラウザは、アプリケーションエラーで落ちますね。
ブラウザクラッシャーですか？＾＾；

naoK 2004/05/23@04:15:38

いやぁ，お恥ずかしい。
ていうか，なんとかしないと。スミマセン。
ものすごいレスポンスが悪いうえに落ちますよね。
参った。

10. カヱル — 2004/05/23@09:42:28

naoKさん、ウチのbogなんぞに来て頂いてありがとうございました<(_ _)>。
naoKさんのこれって、うにゅうにゅReadMoreみたいな感じですかぁ？イイナーイイナー
ちなみにApple純正ブラウザSafari及びその互換ブラウザぢゃ、今回のmartinさんupdateは機能しませんでした。。orz
Safariの 'like Gecko'とはまさに、似たモノってことですかね、、（;´Д⊂）
ではでは〜。

naoK 2004/05/23@12:09:09

よーこそ，カヱルさん!

そうですね。macでは"うにゅうにゅreadmore"と呼ばれてる例のヤツです。
ただ，現在非常に不安定で，edgeoutさんも指摘されてますが，ie系のブラウザで非常に落ちやすくなってしまっています。
martinセンセが何とかしてくれるでしょう（他力本願

12. カヱル — 2004/05/23@22:14:25

naoKさん、ｻｻｯ((((〃⌒ー⌒)／どもっ♪カヱルデス。
ppBlog掲示板での助け舟ありがとうございました。

naokさん作スクリプト、ウチのブラウザは全然大丈夫ですよー。入れたいなぁ〜。でも、問題山積みだし。。（;´Д⊂）

ちなみに、ソース拝見中に６ホッターブツを見つけてしまいました(・∀・)ﾆﾔ。ウチも入れてましたが非win-Gecko系だと挙動が不安定なので外してあります。(^_^;;ボクの足跡ついてますかぁ？

naoK 2004/05/23@22:23:14

うわっハズカシっ!!
6hotは始めたときから入れてます。当時はホントに自分のアクセスしかなくて…でもこれ，かなり高機能なのでお気に入りです。
それからこのスクリプトは私が作ったわけじゃないんで（大汗
是非紹介先の記事をご覧になってください。
あれ，そういえばカヱルさんのところで動作確認取れましたか。有難うございます。
ということはマカーな人も大丈夫ってことですかね。とりあえず一安心です。
#しかし昨日はホントにどうなることかと思った…ieが落ちるなんてありえない…いや，実際落ちまくりだったんだけど…

14. カヱル — 2004/05/24@04:47:52

早起きカヱルです。どもです〜。
イヤ、、6hot解析はSafari系ブラウザのログ取得できないっぽいんですよ。ppBlogのJavascript系同様。。Safariが採用しているKHTMLの衝撃的事実が。。[link:kde.gr.jp/pukiwiki/index.php?khtml%A4%CE%C6%E2%C9%F4%B9%BD%C2%A4/] http://www.kde.gr.jp/pukiwiki/index.php?khtml%A4%CE%C6%E2%C9%F4%B9%BD%C2%A4[/link/]
' 最後に 'ってトコだけでもヒマがあれば読んでみて下さい。ボクは泣きました（;´Д⊂）欠陥を採用するなよApple!と。
だからjsファイルはだm(ry

あと、ウチのphpcounterは日本語版ぢゃないデス。
[link:ekstreme.com/phplabs/phpcounter.php/]本家：[/link/]
日本語版はver.5で、最新版はver.7デス。(　・∀・)ｲｲ!

naoK 2004/05/25@01:41:38

カヱルさん，リンク直しときましたー。
なになに，khtmlですか?初耳です。リンク先見ましたが結構見切り発車的な印象を持ちました。
6hot，改めてみてみると確かにsafari検出してませんねえ。
実はもう1種類解析入れてたりします（何者
そちらは検出してくれます。が，6hotのほうが見やすくて気に入ってたりもします。

16. カヱル — 2004/05/25@07:59:37

naoKさん、おはようございます。カヱルです。
ウチも６ホターとapricotいれてました。apricotは同じ方法（Javascriptで情報取ってphpで解析させる?)なのですがこっちはOSX取れるんですよね。。
ボクも６ホター好きなんでなんとかしたいと思ってマス。。
#原因は判明してるんでちと考えたら解決すると思うのですが。。

naoKの
「ホイきたー！」

サイドバーの折りたたみを実装してみました

Gacha*2 Entry

Comments

Trackbacks

Popular Top 10

BlogPet

Links

Flickr

Others