スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

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

個別コンテンツの折りたたみ方 
2005 09 21
Wed 19:16:54

カスタマイズ  Comment 6  Trackback 0  edit.

ちょっと質問があったので他の方にも役立つかなと思い記事にします。

自分のテンプレートで使われているメニューの折りたたみスクリプトを使って個別のパーツを折りたたむカスタマイズの設定法です。
基本的にスクリプトはそのまま使います。
詳しくは・・・
まず、始めにVer.1スクリプトでの変更例です。
基本的な構造から見てみましょう。
<div id="menu1" class='0' onclick="menushow(1);">
<a href="javascript:void(0)" title="パーツタイトル">パーツタイトル</a></div>
<div id="sub1">

ここにパーツ本体が入ります。

</div>

上のタグ構造を見ると、パーツタイトルを囲んで<div></div>が使われている事が分かります。
そのタイトルをクリックする事で、パーツ本体が開閉されます。
パーツ本体も<div id="sub1">で囲まれていますが、ここで注目してみるとタイトルに使われている ID="menu1" と ID="sub1" onclick="menushow(1);" がそれぞれ同じ番号なのは分かりますよね?

つまりパーツ本体がどこに有っても番号が同じID="sub番号"をスクリプトが探して開閉するわけです。

勿論、パーツ本体もブログページを読み込む時に実行されています。
スタイルシートの設定でその内容が見えない状態になっているだけだと言う事です。
その設定をスクリプトがスタイル属性を変更して見えるようにしているので開閉しているように見えるわけです。

ここまではご理解頂けたかな?

ここで重要なのは、ID=に付けられる番号が『重複してはいけない』という事です。
すでにこのバージョンでは、1?6番までタブメニューのIDとして使われています。
使えるのは、7番以降という事になります。

それと「始めは開いておいてクリックした時点で閉じる」という場合ですが、このバージョンでは、「始めは閉じて居る」という事で作られてますので一度目のクリックでは反応が無く2度目のクリックで閉じます。

次はそのスタイルシートの設定です。
ここではスタイルシートの編集をせず、直接HTMLに書き込みましょう。

下のスタイル設定をパーツタイトルの<div>タグに追加します。
style="border-bottom:1px solid #AAA;text-align:center;width:180px;"
<div id="menu7" class='0' onclick="menushow(7);"
style="border-bottom:1px solid #AAA;text-align:center;width:180px;">
<a href="javascript:void(0)" title="パーツタイトル">パーツタイトル</a></div>

次にパーツ本体を始めは表示しないために下のスタイル設定を追加します。
style="display:none;"
<div id="sub7" style="display:none;">
ここにパーツ本体が入ります。
</div>

と言うような形になります。

タグの詳しい説明は省きますが、パーツタイトルの設定は『下線をグレーで付ける、テキストはセンター、タイトルの幅は180px』と設定しています。
"display:none;"は、『表示しない』と言う設定です。

これがスクリプトVer.1での開閉メニューの使用例です。

次回は、Ver.2スクリプトでの設定例です。

ジャンル [ ブログ テーマ [ カスタマイズ ]

Re comments.

「ありがとうございます!」
参考にやってみたところ、できました!
いつもとても早い対応をして頂いて、感謝感謝!です。
でも体に気をつけてくださいね^^
2005/09/22(木) 12:51:30 [URL] 紫苑さん [編集]
「いえいえ(^^;」
出来ましたか。(^ー^)
今回は自分の作ったテンプレートの特徴がこのスクリプトだったので
たまたま記事にしたという事何で気にしないで下さいね。
それに自分は他に書く事が無かったので(爆)
2005/09/22(木) 15:13:33 [URL] 有希之武さん [編集]
「はじめまして」
このテンプレートがすごく気に入っていて
いろいろいじっているのですが、何分初心者なので微妙なのです。
Archivesが長くなってきたので、ここだけ折りたたみにしたくて参考にしてやってみたところ開かないのです。
貼り付け場所が違うのでしょうか。
お時間のあるときにご回答いただければ幸いです。
よろしくお願いします。
テンプレート planet-3col
2005/12/10(土) 12:01:00 [URL] のんさん [編集]
「のんさんへ」
どうもはじめまして。
え~と、これは以前のバージョンですね(^^;
最新のバージョンは折りたたみを導入していますが、カスタマイズしているので入れ替えない方が良いかな?

まず修正ですが、スクリプト本体が入ってないですね。
それと折りたたみの方式が違うものの方がこのテンプレートには良いと思います。

<dl>
<dt><a href="javascript:void(0)" onclick="dd('archive')">archive</a></dt>
<dd style="display:none" id="archive">
<ul>
<!--archive-->
<li><a href="<%archive_link>" title="<%archive_year>年<%archive_month>月の記事一覧"><%archive_year>年<%archive_month>月(<%archive_count>)</a></li>
<!--/archive-->
</ul>
</dd>
</dl>

上の様にarchiveの部分を張り替えて下さい。

更にスクリプトですが、
<script type="text/javascript">
<!--
function dd(id){
if(document.all)OBJ = document.all(id).style; else if(document.getElementById)OBJ = document.getElementById(id).style; if(OBJ) OBJ.display=='none'?OBJ.display='':OBJ.display='none';
}
//-->
</script>

上のスクリプトを<head>内に貼り付けて下さい。
これで開閉が出来ると思います。
他の部分も同じようにすると開閉が出来るバージョンですので参考まで。
2005/12/10(土) 12:26:30 [URL] 有希之武さん [編集]
「ありがとうございました♪」
すばやいお返事ありがとうございました(*^.^*)
早速張り替えたらうまくいきました。
最新のバージョンというのは、「今日のテンプレバージョンアップ」からいただいちゃっていいのでしょうか?
しばらく今のを使わせてもらって、今度最新のバージョンにもチャレンジしたいと思います。
丁寧に教えていただいて、本当にありがとうございました。
2005/12/10(土) 15:48:59 [URL] のんさん [編集]
「あっ!最新のバージョン」
ちょっとコメントがあるのに気が付かなくてごめんです。(^^;
えーと、記事に貼ってあるファイルは、共有していたファイルと同じものなのでどれでも良いですよ。
新しい記事ほどスクリプトは新しいと思いますが、インデックスシリーズとメニュー開閉はスクリプトが違うので気をつけて下さい。
ちなみに改造その他何でもオーケーです(笑)
2005/12/11(日) 18:54:30 [URL] 有希之武さん [編集]
Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

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