忍者ブログ

Customize in Ninja Blog

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

2017.05│ 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 31

[PR]

×

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

プラグインの開閉② ひとつだけ開く

プラグインの開閉①の応用編です。
今回はプラグインをひとつだけ開くという風にします。
どういうことかというと、ひとつのプラグインを開いたら、他のプラグインは閉じてしまい、開いているプラグインは常にひとつだけという状態にするのということです。
せっかくプラグインを折りたたんだのだからなるべくコンパクトに見せておきたいときはこれがお勧めです。

▼サンプル

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

設定方法は以下になります。
注:説明は忍者ブログのプラグインカテゴリー1でのものとなります。あらかじめご了承ください。
注:9/10追記 本文をクリックしても閉じるバージョンをサンプルとしています。

スクリプト


プラグインの開閉①で使ったスクリプトを元にひとつだけ開くように作り変えたスクリプトです。
これはプラグインカテゴリー1用のものです。別のプラグインカテゴリーで使用するときは水色の部分をそのカテゴリー番号に直してください。
これを<body>の直後あたりに入れてください。(でもどこに入れても大体は作動します。)
<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(id).style.display = "block";
        }
    }
}
//-->
</script>

HTMLの編集

HTMLの編集はプラグインの開閉①で行ったこととほぼ同じです。ただし、前回は<!--$plugin_no-->を使用していましたが今回は<!--$plugin_key-->を使用します。

プラグインの開閉①と同様にテンプレートの中から<!--plugin1-->~<!--/plugin1-->で囲まれた部分を探します。
テンプレートごとに位置は異なるとは思いますがプラグインに対応している限りどこかにあります。
さらに<!--plugin1-->~<!--/plugin1-->で囲まれた部分の中から<!--$plugin_title-->という独自タグを探します。
それをこのように書き換えてください。
<a href="JavaScript:oneOpenPlugin('open<!--$plugin_key-->')"><!--$plugin_title--></a>
ここが開閉スイッチになります。

<!--$plugin_title-->が見つかったらその下に<!--$plugin_header_explanation--><!--$plugin_data--><!--$plugin_footer_explanation-->という独自タグがそれぞれ<div>タグか何かで囲まれているはずです。
そうしたらそのすべてを囲うようにさらに<div>~</div>で囲います。 その際にidとstyleを指定します。
指定してみると▼のようになります。
ちなみにclass指定に****が入っているのはテンプレごとに指定は違うからです。すべてに同じ指定が入るという意味ではありません。
<div id="open<!--$plugin_key-->" style="display:none;" onclick="oneOpenPlugin('open<!--$plugin_key-->')">
<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>
</div>
ピンク色の部分が新しく囲った部分です。
前回はstyle="display:none;"を削ると初期状態で開くことになりますと書きましたが、今回はここは削らないでください。

9/10追記、本文をクリックしたとき閉じないですむようにするには、紫色の部分を削除してください。

これらすべてをまとめるとこのようになります。
<!--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;" onclick="oneOpenPlugin('open<!--$plugin_key-->')">
<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>
</div>
</div>
<!--/plugin1-->
今回は「閉じる」のボタンはありません。
「閉じる」の設置方法はまた次の記事でUPします。
このプラグインの開閉を利用したテンプレをそのうち公開したいなぁと思ってます。



▼忍者通常テンプレートのプラグインカテゴリー1のHTMLソース
<!--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-->" onclick="oneOpenPlugin('open<!--$plugin_key-->')">
        <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>
    </div>
</div>
<!--/plugin1-->
PR
*COMMENT-コメント-
▽はじめまして!
あるふぁ様はじめまして、福井めいと申します。
この度折りたたみスクリプトを使用したテンプレートを作りたいと思い、こちらのjavascriptをお借りしました。

実は前から作ってみたいと思いながらも自分の知識だけでは困難で作れなかったテンプレートがあり、このjavascriptをお借りすることで実現に近づきました。
丁寧なご説明で本当に助かりました。
有難う御座います!

それから、もしかしたら後日共有申請をするかもしれないのですが、その際著作権などはどのように表記するのが宜しいでしょうか?
一応現在はブログ右下の方に表記させていただいているのですが……念のためご確認いただけると助かります。

では、失礼します。

追伸:
このブログのプレヴューの機能もステキですね!
いつも投稿時変なところで改行されてないかどきどきしながらボタンを押すので助かります(^^)
△Re:はじめまして!
福井めいさん、はじめまして(^-^*)

このスクリプトを使って共有化ってことですよね?
正直、これは著作権を主張できるようなものじゃないので、特になくて結構ですよ~(^^;)
もし、不具合おきたときに困ったことになるかも?ってことでしたら、HTMLソースの中にコメント化してURLでも入れていただければよ
いのではないかと。

テンプレ作成がんばってくださいね~。
共有化楽しみにしてます♪

追伸;
コメントプレビュー機能は小粋空間様のスクリプトです♪
少々設置法等アレンジしてますが。
▽(*´▽`*)うれしぃ!!!
初心者なのですが、悩むことなく開閉できるようになりました♪すっきりして大満足です
あるふぁさんみたいなサイトに憧れてます分かりやすくて丁寧で♪(*´v`*)
ありがとうございますまた寄らせていただきます!
△Re:(*´▽`*)うれしぃ!!!
miss Pさん、こんばんわ

お役に立てて何よりです♪

>あるふぁさんみたいなサイトに憧れてます

カスタマイズのところの外はかなり適当なことかいてるのであんまり参考にしないほうが・・・(^-^;)
カテゴリにいつまでも未定とかで置いてあるし。
無理に何か書こうとか決め付けないでやっていけば何とかなるものですよ~
*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
04

06
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 31
■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