JavaScript – TsubokuLab – ツボクラボ

↑記事の上下にあるバー（文字以外の場所）をクリックすると記事を折りたためるようにしました。
久しぶりの更新ですが、最近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");

という感じになります。
これであなたのホームページもひとつ上へレベルアップ！

Tag Archives

jQueryで記事を折りたたむ