ホームページ制作の小技集
＆nbsp;のホームページ制作 ++ 小技集 Tips ++
レイヤーを出したり引っ込めたりできるjavascript
最近いろいろなホームページやブログで使われている手法で、「続きを読む」などのリンクテキストをクリックすると、すぐ下にレイヤーが現れて話の続きを読めたりできる、このホームページのトップページでも使っているものです。
やりかたはいろいろあると思いますが、ここではjavascript(DOM)を使ったものをご紹介したいと思います。
まずは下記の見本で試してみてください。
【サンプルブログ】
ここのところ暑い日が続きますけど皆さんはいかがお過ごしでしょうか？
最近僕は「セカンドライフ」という仮想世界の住人になるべきかどうか考えています。
このソースが以下です。
function openLayer(){
document.getElementById("Layer1").style.display = "";
}
document.getElementById("Layer1").style.display = "";
}
これだけなんです。
そうしてリンクのアドレスに
<a href="javascript:openLayer()">続きを読む</a>
と記入して、隠したいレイヤーを以下のようにすればそれで終わりです。
<div id="Layer1" style="display:none">
隠したい文章などをここに書く。
</div>
隠したい文章などをここに書く。
</div>
隠したい部分にフォームを挿入すれば、ブログで見るコメント部分が作れます。
コメントする
といった具合です。
よく続きを読むをクリックすると別ページに飛ばされるときがあるのですが、あれはちょっとストレスですよね。それが飛んでも読みたい内容ならよいのになんとなくでクリックしてしかも別窓だったら腹が立ちます。
しかしこのようにすぐにレイヤーが出てくれるのならユーザーにも優しいですね。
ここで載せたのは最も基本的なスクリプトなので、これを用いればいろいろなことができます。
例えばこのホームページのお見積もりページで使っているので、こちらも参考にしてみてください。
