> >

もう既に導入された方も見かけますが、私がネット上でただ一人ファンだと公言している UnderDoneさん のうにゅうにゅナビゲーションを導入しました。導入先は別ブロッグです。私の厚かましいリクエストにも応えて頂いて感激です。

報告も兼ねていますが、導入に際してちょっとだけアレンジしたのでそれの紹介です。

うにゅうにゅしているのはそのブロッグの「Calendar」「BlogPeople」の二つです。BlogPeople の方は長くなるので Calendar を例に出します。なおこの Calendar の出し方は私がカスタマイズした CommonLib.js <http://homepage.mac.com/yuji_okamura/.Public/iBlog/CommonLib.js> による出し方になっているので、導入されていない方で参考にするときは単純にコピー&ペーストするのではなく、うにゅうにゅに関する部分だけにしてください。

ヘッダー：

<div class="sidetitle">
	<div id="varMS_Calendar" style="display: none">
		<span onclick="showMoreMenu('Calendar', 1);" onkeypress="showMoreMenu('Calendar', 1);" style="cursor: pointer">カレンダー(▲隠す▲)</span>
	</div>
	<div id="varMH_Calendar">
		<span onclick="showMoreMenu('Calendar', 0);" onkeypress="showMoreMenu('Calendar', 0);" style="cursor: pointer">カレンダー(▼見る▼)</span>
	</div>
</div>

内容：

<div class="side">
	<div id="varB_Calendar" align="center" class="calendar" style="display: none;">
		<script type="text/javascript">
			WriteCalendar();
		</script>
		<noscript>
			JavaScript が有効でないとカレンダーは表示できません。
		</noscript>
	</div>
</div>

えー工夫した点は

• 広げたり畳んだりする動作のインストラクションを明示的にした。
  

  カレンダー(▼見る▼)
  や
  カレンダー(▲隠す▲)

  という箇所です。初めて来た人でもこれならきっとわかるだろうし、読み上げブラウザの人でも「見る」とか「隠す」という文言でインストラクションできます。
• a タグを使わない。
  a タグを使うとスタイルシート等の a 要素に対する設定が適用されてしまいます。スタイルシートをいじるのが面倒なので span タグで囲んで、onclick 属性や onkeypress 属性でクリックしたときの動作を入れることで動作は同じでもスタイルは今まで通りというようにしました。
  しかしこれだけだと、クリッカブルな要素だとわかってもらえないので style 属性で cursor: pointer として、マウスが上にくると a 要素のようにカーソルがポインターに変わるようにしました。
• onkeypress 属性を入れた。
  手が不自由等でマウスを使用していない人でも操作できるように onclick 属性と同じ内容を onkeypress 属性にも入れました。論理カーソルがバインドされているときに command-W などで閉じようとしてもここをクリックしたような動作になってちょっとしつこいですが、ちょっと我慢してください。もっと我慢している人がいるので。

さてその設置したブロッグでこれまた UnderDoneさん 提案の iBlog People も導入しました。これについては別エントリにします。

Trackback Ping URL(U)