はてなスタッフid:kiyohero:20050602#1117710983さんが、巷で話題の「もんたメソッド」によるはてなダイアリーの記載実験を行っておられます。
「もんたメソッド」とは、プレゼンテーションなどの時に、大事なところを隠しておいて、開きながら説明していく方法ですね。
htmlソースをしげしげと眺めていて、「な〜るほどな〜〜」と思った次第。
この仕掛けはこうです。
- htmlの仕組み上、リンクになっている部分は、CSS次第ではマウスを上に乗せただけで色を変えることができる。
- CSSではリンク部分など、特徴のある部分だけの背景色を設定できる。
- CSSではIDやClassの設定により、ある一部の範囲だけに適用する表現を設定できる。
- 背景色を文字色と同じ色にすると、塗りつぶしたのと同じ見栄えになる。
だから、任意の範囲のはてなダイアリーキーワードリンク部分だけをもんたメソッドにできるわけです。kiyoheroさんの場合、divってタグで挟んでおき、そこに特別な名前（id）を付けていますね。
しかし、逆に言えば何らかの形でリンクを発生させなければ、はてなダイアリー版もんた記法は使えないことになります。また、kiyoheroさんの実験の場合、idで指定しているので、どこでも使える訳じゃありません。
一つの打開策としては、もんた記法を設定するところの近くに、リンクしたら飛んでこられる場所を設定しておきます。
a name="任意の英文字"
を使って、リンク先を作っておく。
もんた記法をしたい文字列をa hrefタグ----/aでかこっておく。そのときのリンク先をその「#任意の英文字」にしておけば、リンクしても飛んだように見えないことになります。また、リンクに関して、どこにでも使えるようにclassを設定しておきます。
上記を考慮して、少し改良してみました。例として、以下をご覧ください。
準備＝CSSへの追記
- 一カ所でしか使えないidでなく、何カ所でも使えるclassで、隠したいところにmontaという設定にすることにします。
- 日記の背景色とリンク部分の文字色を把握しておきます。テーマのソースか、自分の追記したCSS参照。
- 未訪問のリンク部分の文字色（a,a:link）
- #753919（テーマ通り）
- 日記背景色（bodyのbackground-color）
- #f5f5f5（テーマから変更しています）
- 未訪問のリンク部分の文字色（a,a:link）
上記をもとに、日記の設定のスタイルシートに以下を追記しました。
/*もんたメソッド記法、書き方は20050603記事参照*/
a.monta{background-color:#753919;}
a.monta:hover,a.monta:visited{background-color:#f5f5f5;}
実験
- 例文を考えます。
- 納豆が大好きな理由は、健康にいいからです。
- 行頭にアンカー"monta1"を打ちます。
- 例文の隠したいところを、a href---/aタグで挟みます。classとしてmontaを設定しておきます。そのとき、リンクするのは"#monta1"にします。
- クリックしても新しいウインドウが開かないようにしておきます。
結果、こうなりました。
<a name="monta1"></a>納豆が大好きな理由は、<a href="#monta1" class="monta" target="_self">健康にいい</a>からです。
実際に書いてみましょう。
納豆が大好きな理由は、健康にいいからです。
マウスを乗せてみてください。クリックした後、ページを再読み込みすると、開きっぱなしにできると思います。
最初から「健康にいい」の部分が読めてしまっている場合は、Webブラウザの履歴を消去すると隠した状態にも戻すことが出来ます。
2005/06/04追記
mkawanoさんがweb上でのもんたメソッドについて、リンクをまとめておられます。
id:mkawano:20050603:p1
