初心者でもできる簡単FC2ブログの作り方

【参考記事】 「Harukiya Archives」様：なんでもたたむよ
　
Harukiya Archivesさんの所が見本付きですごくわかりやすいので、そちらを見ていただいた方がわかりやすいかもしれません。なのでまずはHarukiya Archivesさんを見てわからなければ、ここを見た方がいいと思います。

まずは外部スクリプト：要素の汎用折りたたみに行って、ページの下の方にあるダウンロード> fold.jsからファイルをダウンロードして下さい。

ダウンロードしたらサンプルの様な文字色・背景色、マウスが乗った時の文字色・背景色を変えたい人はメモ帳などでファイルを開いて、色の編集をします。
（開き方がわからない人の為に説明；メモ帳を先に開いておきます。そして、ダウンロードしたファイルをマウスの左クリックで選んで左のボタンを押したまま、その開いたメモ帳の中に移動させてボタンを離します。ちなみにメモ帳は[すべてのプログラム]のアクセサリにあると思います。）

開いたら、一番上に・・・

////////////////// 編集箇所 ///////////////////////////////////////
mouse_on_color = '#00f',　　　　　　　　　　　　// マウスオンの文字色
mouse_on_background_color = '#eee',　// マウスオンの背景色
mouse_out_color = '#333', 　　　　　　　 　　 // マウスアウトの文字色
mouse_out_background_color = '#fff'; // マウスアウトの背景色
///////////////////////////////////////////////////////////////////

この様になっています。
説明に書かれている通りなので、自分が変えたい所の色の値を書き換えます。

書き換えたら、ブログの管理画面のツールからファイルアップロードを選んで、いつも画像をアップロードするのと同じ様にfold.jsファイルをアップロードします。

そして管理画面のテンプレートの設定→編集→HTMLの編集で上の方にある</head>の前に、

<meta http-equiv="content-script-type" content="text/javascript" />
<script src="http://blogNO.fc2.com/IDの一文字目/ID/file/fold.js" type="text/javascript" charset="euc-jp"></script>

の2つを記入します。

ここまでできたらあとは折りたたみたい物の、スイッチにしたいタグの後に「最初は開いた状態で、クリックしたら折りたたむ様にしたいなら」class="js_open"・「最初は折りたたんだ状態で、クリックしたら開く様にしたいなら」class="js_close"をつけてあげるだけです。

つけるだけといっても、これがなかなか難しいので例をあげて説明します。

---

[サザン]
インドの山奥電報打った
ら〜っきょうが転が
り〜きんだ拍子
二〜年の春だ
予〜習をわすれ
天〜下一品サザンサザン！

---

という縦に文字が並んだ物をつくってみました。
これを[サザン]をクリックしたら開かれる様にするためには、スイッチにしたい物の後にclass="js_close"をつけるのだから[サザン]の後につければいい事がわかります。

---

[サザン]

---

この様に書かれています。なぜこの様に書いたのかを説明します。
まずスイッチにしたい[サザン]は文字だけでとスイッチにならないので、何かで囲ってあげる必要があります。なので<span>という要素で囲ってあげました。この<span>は囲った部分だけを一まとめにするという意味があるので[サザン]だけが一まとめになってスイッチになります。
次にclass="js_close"をつけるのだけど、[サザン]以下の文章を折りたたみにしたいので、この全部の文章を一まとめにする必要があります。なので今度は<div>で囲って一まとめにしました。<div>は<span>と違って囲った部分だけでなくて、段落全部を一まとめにする意味があります。だから一番最後のサザン！の後ろに</div>を書くことによってインドの山奥〜サザン！までが一まとめになって、これを全部折りたたむんだよ、という意味を持たせる事ができます。

これだけだと素っ気ないから、テーブルタグなどを使うと飾る事を簡単にできます。



2つ目のセルがはじまる<tr>にclass="js_close"を付け加えると下のセルが折りたたまれます。



テーブル全体を青字で書いた様に大きく指定しておくと、少し変わった折りたたみもできます。

テーブルタグがわからない人は、表をつくる（1）基本から見て下さい。
飾り方があまりわからない人は表をつくる（2）表の飾り方から見て下さい。

テーブルタグを使えば、中の背景色、枠線の色や種類、立体的にしたりなど色々できるので使えると思います。
またリスト（箇条書き）の折りたたみ、写真の折りたたみ、折りたたみの中に折りたたみはHarukiya Archivesさんにサンプルがあるので、そちらを見るとわかりやすいと思います。

折りたたみができたのでHarukiya Archivesのsugさんにお礼を言いに行く。

• 関連記事　　； プラグインを折りたたみたい！
• 関連記事　　； 続きを読むを折りたたみたい！
• 関連記事　　； 続きを読むとコメントを折りたたみにしたい！

◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。