FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

サイドメニュー(プラグイン)の折りたたみ

サイドメニュー(プラグイン)を折りたたみ可能にするカスタマイズを紹介します。こちらはlightframe対象です。standardをお使いの方はこちらをご覧ください。
まずHTMLの<head>から</head>までの間の好きなところに次の記述を加えます。

<head>


<script type="text/javascript">
<!--
function oritatami(id_name)
{
p_menu = document.getElementById(id_name).style;
if (p_menu.display == 'none') p_menu.display = "block"; else p_menu.display = "none";
}
// -->
</script>



</head>


ここまではstandardと同じです。

次に<!--▼▼ プラグイン カテゴリー1 ▼▼-->
から<!--▲▲ プラグイン カテゴリー1 ▲▲-->
で囲まれている部分を次のように書き換えます。

<!--▼▼ プラグイン カテゴリー1 ▼▼-->
<!--plugin-->
<!--plugin_first-->
<%plugin_first_content>
<!--/plugin_first-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー1 ▲▲-->


次に<!--▼▼ プラグイン カテゴリー2 ▼▼-->
から<!--▲▲ プラグイン カテゴリー2 ▲▲-->
で囲まれている部分を次のように書き換えます。

<!--▼▼ プラグイン カテゴリー2 ▼▼-->
<!--plugin-->
<!--plugin_second-->
<%plugin_second_content>
<!--/plugin_second-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー2 ▲▲-->


テンプレートのHTMLの編集はここまでです。
ここからプラグインのHTMLを編集します。

まずプラグインカテゴリー1にある全てのプラグインを編集します。
既存のHTMLの上下に次のような記述を加えます。

<div class="plugin1_outline">
<div class="plugin1_title" style="text-align:<%plugin_first_talign>">
<a href="javascript:oritatami('p1')">
プラグインタイトル</a></div>
<div id="p1" style="DISPLAY: block">
<div class="plugin1_body">
<div style="margin: 10px 0; text-align:<%plugin_first_ialign>">
<%plugin_first_description></div>
<div style="margin: 10px 0; text-align:<%plugin_first_align>">



(既存のプラグインHTML)


</div>
<div style="margin: 10px 0 0 0; text-align:<%plugin_first_ialign>">
<%plugin_first_description2></div>
</div></div></div>


プラグインタイトルには「最近の記事」や「カテゴリ」等そのプラグインのタイトルに置き換えてください。

p1というところが2箇所あります。ここには他のプラグインを編集する度にp2,p3…など適当な重ならない名前を入れてください。

blockと記載されているところがあります。初期状態で折りたたまれていてほしいプラグインにはnoneと書き換えてください。

次にプラグインカテゴリー2にある全てのプラグインを編集します。
既存のHTMLの上下に次のような記述を加えます。

<div class="plugin1_outline">
<div class="plugin1_title" style="text-align:<%plugin_second_talign>">
<a href="javascript:oritatami('p10')">
プラグインタイトル</a></div>
<div id="p10" style="DISPLAY: block">
<div class="plugin1_body">
<div style="margin: 10px 0; text-align:<%plugin_second_ialign>">
<%plugin_second_description></div>
<div style="margin: 10px 0; text-align:<%plugin_second_align>">



(既存のプラグインHTML)


</div>
<div style="margin: 10px 0 0 0; text-align:<%plugin_second_ialign>">
<%plugin_second_description2></div>
</div></div></div>


プラグインカテゴリー1のときと同じようにタイトルや変数名を適当なものに変えてください。

プラグインのHTMLを既にカスタマイズしている方は、そのバックアップもとっておきましょう。

かなり大変なカスタマイズです。挑戦されるかたは頑張ってくださいね。
関連記事
[ 1072 ] 挑戦してみました。
こんばんは、いたおさん。

作りこみをしていく中でサイトのレイアウトが気になり始めたので、左側のコラムのみ開閉式に挑戦してみました。

( Θ_Θ)何でも挑戦

予想していたよりも簡単に変更する事ができました。
次はサイトマップに挑戦してみようかなーなんて思ってます。

いつも参考にさせていただきありがとうございます。
サイト改造したらまた遊びにきます。
[ 2007/01/26 01:28 ] [ 編集 ]
[ 1079 ] > ☆@トロ@☆さん
こんばんは、☆@トロ@☆さん。
なんと!このカスタマイズをやりましたか!
私の知る限りでもこのカスタマイズをやった方は2人しか知りませんでしたが☆@トロ@☆さんで3人目です。
プラグインHTMLを一つずつ編集しなければならず非常に手間のかかるお薦めできないカスタマイズでしたが予想よりも簡単にできちゃったとはお見事です^^;

あまりに面倒なので折りたたみたいプラグインだけを編集すれば済む「プラグイン毎で折りたたみを設定する」という記事も書くつもりです。
[ 2007/01/27 00:56 ] [ 編集 ]
[ 1984 ] 挑戦㊥・・・。
はじめまして。こんばんゎ☆
只今、[プラグイン折りたたみ]に激しく挑戦しました。
折りたたみは、なんとかクリアできたような気がしますが
プラグインを開くとブログで流れているMidiが止まってしまいます。
開いても鳴り続ける・・・というのは可能なのでしょうヵ?

可能なのであれば、アドバイスお願いしたいと思い
書き込みをさせて頂きました。
宜しくお願いします(*つ∀`*)
[ 2007/05/25 21:25 ] [ 編集 ]
[ 1989 ]
僕の環境ではプラグインを開いても
美しく聞こえていますよ。
ブラウザはIE7です。
[ 2007/05/26 00:08 ] [ 編集 ]
[ 1990 ]
ぅ・・・。
あなろぐさんには、止まることなく聞こえてるのですねぇ。私のブラウザはIE6です。
だからなのヵナ(汗)

ありがとうございました。
[ 2007/05/26 00:33 ] [ 編集 ]
[ 2007 ] > にょこさん、あなろぐさん
IE6,FireFoxともに止まることなく正常に音楽が流れるようですが、、、もしかするとにょこさんの回線が遅いのが原因かもしれません。ブログを開いてしばらくしてからプラグインの開閉をしてみてください。
[ 2007/05/27 17:00 ] [ 編集 ]
[ 2009 ] こんばんは。
先日、こちらに書き込み後、いろいろやってみたのですが
Midiが止まってしまうのが悔しくて悔しくて・・・(汗)
なので、現在は【open付きのプラグインの折りたたみ】をDLして使わせて頂てます。
こちらの折りたたみならMidiも止まることなく順調なようです♪
ありがとうございました☆

お騒がせしました((( ○┓ペコッ
[ 2007/05/27 19:02 ] [ 編集 ]
[ 2010 ] > にょこさん
なるほど、以前はこの記事の折りたたみを施して音楽がならなかったわけですか。正直この記事のカスタマイズは古くて大変でお勧めできません。そこでもっと簡単にできるように共有プラグインを作ったのですが、そちらは正常に音楽が聴けるということで一安心です。
この古い記事もなんとかしなければなりませんね。
[ 2007/05/27 20:18 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ユーザータグ


△ ページトップへ戻る