忍者ブログ

Customize in Ninja Blog

NINJAブログを使いこなそうと始めたブログ。

2024.11│ 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

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

プラグインの開閉②-Ⅱ ひとつだけ開くの閉じるボタン

プラグインの開閉②の「ひとつだけ開く」の時、本文をクリックしても閉じないときにつける「閉じるボタン」をつける方法。
プラグインの中身が長いと、ひとつ開いているだけでもずいぶんと下に長くなってしまうので、「閉じるボタン」をつけておくと便利です。

サンプル▼

1個目のプラグインタイトル
2個目のプラグインタイトル

仕組みは幾通りか考えられますが、今回は「空のBox」を追加するという方法でやってみます。

「空のBox」を追加する方法。

これは、空のBoxをあらかじめ作っておいて、空のBoxを開ける=閉じるという風にする設定です。

スクリプトの設定


プラグインの開閉②で使ったスクリプトに1行追加します。

<script type="text/javascript" language="JavaScript">
<!--
function oneOpenPlugin(id){
    if(document.getElementById){
        if(document.getElementById(id).style.display == "block"){
            document.getElementById(id).style.display = "none";
        }
        else{
        <!--plugin1-->
        document.getElementById("open<!--$plugin_key-->").style.display = "none";
        <!--/plugin1-->
        document.getElementById("closeBox").style.display = "none";
        document.getElementById(id).style.display = "block";
        }
    }
}
//-->
</script>
青い部分が追加した部分です。スクリプトの編集はこれで終わりです。

HTMLの設定

今度はテンプレートのプラグインの部分に空のBoxを設置します。
<!--plugin1-->
<div class="****">
<div class="**** <!--$plugin_title_align-->">
<a href="JavaScript:oneOpenPlugin('open<!--$plugin_key-->')"><!--$plugin_title--></a>
</div>
<div id="open<!--$plugin_key-->" style="display:none;" >
<div class="**** <!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<div class="**** <!--$plugin_contents_align-->">
<!--$plugin_data-->
</div>
<div class="**** <!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<a href="JavaScript:oneOpenPlugin('closeBox')">×</a>
</div>
</div>
<!--/plugin1-->
<div style="display: none;" id="closeBox"></div>
水色の部分が追加するソースです。
水色は「空のBox」です。
もし、プラグインカテゴリー1以外のほかの番号でも閉じるの機能をつけたい場合でも、「空のBox」の追加はひとつだけでOK・・・なです。
△のソースでは「×」という文字を閉じる鍵にしてますが、サンプルのように画像を使うことも可能です。
画像を使う場合は、
<a href="JavaScript:oneOpenPlugin('closeBox')"><img src="画像のURL"></a>
のようにします。ちなみにサンプルで使ってる画像はbatu.gifです。

▼忍者通常テンプレートのプラグインカテゴリー1でのソース
<!--plugin1-->
<div class="PluginInnerBlock">
    <div class="PluginTitle <!--$plugin_title_align-->">
         <a href="JavaScript:oneOpenPlugin('open<!--$plugin_key-->')"><!--$plugin_title--></a>
    </div>

    <div id="open<!--$plugin_key-->" style="display:none;">
        <div class="PluginExplanation <!--$plugin_explanation_align-->">
            <!--$plugin_header_explanation-->
        </div>
        <div class="PluginContents <!--$plugin_contents_align-->">
            <!--$plugin_data-->
        </div>
        <div class="PluginExplanation <!--$plugin_explanation_align-->">
            <!--$plugin_footer_explanation-->
        </div>
<a href="JavaScript:oneOpenPlugin('closeBox')">×</a>
    </div>
</div>
<!--/plugin1-->
<div style="display: none;" id="closeBox"></div>
PR
*COMMENT-コメント-
*COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
 
Name:
Title:
Mail:
Url:
Color:
Decoration: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message:
Pass: ※編集時に必要です。
Secret:  ※チェックすると管理者へのみの表示となります。
*TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
■Search
■About

●このブログについて
忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。 変なところあったらぜひ言ってくださいませ(*- -)(*_ _)ペコリ
なお、このブログで実験もしています。 常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。⇒BBS

●姉妹サイト・その他
 徒然倶楽部 →こちらは記事の内容を下に移転&閉鎖しました。
 現在は十六夜's Blogがメインブログになってます。
 Alphaの小部屋・・・BOOKLOGで作った本棚
 Mixi・・・参加中のSNS
 十六夜-the sixteeth night-・・・現在作成中のメインHP

●リンクについて
このブログはリンクフリーです。こんなブログでよろしければぜひリンクしてやってください♪
リンクバナー

●RSS
このブログのRSSはこちら▼
RSS 0.91
RSS 1.0
RSS 2.0

●環境推奨
動作状況:Windows XP SP2
ブラウザ:主にFirefox 他IE、Opera等
解像度:1024*768

●FireFox
私が普段利用しているブラウザ。 拡張機能のWeb Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪
ダウンロードは▼からどうぞ

●Pingoo!
忍者ブログのPing送信先は10件まで。 それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。ここ1件に送るだけでいろいろなところに送ってもらえます♪

●クリックで救える命がある

■Calendar
10

12
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
■CM&TB
●コメント

●トラックバック
    Scrollbar ONorOFF
    ■Thanks
    テンプレートを作成するに当たってよく利用させていただいているサイト様です。
    ■QRcode
    QRコードをクリックするとメールフォームが開きます。
    メールフォームでPCから携帯にこのブログのURLを送ることができます

    もし、携帯電話で表示されきれない~とご不満の方はこちらのアプリを導入してみることをお勧めします。

    無料体験できるのでぜひお試しください♪
    ■Template
    ○公開したテンプレのプレビュー

    ブルーチャイナ
    詳細
    ブルーチャイナ
    詳細
    Gray2block
    詳細
    China
    詳細
    Gray
    詳細
    JapanBlue
    詳細
    碧
    詳細
    蒼
    詳細
    ○公開された携帯用テンプレのプレビュー

    The Leaf
    詳細
    ○忍者ブログで共有化中のテンプレ

    Alternation-緑×白-
    記事番号で背景色が交互に変わるちょっとおもしろテンプレ。
    パンくずナビも付いてます♪

    The Leaf
    初の携帯用テンプレート。さわやかな感じに仕上げてみました
    絵文字使用。トップページにカテゴリー表示アリ。

    ブルーチャイナ
    涼しげなチャイナ風左右メニューテンプレ。
    China」の色違いのような感じですが、配置は違いますのでご注意ください。
    ※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。
    ピンクチャイナ

    Gray2block
    ノート風テンプレ「Gray」の2カラム版です。
    China
    かわいい系の3カラムテンプレート。イメージはチャイナ風♪
    同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。
    China-BlueVer-

    Gray
    灰色のノート風罫線テンプレ。追記開閉式の3カラムです。

    JapnBlue
    サッカー日本代表ユニフォームなテンプレ。追記開閉式
    ※このテンプレには2カラムバージョンもあります。
    JapanBlueの2カラム版

    碧-midori-
    淡いパステルグリーンのテンプレ。追記開閉式


    画像使用なしの5ブロックテンプレ。

    Scrollbar ONorOFF

    ○広告




    ■Recommend
    ルナエンバシージャパン

    ストレイシープがなんだかかわいくて好き(^-^*)

    ■Visiter