最初に書いておきますが,失敗作です.


他のブログサービスなどで,

「記事一覧」,「コメント一覧」,などをクリックすると,

記事のリストやコメントのリストが表示されたり,非表示となったりするのがありますよね.

これはJavaScriptを利用して作成されているため,

HTMLへのユーザーによるJavaScriptを禁止しているアメブロでは利用できません.

<script>タグも利用できないので,外部スクリプトファイルをHTMLに読み込むこともできないですよね.


JavaScriptをHTMLに導入する手段はいくつかあります.

1.HTMLに直接JavaScriptを書き込む

2.外部スクリプトファイルを置き,<script>タグやJavaScriptのイベントなどでHTMLに読み込む

というのが一般に知られている手段ですが.

3.CSS中にJavaScriptを記入し,HTMLで実行させる

4.CSSで外部スクリプトファイル(HTCファイル)を呼び出し,HTMLで実行させる

という手段もあります.

CSSのプロパティがIE専用なので,IEでしか使えません.


3.はプロパティ値 expression()を利用.

4.はプロパティ behaviorを利用.

4.はHTCファイルの置き場所として,text/x-componentのMIMEタイプ設定があるサーバが必要.このMIMEタイプの設定がないとファイルが動きませんので.


4.を利用して,クリックでリストの表示・非表示切り替えを導入してみました.


失敗作サンプルページ


上記リンク先ページ中のリンクはすべて空リンクなので,リンク先はありません.

上記リンク先ページの,最近の記事一覧,お気に入りブログ...などのメニュータイトル先頭部分の矢印画像をクリックすると,表示・非表示が切り替わります.

ただし,IE専用(IE5以上...だったかも).NNやFxでは動きません.


HTML自体はアメブロのペーシックなものです.(スタンダードのグレーを利用)

JavaScriptの追加記載は一切ありません.

CSSでJavaScriptを呼び出して,HTMLに適用させています.

CSSは...次のCSS用に改造途中のものなので,まだ未完成です.ヾ(-"-;)ぉぃぉぃ


また,アクティブ(?)なコメント記入欄の背景色変更も,CSS+HTCで操作しています.

コメント記入欄の,名前,URL,タイトル,コメントの4つの記入欄に文字を入力しようとすると,入力しようとしている部分の背景色のみ変更されます.

JavaScriptの原理は,アメブロのお問い合わせ で使われているのとほぼ同じ.

アメブロのお問い合わせのやつは,外部スクリプトファイルをイベントで直接読み込ませている2.のタイプのものですが.


失敗作サンプルページを見る分では,Web上でのそれなりに動作していますよね.


問題はbehaviorの中身が同一サーバ上でないと動作しない...ようなかんじなこと.(^^;;;

同一サーバ上であれば,URL指定は相対パス(読み込み元からの相対パス)でも絶対パスでもどちらでも動きます.

そういうわけで,失敗作です.(/_;)