jQueryで記事を折りたたむ
↑記事の上下にあるバー（文字以外の場所）をクリックすると記事を折りたためるようにしました。
久しぶりの更新ですが、最近javascriptを触るようになり、fc2ブログでもjsを使う方法がわかったので実装してみました。
使ったのはjQueryというJavaScriptライブラリですが、これを使えばWeb上で見かける動的な演出を簡単に使う事ができるようです。本当に簡単なのでその方法を解説していきたいとおもいます。
①jQueryをダウンロードする。
公式HP(http://jquery.com/)からjQueryをダウンロードして適当な場所に保存。(ファイル名はjquery.jsとします)
②保存したjquery.jsをサーバーにアップロードする。
■普通のサーバーで使用する場合
FTPソフト等で自分のホームページと同じ場所へアップロードする。
フォルダを作って/js/jquery.jsとかにしてもOK
■fc2ブログで使う場合
管理ページ＞ファイルのアップロードからjquery.jsをアップロードする。
アップロードしたパス（アドレス）をコピーしておいてください。
③htmlにjQueryを参照するタグを追加する。
HTMLの<head>タグの中に
<script type="text/javascript" src="○○○○○/jquery.js"></script>
と追加して、先ほどコピーしたアドレスを○○○の部分へ入れてください。
④続いて反映させたい効果を書いていく。
今回はこのサイトにも実装した、スライドトグル（折りたたみ）をつけてみたいと思います。
とりあえず<head>タグ内の先ほど書いた記述に続けて↓の8行を貼り付けてください。
<script type="text/javascript"> $(document).ready(function(){ $("dt").click(function(){ var index = $("dt").index(this); $("dd").eq(index).slideToggle("slow"); }).css("cursor","pointer"); }); </script>
これを解説していきますね。↓↓↓
$("dt").click(function(){
dtをクリックした時に実行する処理ってこと。
var index = $("dt").index(this);
何番目のdtなのかをindexに保存。
$("dd").eq(index).slideToggle("slow");
↑ ↑ ↑
どれか 何番目か 開閉の早さ
となっているのでこの文だと･･･
「dtがクリックされたら、index番目のddをslowの速さで開閉する」ということになります。
最後に･･･
⑤HTMLの中で<dl><dt><dd>タグを書く。
<dl> <dt>クリックしてね</dt> <dd> 中身が <br> 開閉 <br> するよ <br> ！！！ </dd> </dl>
試しにこんな感じに書くだけでなんとなんと、アニメーション付の開閉記事がつくれちゃう訳です。
実際に動かすとこうなります↓
- クリックしてね
- 中身が
開閉
するよ
！！！
ちなみにfc2ブログの記事を開閉したい場合は、
記事のタイトルがクラス「entry_header」、
記事の中身がクラス「entry_body」という名前なので、
名前の前にクラスをあらわす「.」ドットをつけて、
$(".entry_header").click(function(){ var index = $(".entry_header").index(this); $(".entry_body").eq(index).slideToggle("slow");
という感じになります。
これであなたのホームページもひとつ上へレベルアップ！