文字を大きくする 文字を規定のサイズに戻す 文字を小さくする

hatena chips

MS Access Tips/Sample and Blog customize and Momoiro Clover Z etc...

«Newer CSSで、ボタン風サイドバーメニュータイトル | 機種依存文字チェック関数 Older»

サイドメニュー折りたたみスクリプトを導入

Category: ブログ-カスタマイズ-FC2

小粋空間さんのところで配布されている折りたたみスクリプトでサイドメニューを折りたたみできるようにしてみました。

導入方法は、
サイドメニューの折りたたみ for FC2 ブログ に詳細に説明してありますが、私のテンプレートでの導入例と、複数のプラグインへの対応、スタイルシートのカスタマイズについて説明します。

menufolder.gif

サイドメニューの折りたたみ for FC2 ブログ から menufolder.js をダウンロードします。これを、FC2の管理画面の「ファイルアップロード」よりアップロードします。アップロードしたファイルの「表示」をショートカットをコピーします。（前記ページの １．２．を参照）

テンプレートの HTML の<haad> 〜 </head>の間に、下記のタグを挿入します。

********************** の部分は上でコピーしたURLを貼り付けます。

<!--plugin_first--> 〜 <!--/plugin_first--> のタグ内を変更しますが、私のテンプレートの場合、オリジナルは下記のようになってました。

それを下記のように修正します。

要は、プラグインのタイトルブロックのタグに id="plugin1name" を追加、コンテンツ部分を囲むブロックに、id="plugin1list" を追加します。私のテンプレートの場合は、囲むブロックが無かったので、<div> 〜 </div>で囲んで追加しました。さらに、最後にscript要素を追加します。これで、フラグインカテゴリ1 の最初のメニューのタイトルをクリックしてみてください。折りたたみできるようになります。最初にページを表示したときに閉じた状態にしておきたい場合は、'on' を 'off' にしておきます。

ここまでは、サイドメニューの折りたたみ for FC2 ブログの説明通りの設定なのですが、このままでは最初のメニューのみしか折りたためません。id の名前が重複していると最初に見つかったブロックのみスクリプトが有効なためです。id にユニークな名前を付ければ解決できるはずですので、テンプレート用変数を調べてみると、
<%plugin_first_no> プラグイン固有の通番を表示
というのが使えそうです。

プラグインカテゴリ2、3に関しても、plugin_first の部分を、plugin_second、plugin_third に変更するだけでOKです。

<%plugin_first_no> の代わりに、
<%plugin_first_tag> プラグインの識別タグを表示（カテゴリでは"category"、フリーエリアでは"freearea" などが出力される)
を使う方法もあります。実は、最初、こちらの方を使っていたのですが、フリーエリアを複数使うと最初のフリーエリア以外は適用されなくなりますので、<%plugin_first_no> に変更しました。ただ、<%plugin_first_no> は数値になりますので、数値で始まるクラス名はプラウザによって問題があるかも知れません。

ここまで成功したら、ユーザーにサイドメニューのタイトル部分をクリックしたら何かが起こると言うことを気づかせるために、スタイルシートを変更するといいでしょう。この辺は、いろいろ人により好みがあると思いますが、次回の記事で、ここでのスタイルシートのカスタマイズを説明する予定ですので、ご期待ください。

拍手する このエントリーをはてなブックマークに追加

関連してそうな記事


テーマ:ブログカスタマイズ | ジャンル:ブログ | タグ: ブログ FC2 カスタマイズ JavaScript 折りたたみ

  1. EDIT
  2. 2009/04/19(日) 22:40:21
    3. | トラックバック:0
  3. | コメント:0
  4. | ▲PageTop▲
«Newer CSSで、ボタン風サイドバーメニュータイトル | 機種依存文字チェック関数 Older»

コメント

コメントの投稿


トラックバック

トラックバック URL
この記事にトラックバックする(FC2ブログユーザー)