忍者ブログ

Customize in Ninja Blog

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

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

説明は以下になります。
注:説明は忍者ブログでのものです。その他のブログで利用される場合は独自タグが異なりますのでご注意ください。

スクリプト


まずはJavascriptの設定。
テンプレートの編集でHTMLの<body>の直後に以下のスクリプトを設置してください。
<script type="text/javascript" language="JavaScript">
<!--
function openPlugin(id){
if(document.getElementById){
if(document.getElementById(id).style.display == "none")
document.getElementById(id).style.display = "block";
else
document.getElementById(id).style.display = "none";}}
//-->
</script>

HTMLの編集


それからテンプレートのプラグインを表示する部分を編集します。
説明ではプラグインカテゴリー1を開閉することにしますがここから先はちょっとややこしいかもしれないです。
忍者の新規テンプレートもしくはそれに対応しているテンプレート、およびわたしが作成したテンプレートに関しては完成したもののソースを一番下においておきますのでコピペでお持ち帰りください。
なお、そのほかの方はスタイルシートの指定が異なるので以下の説明文に従って変更してみてください。

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

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

「閉じる」ボタンを設置するには、ピンクで囲まれた中に
<a href="JavaScript:openPlugin('open<!--$plugin_no-->')" title="閉じる">閉じる</a>
を入れてください。

これらすべてをまとめてみるとこのようになっています。
<!--plugin1-->
<div class="****">
<div class="**** <!--$plugin_title_align-->">
<a href="JavaScript:openPlugin('open<!--$plugin_no-->')"><!--$plugin_title--></a>
</div>
<div id="open<!--$plugin_no-->" 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:openPlugin('open<!--$plugin_no-->')" title="閉じる">閉じる</a>
</div>
</div>
<!--/plugin1-->

つたない説明ですがこれで開閉にするのは完了です。
おそらくこれが一番簡単なものかと思います(^^;)
次はこれの応用編をUPします。

▼忍者ブログの通常テンプレート用プラグインカテゴリー1のHTMLソース
<!--plugin1-->
<div class="PluginInnerBlock">
<div class="PluginTitle <!--$plugin_title_align-->">
<a href="JavaScript:openPlugin('open<!--$plugin_no-->')"><!--$plugin_title--></a> </div>
<div id="open<!--$plugin_no-->" 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:openPlugin('open<!--$plugin_no-->')" title="閉じる">閉じる</a>
</div>
</div>
<!--/plugin1-->

