ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > スポンサー広告 > title - なんでも折りたたみたい!TOP > カスタマイズをしよう! > title - なんでも折りたたみたい!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ

なんでも折りたたみたい!

プラグインを折りたたみたい! ではプラグインの物しか折りたためなかったけど、これはなんでも折りたたむことができます。
なんでも折りたたみたい!

【参考記事】 「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><strong>[サザン]</strong></span>
<div class="js_close">
インドの山奥電報打った
ら~っきょうが転が
り~きんだ拍子
二~年の春だ
予~習をわすれ
天~下一品サザンサザン!</div>

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

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

早口言葉
青巻紙
赤巻紙
黄巻紙

<table border bgcolor="#ffdddd" bordercolor="#ff7777" cellpadding=10 cellspacing=2 style="color:#666666;">
<tr>
<td bgcolor="#ffccff" align="center">早口言葉</td>
</tr>
<tr class="js_close">
<td bgcolor="#ffffff" >青巻紙<br/>赤巻紙<br/>黄巻紙</td>
</tr>
</table>

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

早口言葉
カエルぴょこぴょこ
三ぴょこぴょこ
合わせてぴょこぴょこ
六ぴょこぴょこ

<table width="150" height="200" border bgcolor="#ffdddd" bordercolor="#ff7777" cellpadding=2 cellspacing=2 style="color:#666666;">
<tr>
<td bgcolor="#ffffff" align="center">早口言葉</td>
</tr>
<tr class="js_close">
<td bgcolor="#ffccff" >カエルぴょこぴょこ<br/>三ぴょこぴょこ<br/>合わせてぴょこぴょこ<br/>六ぴょこぴょこ</td>
</tr>
</table>

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

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

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

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



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
fold.jsからダウンロードしたファイルの編集について
以前、newマークでお世話になったことがある者です。
その節は、お世話になりました。

さて、今回の質問ですが、
一応、折りたたむ工程は全て完了し、無事ブログ上でも折りたたまれていました^^。
ただ、マウスオン&オフ時の、文字&背景色の変更方法がわかりませんf^^;

メモ帳でファイルを開いて、各項目に好きなカラーコードを入力しました。
が、そのあと、そのメモ帳をどうすれば良いのかが分かりません。

「名前を付けて保存」にしても、メモ帳として、保存されるだけだし・・・。
つまり、ファイルに反映させる方法が分かりません。

どうやったら、色が変えられますか?
ちなみに、メモ帳で開いたら、日本語部分が文字化けしていましたが、
それは関係ありますか?
まきさんへ
色を変える方法をもう少しわかりやすく、詳し説明しますね!
まずメモ帳はパソコンに最初から入っているメモ帳ではなくてFC2がおすすめにしている「Tera Pad」というフリーソフトのメモ帳の方がいいので[Tera Pad]をダウンロード市に着ます。
http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html   (場所はここです。)

ダウンロードしたら上記の記事のなかの説明の様にしてfold.jsファイルを[Tera Pad]で開きます。こうやって開くと日本語の部分も文字化けしないと思います。

開いたら、文字色と背景色の色をカラーコードを入力して変えます。書き換えたら上書き保存します。保存できたら[Tera Pad]を閉じます。

次に自分のブログを開いての[ファイルアップロード]から今、上書きしたfold.jsファイルをアップロードします。これで色をかえた折りたたみができると思います。

ポイントは拡張子をメモ帳のtxtにしてしまうとできないので、jsのままにしておくと上手くいくんです!

回答ありがとうございます!
なるほど、メモ帳は、そこからダウンロードするんですね!

るんばば様のご返答の通りに実行してみたいと思います!
がんばります♪
まきさんへ
頑張ってみて下さい!普通に設置できるならきっとできると思います。
色の変更が
無事できました!ありがとうございました。
ただ、新たな問題が発生しました(汗。

ブログの背景の色と合わなかったので、
違う色にしようと思って、もう一度カラーコードを変更したのですが、
ブログ上で反映されません。

ファイルもアップロードし直してみたのですが、
それでもだめでした。

何が問題なのでしょうか?
まきさんへ
まきさんが書かれたとおりのやり方でうまくいくと思うのですけどなぜでしょうかね。
カラーコードを書き直してファイルをもう一度アップロードすればよいはずです。
もう一度やてダメでしたら、ファイルを一度削除してからアップロードしてみて下さい。
ちなみに今は背景がピンクでマウスを乗せると文字が青色になりますが、これは直っていない状態なんですよね??
直っていない状態ですf^^;
背景をピンクにしようと思って、今のその色に変更したのですが、
ブログ背景の色とだいぶ違っていたので、
ブログと同じ色にしたくなってしまったのですf^^;

ファイルを削除してから、もう一度アップロードしてみようと思います。

■追記 11/18 20:55■
ふぅ~~。やっぱりダメでした(ToT)
アップロードし直してみたり、ファイルを削除してダウンロードからやり直してみたり、
挿入する<meta・・・を入れ直してみたり、class=""js_closeを付け直してみたり、と、
色々やってみたのですが。

頑固にもピンク背景&青文字が変わってくれません(;_;)

変わらない、ということは、そのファイルが
どこかに残っているということだと思うのですが、
どこに、なぜ残っているのか、私にはもうわかりません、トホホです。

ちなみに、foldファイルをテンプレートに挿入すると、
ブログの一番上にリンクとして入り込んでしまっているのですが、
これは仕方のないことなのでしょうか?
まきままさんへ
まきままさんのブログをソースから見てみてjsファイルも開いてみたのですが、
HTMLに、

<a href="http://blog-imgs-12.fc2.com/k/i/i/kiitigomura/fold_20071118202829.js" target="_blank">fold_20071118202829.js</a>
<meta http-equiv="content-script-type" content="text/javascript" />
<script src="http://blog111.fc2.com/k/kiitigomura/file/fold.js" type="text/javascript" charset="euc-jp"></script>

と記入されていますね。ご自分で書かれているように何故か赤字で書かれたリンクが入り込んでいます。これは仕方がないことではないので消してしまって下さい。

そして赤字の方のjsファイルが現在の色の設定になっているのですが、こちらが上に来ている為に先に読み込んでしまっていくら下の方のjsファイルの設定を変えてもかわらないのではないのかなぁ?と思いました。
ようやくできました!
なぜ今まで出来なかったというと、

お恥ずかしいことに、アップロードしたファイル一覧に、
過去にアップロードしたjsファイルが残っていたのです。

今までに、試行錯誤して、何度もアップロードしてみていたので、
全てを削除しきれていなかったのが原因でした。

それを削除したら、色の変更が反映されました。
その事にようやく気付きまして・・・f^^;
申し訳ありません。

もちろん、るんばばさんが教えてくださった、赤字の部分も消しました。
何度も返信をいただきまして、本当にありがとうございました!

それでは。
まきままさんへ
無事にできてよかったですね!!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/173-37ffde45   

Template Designed by DW99

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。