showry's Blog: FC2ブログでサイドメニュー折りたたみスクリプト(その2)

FC2ブログでサイドメニュー折りたたみスクリプト(その2)

昨日のエントリーでFC2ブログへの小粋空間様サイドメニュー折りたたみスクリプトの導入方法を紹介しました。その続きです。

FC2ブログにはプラグインと呼ばれるものがあります。これは公式と共有の2種類があり、どちらも簡単にサイドバーに機能を追加する事ができます。また、プラグインのサイドバー上の配置を自由に行うためにグループ分けされており、カテゴリー１～３まであります。FC2ブログの管理画面で「プラグインの設定」を見るとわかります。

公開されている小粋空間テンプレートでもカテゴリー１と２が使えるようになっています。
カテゴリー３も自分でテンプレートに下記の記述を追加すれば使えるようになります。

<div class="sidetitle">
<%plugin_third_title>
</div>

<div class="side">
<%plugin_third_content>
</div>

このプラグインに折りたたみスクリプトを適用しようとして下記のように変更したとします。

<div class="sidetitle2" id="plugin1name">
<%plugin_first_title>
</div>

<div class="side" id="plugin1list">
<%plugin_first_content>
</div>

<script type="text/javascript">

</script>

この場合、プラグインカテゴリー１に一つだけプラグインを入れている場合は問題になりませんが、２つ以上のプラグインを入れてしまうと折りたたみスクリプトがうまく動作してくれません。これは、２つのプラグインに同じid (plugin1)を割り当てられてしまうためです。idは必ずユニークにしないといけません。一つのプラグインカテゴリーに一つのプラグインだけにすれば３つまではプラグインを導入できる事になります。
しかし、これだと折角たくさんの有用なプラグインがあるのに使えなくて不便ですね。こういうときのためにFC2ブログではプラグイン毎にユニークなタグを出力するテンプレートが存在します。
（実は今日わかったことなんですけどね。）
下記のように書けばidの名称がプラグイン毎に異なるため、スクリプトが正常に動作するようになります。

<div class="sidetitle2" id="<%plugin_first_tag>name">
<%plugin_first_title>
</div>

<div class="side" id="<%plugin_first_tag>list">
<%plugin_first_content>
</div>

<script type="text/javascript">

</script>

カテゴリー２と３も "first" をそれぞれ "second" , "third" に置き換えればよいです。
ただし、ユニークなタグ名を出力するといっても名称の重複はチェックしないので自分自身でつけたidと重複しないようにご注意下さい。
※下記の「続きを読む」のリンクは JavaScript が有効な場合に機能します。

続きを読む » "FC2ブログでサイドメニュー折りたたみスクリプト(その2)"

このプラグインに折りたたみスクリプトを適用しようとして下記のように変更したとします。

<div class="sidetitle2" id="plugin1name">
<%plugin_first_title>
</div>

<div class="side" id="plugin1list">
<%plugin_first_content>
</div>

<script type="text/javascript">

</script>

この場合、プラグインカテゴリー１に一つだけプラグインを入れている場合は問題になりませんが、２つ以上のプラグインを入れてしまうと折りたたみスクリプトがうまく動作してくれません。これは、２つのプラグインに同じid (plugin1)を割り当てられてしまうためです。idは必ずユニークにしないといけません。

一つのプラグインカテゴリーに一つのプラグインだけにすれば３つまではプラグインを導入できる事になります。
しかし、これだと折角たくさんの有用なプラグインがあるのに使えなくて不便ですね。

こういうときのためにFC2ブログではプラグイン毎にユニークなタグを出力するテンプレートが存在します。
（実は今日わかったことなんですけどね。）
下記のように書けばidの名称がプラグイン毎に異なるため、スクリプトが正常に動作するようになります。

<div class="sidetitle2" id="<%plugin_first_tag>name">
<%plugin_first_title>
</div>

<div class="side" id="<%plugin_first_tag>list">
<%plugin_first_content>
</div>

<script type="text/javascript">

</script>

カテゴリー２と３も "first" をそれぞれ "second" , "third" に置き換えればよいです。
ただし、ユニークなタグ名を出力するといっても名称の重複はチェックしないので自分自身でつけたidと重複しないようにご注意下さい。

« 続きを隠す "FC2ブログでサイドメニュー折りたたみスクリプト(その2)"

Posted by showry at 2006年06月15日 01:00 |

昨日はありがとうございました。
その時、今回の件で戸惑いました。
実は途中からプラグインという機能を知って(笑)途中からプラグイン設定をしていたので、折りたたみの際これが上手くいかず結局全てのサイドバータイトルをプラグインから外してしまいました。
おぉ～!!こんな方法があったのね・・・もう外しちゃったから今度ブログパーツを増やしたらやってみようかな・・・

Posted by: ととろ | 2006年06月15日 21:05

>> ととろさん
こんばんは。
なんとかお役に立てたようでよかったです。
共有プラグインの場合は、その種類によってテンプレートのレイアウトを崩してしまうものもあるようですね。昨日まで入れていたクロネコのプラグインはIEで見るとレイアウトが崩れてしまったため、外してしまいました。
プラグインはその種類によって要注意みたいです。

Posted by: showry | 2006年06月17日 01:17

＞プラグインはその種類によって要注意みたいです。

でも、プラグインってなんだかかっこいいヒビキで、いかにもWebやってるぞーって気分になりそうで(笑)

種類があるのね。じゃあ、やってみないとわからないんですね。入れたり外したりしてみるんですね＞なんかめんどくさがりの私には・・・(^^;

Posted by: ととろ | 2006年06月19日 21:36

>> ととろさん
＞やってみないとわからないんですね。
共有プラグインは数があるので公式プラグインくらいはちゃんとできるかどうか試してみようと思ってます。

Posted by: showry | 2006年06月20日 19:32

この上の記述と違う場合はどうすればいいでしょうか？
字数制限？のためこっちに書きました。
こちら

Posted by: kiruhamzd | 2007年12月25日 16:03

kiruhamzdさん、コメントありがとうございます。試行錯誤されて記述方法については自己解決されたようですね。
現時点(12/27 AM)で見たところ、「折りたたみスピード」を'slow'に設定されているようですが、'slow'を有効にするには、たぶんAjaxライブラリも導入する必要があると思います。導入方法などは小粋空間さまの元記事をご参照頂けたらと思います。よろしくお願いします。

Posted by: showry | 2007年12月27日 09:17

ありがとうございます。
そうか。effects.jsがないからか。
lightboxにeffects.jsあったから、いままで、スローができていたのかもしれません。
lightboxの誤作動のため、ムカついて全部消しちゃったら折りたたみまでできなくなったので困ってました。

やってみます！