> >

いやぁ済みません。先のエントリはプラグインの導入止まりの説明になってました。というわけで「うにょうにょ Read More ができるプラグイン新発売(無料)」の続きで「うにょうにょ Read More」の設置方法。
(2004/01/14)もっとよい方法を開発しました。

先のエントリにある手順 C, D の間に次を実施する。

1. BlogPage.txt を次の要領で編集する。

   変更前	変更後
   </head>	<script type="text/javascript" src="<$BlogBaseURL$>ToggleEntryBody.js"></script> </head>
   <$EntryAbstractOrBody$><br />	<$EntryAbstractOrBody$> <div id="Hide_<$EntryUUID$>" style="display: none;">     <iframe title="<$EntryUUID$> の本文" src="<$EntryCategoryUUID$>/<$EntryUUID$>/EntryBody.html" width="100%">         下の「単独表示」をご利用下さい。     </iframe>     <_a href="index.html" onclick="ToggleEntryBody('<$EntryUUID$>', '<$EntryCategoryUUID$>/<$EntryUUID$>/index.html'); return false;" onkeypress="ToggleEntryBody('<$EntryUUID$>', '<$EntryCategoryUUID$>/<$EntryUUID$>/index.html'); return false;">&lt;&lt;続きを隠す</a> </div> <div id="Show_<$EntryUUID$>" style="display: block;">     <_a href="index.html" onclick="ToggleEntryBody('<$EntryUUID$>', '<$EntryCategoryUUID$>/<$EntryUUID$>/index.html'); return false;" onkeypress="ToggleEntryBody('<$EntryUUID$>', '<$EntryCategoryUUID$>/<$EntryUUID$>/index.html'); return false;">続きを表示&gt;&gt;</a> </div>

2. CategoryPage.txt を次の要領で編集する。

   変更前	変更後
   </head>	<script type="text/javascript" src="<$BlogBaseURL$>ToggleEntryBody.js"></script> </head>
   <$EntryAbstractOrBody$><br />	<$EntryAbstractOrBody$> <div id="Hide_<$EntryUUID$>" style="display: none;">     <iframe title="<$EntryUUID$> の本文" src="<$EntryUUID$>/EntryBody.html" width="100%">         下の「単独表示」をご利用下さい。     </iframe>     <_a href="index.html" onclick="ToggleEntryBody('<$EntryUUID$>', '<$EntryUUID$>/index.html'); return false;" onkeypress="ToggleEntryBody('<$EntryUUID$>', '<$EntryUUID$>/index.html'); return false;">&lt;&lt;続きを隠す</a> </div> <div id="Show_<$EntryUUID$>" style="display: block;">     <_a href="index.html" onclick="ToggleEntryBody('<$EntryUUID$>', '<$EntryUUID$>/index.html'); return false;" onkeypress="ToggleEntryBody('<$EntryUUID$>', '<$EntryUUID$>/index.html'); return false;">続きを表示&gt;&gt;</a> </div>

赤字の部分は人それぞれで違ってくるかもしれないところである。

特に説明が必要と思われるのは ifram 要素の中の文言。この文言は iframe をサポートしていないブラウザが iframe の代わりに表示する部分。iframe をサポートしていないブラウザではこの技が使えないのでエントリページへのリンクを代わりに使ってほしいというインストラクションを書くのが妥当。エントリページへのリンクをここでは「単独表示」としているが、人それぞれ「PermLink」とか「Read More」など色々あるのでポリシーに合わせて変えよう。ただし、「Read More」とか「つづく」とか「続きを読む」は、iframe をサポートしているブラウザではその役割が「うにょうにょ Read More」に奪われてしまうので名前を変えた方がよい。

「うにょうにょ Read More」の動作確認をしたのは、

Mac OS 10.2.8

• Safari 1.0
• Netscape 7.1
• Internet Explorer 5.2

Windows 2000

• Internet Explorer 6.0

「うにょうにょ Read More」の実体である JavaScript ファイル ToggleEntryBody.js では、XHTML の要素を ID で取得する関数 getElementById が存在していて、そこから style 属性の display の内容が取得できる場合にのみうにょうにょする。そうでないときは「単独表示」のリンクと同じ役割を果たすようになっている。iframe はサポートしているけれど getElementById や要素オブジェクトの style 属性をサポートしていないブラウザでは「単独表示」が二つ重なることになってしまうが、機能的に問題になるわけではないので目を瞑ることにした。

Trackback Ping URL(U)