CSSのみで折り畳み

CSSのみで「折り畳み」を、という試みを、はてなブックマーク経由で見かけました。

→リンク: CodeWeb: CSSのみで折りたたみナビゲーションっぽいリンク.

素晴らしい。

折り畳みだと黙ってられない（笑）ということで、ちょこっと改造して、本文に適用してみました。

ただ、ここ（ココログベーシック）に適用させるにはもう一工夫必要なので、今回は別途サンプルページを作ってみました。

→CSSで本文を折り畳み

コメントなどありましたら、こちらへ。

(追記)
ありゃま。Firefoxしか動かないですね…(^^;
×IE6, IE5, Opera8
アンカーじゃダメかー

Safariでpre要素の内容が消えてしまう

たとえば、この一つ前の記事の「貼り付け用コード」なんかがpre要素を使って書いているのですが、Safariで肝心のコードが見えなくなってしまい、コピペできないようなんです。

pre {
max-height: 300px;
overflow: auto;
}

と指定しているのが怪しいんじゃないかなと思うのですが、はっきり分かりません。

Mac IEの場合にoverflow: auto; を使うとその要素の内容が消えてしまうというバグがあるらしいという情報は見つかるのですが、Safariの場合は問題ないとの情報しか見つかりません。

@mediaと@importを使えばSafariを回避できるとかいう話も見かけましたが、うーむ。

どうすればSafariでもスクロールバー付きのpre要素にすることができるのでしょう？
というか、ここのpre要素の内容がSafariで見えなくなっている原因は何なのでしょう？

教えて、詳しい人！

サイドバーのマイリストにスクロールバーを付けるJavaScript

以前、BlogPeopleなどのメモ欄で生成されるリストをCSSを使ってスクロールさせる方法について書いたのですが、マイリスト（私リスト/リンクリスト）をCSSだけで個別にスクロールバーをつけることが出来ませんでした。そこで、今回は、マイリストにスクロールをつけるJavaScriptを作ってみました。

リンク: [f-] サイドバーにあるリストをスクロールさせる方法.

----

▼設置方法

- スクロールさせたいマイリスト以降にあるマイリストのメモ欄をテキスト表示に設定する（適当なリストが無ければ新しく作る）
- 下記のコードをコピーしてメモ欄に貼り付ける
- 必要箇所を編集して保存し反映させる

# 「以降」というのは、HTMLソース的に以降という意味です（TypePad系ブログでサイドバーを左右両方使っている場合、右サイドバーは左サイドバーよりHTML的に下です）

▼貼り付け用コード

<script type="text/javascript">
<!--
function scrollLinkList(title, height) {
	var h2s = document.getElementsByTagName('h2');
	for (var i = 0, h2; (h2 = h2s[i]); i++) {
		if (h2.innerHTML.replace(/<[^>]+>/g, '').indexOf(title) == -1)
			continue;
		var ul = h2.parentNode.getElementsByTagName('ul');
		if (ul.length==0)
			continue;
		ul = ul[0];
		ul.style.height = height;
		ul.style.overflow = "auto";
		break;
	}
}
scrollLinkList("my utils", "150px");
//-->
</script>

▼編集箇所

上記のコードの下の方にある

scrollLinkList("my utils", "150px");

という一行を編集してください。書式は、

scrollLinkList("リストのタイトル", "高さ");

となっています。

# つまり、上記の例では、「my utils」というタイトルのマイリストの高さを150ピクセルに設定し、はみ出した部分をスクロールバーを使って見られるようにしています。

# 「my utils」は、今、このブログの右サイドバー下方にあります。

※なお、引用符内部は、大文字小文字など、小さな違いも区別しますので、リストタイトルは管理画面で作った通りに、高さは半角英数字（単位部分は小文字）で書くようにしてください。

# 例 ： 「my utils」であれば "my utils" であって、"My Utils" でもなく、 "MY UTILS" でもなく、 " my utils" などでもないということです。また、150pxであれば、150PXでも１５０ｐｘ（全角）などでもありません。

▼複数のマイリストにスクロールバーをつける場合

scrollLinkList("リストのタイトル", "高さ");の部分を繰り返してください。

----

以上です。不明瞭な部分がありましたらコメントしてください。

暴想: カテゴリ別バックナンバーをプルダウンメニューにするJavaScript

ということで、カテゴリのプルダウンメニューも使わせていただくことにしました。いやー、素晴らしい。

リンク: 暴想: カテゴリ別バックナンバーをプルダウンメニューにするJavaScript.

---

なお、前回同様、動作遅延が気になるので、カテゴリより後にあるマイリストのメモ欄に、

<script type="text/javascript" src="http://java.cocolog-nifty.com/blog/files/javascript/category_archive2pulldown.js"></script>
<script type="text/javascript">
        category_archive2pulldown();
</script>

と書くことにしました。

暴想: 月別バックナンバーをプルダウンメニューにするJavaScript

でました。素晴らしい。みなさん、こちら↓にしましょう。

リンク: 暴想: 月別バックナンバーをプルダウンメニューにするJavaScript.

ただ、ウチはサイドバーの読み込みが遅いので、バックナンバーより後にあるマイリストでのメモ欄に、

<script type="text/javascript" src="http://java.cocolog-nifty.com/blog/files/javascript/date_archive2pulldown.js"></script>
<script type="text/javascript">
        date_archive2pulldown( '/divers/archives.html');
</script>

って書くことにしました。

ちなみに、最初、/divers/のところを変更するのを忘れて嵌りました(^^;

---
私はフランス語になっちゃうので（そう設定してあるので）、しばらく両方使うことにします（笑）

ところで、mars 1005 (1005年3月)って、なんだ？(＾＾;
昔どこまで古い記事が作れるのか試したことがあったんだけど、その時の名残かな。。。

ref. [f-] ココログ／記事の公開日時をもっと簡単に変更する(bookmarklet)

もうその記事は無いんだから、消えて欲しいなあ。
自分では消せないんだろうなあ…。orz

タイトルとURLを表示するbookmarklet

Flickr風味。

title&URL

ページ上部に出ます。

focus()が効かないのは何故？

「コメント欄の設定明示」＆「トラックバックの注意書き」、左サイドバーに対応しました

ココログベーシックなどのTypePad系用の自作スクリプトの内、以下のスクリプトを左サイドバーのみの場合にも動作するようにしました。これまで使えなかった方、是非お試しください。

リンク: [f-] トラックバックの注意書きを明示する.
リンク: [f-] コメント欄の設定を明示する.

Firefox 1.0, Internet Explorer 5.0 & 6.0, Opera 8.0で動作確認しました。

他のブラウザでの動作状況をお知らせいただけると幸いです。

---
この左サイドバーへの対応、長年の懸案だったんですが、「ゆきりんコンテネレッツァ」の柚季　凛さんとのコメントでのやり取りの最中に急に思いつきました。柚季　凛さん、きっかけをいただきまして、どうもありがとうございました(^^)
http://facet.cocolog-nifty.com/divers/2005/08/post_4946.html

他のスクリプトも、ご要望があれば順次対応する予定です。

---
以下、余談。

今回何をしたかというと、たとえば、

var html = '...';
function addNotes(html) {
	...
}
adNotes(html);

っていうのがあったとすると、

var html = '...';
function addNotes(html) {
	...
}
if (document.getElementById('right')) {
	addNotes(html);
} else {
	var tmp = window.onload;
	window.onload = function () {
		addNotes(html);
		if (typeof tmp == 'function') tmp();
	}
}

としてみたわけなんですが…

addEventListenerと違って、いろんなブラウザに対応していそうなのと、onloadイベントの順番を逆にしたりできるのはいいなと思ってます。

ただ、これだと、

- 両サイドあって、たまたま左サイドに置いたときにはonloadで動作してしまうので、作動が遅れる欠陥があります。なので、その場合、setTimerやらsetIntervalやらを使って #right が発生したら動作させるような処理が必要になっちゃいそうだったので、両サイドある場合は右に置いてね、っていう断り書きが必要だったり。

- htmlという変数が他のものと被らないように、冗長にしなければいけなかったり。

- var tmp って、onloadまでちゃんと残ってくれるのか？と疑問だったり。

という感じで、いまいちすっきりとした解決方法とは思えませんでした。

何かもっといい解決方法があるはず…

Search Word Cloud

一昨日ぐらいからサイドバーに「Search Word Cloud」を設置してます。ページがどんなキーワードで検索されたかをTagCloud風に表示させるくっつきサービス だそうで、コンセプトを聞いた瞬間にこれは面白いと思って、早速取り付けました。

リンク: YappoLogs: ページがどんなキーワードで検索されたかをTagCloud風に表示させるくっつきサービス.

設置も凄く簡単ですし、今のところGoogleとYahoo! JAPANの検索結果からのアクセスに対してカウントするようですが、他の検索エンジンにも拡大予定だそうですので、楽しみです。

(追記)設置スクリプト生成ツールが出てました。
リンク: Search Word Cloud Setup Tool..

----

で、自分で「facet」とかで検索してわざわざキーワードを反映させてみて、「なるほどなるほどー(^^)」とか思って楽しんでいたのですが、今日、ふとトップページを見てみると…

ってオイ！(^^;
しかも、なんでGoogleで一ページ目なんですか！（笑）

このキーワードでのアクセスがこれ以上増えても困るので活字化は自粛。…と思ったんですけど、サイドバーに表示なんかしてたら結局…(^^;

ということで、隠したいキーワードが指定できるといいなと思いました。＞作者様