▼配布テンプレ用プラグイン1のHTMLソース
注:私の作ったテンプレートといえど、すべてがこのような指定をしているわけではありません。カスタマイズする際はあらかじめ元のテンプレートを保存しておくことをお勧めします。
<!--plugin1-->
<div class="plugin">
<div class="plugin_title"
style="text-align:<!--$plugin_title_align-->;"> <a
href="JavaScript:openPlugin('open<!--$plugin_no-->')"><!--$plugin_title--></a> </div><!--△plugin_title-->
<div id="open<!--$plugin_no-->" style="display:none;">
<div class="plugin_description" style="text-align:<!--$plugin_explanation_align-->;">
<!--$plugin_header_explanation-->
</div><!--△plugin_description-->
<div class="plugin_text" style="text-align:<!--$plugin_contents_align-->;">
<!--$plugin_data-->
</div><!--△plugin_text-->
<div class="plugin_description" style="text-align:<!--$plugin_explanation_align-->;">
<!--$plugin_footer_explanation-->
</div><!--△plugin_description-->
<a href="JavaScript:openPlugin('open<!--$plugin_no-->')" title="閉じる">閉じる</a>
</div><!--△open-->
</div><!--△plugin-->
<!--/plugin1-->
PR
*COMMENT-コメント-
▽無題
こんばんは、先日コメントさせて頂いたスパイダーですが、やっとこさっとこ移転が完了したので、ちょっくら報告に参りました(笑

まだまだ精進が足りない部分が多々ありますが、メニューの開閉を取り入れることによってだいぶすっきりしたと思います。

本当に助かりました!
△Re:無題
かっこいいテンプレですね~。
くもの巣の張り具合が私的に好みです♪

▽初めまして
こんばんは。
11月6日から忍者ブログに移転しようと考えている者です(今はエキサイトブログです)。

現在スキンを製作中なのですが、リンクなどの関係でメニュー内の文字数がどうしても多くなってしまい、縦に長くなりすぎて困っていたところだったのですが、、この「閉じる方法」はとても分かり易く、またとても助かりました。

またお世話になるかもしれません。よろしくお願いします
△Re:初めまして
スパイダーさん、こんばんわ。

ブログの移転は大変ですよね。お疲れ様です。

私の記事が何かの参考になれば、とてもうれしいです。
更新滞り気味ですが、これからもどうぞよろしくです(*- -)(*_ _)ペコリ
▽初心者でも出来ました。
初めまして。
htmlにつてはまったくの初心者ですが
わかりやすく書いてあったのですぐ出来ました。
有難うございます!感謝感激です!
△Re:初心者でも出来ました。
ろみろみさん、はじめまして。

HTMLとかコンピュータ言語って見慣れないとほぼ暗号ですよね(^^;)
なるべくわかりやすく書くように努力してます。

おかげで、皆さんに使ってもらえてるようでうれしいです。

これからもどうぞよろしくです♪
▽初めまして
今日からこちらのブログで書いていく事にしましたので、
早速カスタマイズに挑戦しようと思い、
こちらの記事の他にもプルタウンメニューを参考にさせて
頂き、設置させていただきました。

カスタマイズ初心者の私でも何とか設置出来ました。
どうもありがとうございました。
△Re:初めまして
Haruhiさん、はじめまして(^-^*)

カスタマイズ、うまくいってよかったです♪
また、遊びに来てください(^o^)
▽こんにちわ♪(゚▽゚*)
記事内のソースをそのままお借りして設置を済ませてしまいました(゚▽゚;)
メールフォームをおいてみたので、プラグインが異様に長くなってしまって・・・。

いや、実にカンタンでスバラシイです!!(笑)

恒例になってきてしまいましたが、またまたTBさせていただきました(・∀・;)
今、開閉の印になんか画像置いてみようかなぁ~と目論んでマス( ̄m ̄*)
△Re:こんにちわ♪(゚▽゚*)
先日はどうもお世話になりました(・∀・)

>記事内のソースをそのままお借りして設置を済ませてしまいました(゚▽゚;)
>メールフォームをおいてみたので、プラグインが異様に長くなってしまって・・・。
すでにメールフォームの存在を忘れてますね、私。
まぁBBS用の記事に非公開コメントで間に合うかな~と

>今、開閉の印になんか画像置いてみようかなぁ~と目論んでマス( ̄m ̄*)
あ、そうですね。なにもタイトルそのものをスイッチにしなくてもいいですし。
ふむふむ。

開閉法②の閉めるボタンの記事、いい加減UPしなくちゃなぁ・・・(- -;)
▽おおぉぉぉ w(*・o・*)w
何度か試してみたモノの、一度もウマク動作させるコトができなくて諦めかけてました(・∀・;)
ぜひとも使わせて下さい!!
・・・て、いっつもコレな気がしないでもありませんが(爆)
△Re:おおぉぉぉ w(*・o・*)w
みなさん、結構いろんな方法で試されてるんですよね。
でも、いろいろ見た感じこれが一番簡単。
なぜならjavascript初心者の私が組めるぐらいだから

もうひとつ違うバージョンもあるのでそちらも見てみてくださるとうれしいです♪
▽うーん、やはりそうですか・・・
エキサイトブログ使ってまして(^・^;)
http://boysloveh.exblog.jp/
こちらです。
あっ、あるふぁさんとこにリンクなんて失礼なので見ていただいたら即削除でお願いします。
URLのとこ載せてたら一緒ですよね(^・^;)
すみません。
どうしよう・・・
△Re:うーん、やはりそうですか・・・
あ、エキサイトだったんですね~
私、エキサイトは使ったことないですね。
なので携帯板がどうなってるのかちょっとわからないです。
たぶん、エキサイトのCGIの関係かな~と思ってるんですが。

リンク、失礼なことはないですよ~
結構読みますし、えーとその手の本。
買うことは少ないんですけど(笑
ブログも読ませていただいてます♪
▽使わせていただきました
こんばんは(^^
プラグイン開閉の説明わかりやすかったです。
やってみたらとても簡単に出来ました。
ありがとうございます。

ではでは~。


---追記(9/10)
質問なのですが、記事中のあの開閉(サンプル)はどのようにして設置しているのでしょうか?
意外と便利そうだなぁって思ったので。
宜しくお願いいたします。
△Re:使わせていただきました
ritoさん、こんにちは
>プラグイン開閉の説明わかりやすかったです。
>やってみたらとても簡単に出来ました。
ε-(´▽`) ホッ
何だか説明がとてもあやふやな感じがしてたので一安心です。

>
>---追記(9/10)
>質問なのですが、記事中のあの開閉(サンプル)はどのようにして設置しているのでしょうか?
>意外と便利そうだなぁって思ったので。
>宜しくお願いいたします。

これは、スクリプトは同じでidを違うものに変えたんです。
△のサンプルだとこんな感じ▼になってます。
<a href="JavaScript:openPlugin('openSample1')">プラグインタイトル1</a><br>
<div style="display: block;" id="openSample1">
プラグインタイトル1の内容はここに表示されます。<br>
閉じるときはプラグインタイトルか、下の「閉じる」をクリックしてください。<br>
<a href="JavaScript:openPlugin('openSample1')">△閉じる</a><br>
</div>
idをopenSampleという風にしてあるのです。プラグインのときは同じところがopen<!--$plugin_no-->という風になってます。
記事内でもidを変更すれば使えます。
ただし、携帯電話では全部表示されちゃいますけれど。
それと、idは同じものにはできないのでご注意ください。
▽前のブログが

ちょうどそんな感じだったんですけど携帯では、これを実行するのは、やはり無理でしょうか?
△Re:前のブログが
月下さんこんにちは。
前のブログサービスってどちらを使ってたんでしょうか?
それがちょっと気になるのですが(^-^;)

javascriptは以下のような携帯フルブラウザのアプリでなら携帯でも表示されると思いますが基本的には使用不可です。
PCをケータイするという発想。make it possible with jigbrowser


なのでこのスクリプト使うのは無理です。ごめんなさい(_ _;)
*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
03

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