Customize in Ninja Blog

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

≪ 2012.02│ 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 ≫

2006-09-17(Sun)

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

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

サンプル▼

１個目のプラグインタイトル
２個目のプラグインタイトル

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

設定方法はこちら▼

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

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

スクリプトの設定

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

<script type="text/javascript" language="JavaScript">

        document.getElementById("open").style.display = "none";
        
        document.getElementById("closeBox").style.display = "none";
        document.getElementById(id).style.display = "block";
        }
    }
}
//-->
</script>

青い部分が追加した部分です。スクリプトの編集はこれで終わりです。

HTMLの設定

今度はテンプレートのプラグインの部分に空のBoxを設置します。

<div class="****">
<div class="**** ">
<a href="JavaScript:oneOpenPlugin('open')"></a>
</div>
<div id="open" style="display:none;" >
<div class="**** ">

</div>
<div class="**** ">

</div>
<div class="**** ">

</div>
<a href="JavaScript:oneOpenPlugin('closeBox')">×</a>
</div>
</div>

<div style="display: none;" id="closeBox"></div>

青と水色の部分が追加するソースです。
水色は「空のBox」です。
もし、プラグインカテゴリー１以外のほかの番号でも閉じるの機能をつけたい場合でも、「空のBox」の追加はひとつだけでOK･･･なです。
△のソースでは「×」という文字を閉じる鍵にしてますが、サンプルのように画像を使うことも可能です。
画像を使う場合は、

<a href="JavaScript:oneOpenPlugin('closeBox')"><img src="画像のURL"></a>

のようにします。ちなみにサンプルで使ってる画像は

です。

▼忍者通常テンプレートのプラグインカテゴリー１でのソース

<div class="PluginInnerBlock">
    <div class="PluginTitle ">
         <a href="JavaScript:oneOpenPlugin('open')"></a>
    </div>

    <div id="open" style="display:none;">
        <div class="PluginExplanation ">
            
        </div>
        <div class="PluginContents ">
            
        </div>
        <div class="PluginExplanation ">
            
        </div>
<a href="JavaScript:oneOpenPlugin('closeBox')">×</a>
    </div>
</div>

<div style="display: none;" id="closeBox"></div>

閉じる▲

author:あるふぁ [22:49:17]│ Comment(0) │Trackback(0) │〆

[カスタマイズ]プラグイン

│▲

2006-09-12(Tue)

Safariでの崩れ・・・

Safariでの崩れについてご指摘がありましたのである程度修正を行いました。
9/12日修正申請を提出。~~ただいま承認待ちです。~~申請許可されました。

修正はしましたが、それでも微妙にBoxのサイズが異なって見える状態です。
枠の線が見えなくなるというのは解消したと思うのですが、なにぶんMacOSは手持ちにないのでスクリーンショットでの確認のみです。

具体的な修正箇所は主にwidthの指定です。解釈に差があるので以前のものよりも余裕を持たせて指定しなおしました。

それから、IE７でも崩れるそうなのですが、正式バージョンがでたらまた考えます。
今のところベータ版ですのでどういう認識するのか不安定ですし。
ただでさえ、IEは困ったサンなのでもうちょっと様子見させていただきます。

超独り言。▼

author:あるふぁ [09:41:27]│ Comment(2) │Trackback(0) │〆

[共有テンプレート]Alternation-緑×白-

│▲

2006-09-10(Sun)

ミクシィ

ひょんなことからMixiに参加しました。

なにをやってよいのか実はよくわかってないのでとりあえずコミュニティに参加しまくってます。
主にコミック・ラノベ・WEB系のコミュニティに参加してます。

Mixiやってるよ～という方いませんか？
諸事情でマイミクが一人もいない事態になってしまったので、
マイミクに入れてあげてもい～よという方ぜひご連絡くださいませ(*- -)(*_ _)ペコリ

トップページはこちらです⇒私のMixiでのページ

ついでに、私にMixiの使い方教えてくださる方大募集中です（笑

author:あるふぁ [12:21:28]│ Comment(8) │Trackback(1) │〆

[ブログ]雑文

│▲

2006-09-09(Sat)

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

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

▼サンプル
１個目のプラグインタイトル
２個目のプラグインタイトル

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

つづきはこちら▼

スクリプト

プラグインの開閉①で使ったスクリプトを元にひとつだけ開くように作り変えたスクリプトです。
これはプラグインカテゴリー１用のものです。別のプラグインカテゴリーで使用するときは水色の部分をそのカテゴリー番号に直してください。
これを<body>の直後あたりに入れてください。（でもどこに入れても大体は作動します。）

<script type="text/javascript" language="JavaScript">

        document.getElementById("open").style.display = "none";
        
        document.getElementById(id).style.display = "block";
        }
    }
}
//-->
</script>

HTMLの編集

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

プラグインの開閉①と同様にテンプレートの中から～で囲まれた部分を探します。
テンプレートごとに位置は異なるとは思いますがプラグインに対応している限りどこかにあります。
さらに～で囲まれた部分の中からという独自タグを探します。
それをこのように書き換えてください。

<a href="JavaScript:oneOpenPlugin('open')"></a>

ここが開閉スイッチになります。

が見つかったらその下に、、という独自タグがそれぞれ<div>タグか何かで囲まれているはずです。
そうしたらそのすべてを囲うようにさらに<div>～</div>で囲います。その際にidとstyleを指定します。
指定してみると▼のようになります。
ちなみにclass指定に****が入っているのはテンプレごとに指定は違うからです。すべてに同じ指定が入るという意味ではありません。

<div id="open" style="display:none;" onclick="oneOpenPlugin('open')">
<div class="**** ">

</div>
<div class="**** ">

</div>
<div class="**** ">

</div>
</div>

ピンク色の部分が新しく囲った部分です。
前回はstyle="display:none;"を削ると初期状態で開くことになりますと書きましたが、今回はここは削らないでください。

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

これらすべてをまとめるとこのようになります。

<div class="****">
<div class="**** ">
<a href="JavaScript:oneOpenPlugin('open')"></a>
</div>
<div id="open" style="display:none;" onclick="oneOpenPlugin('open')">
<div class="**** ">

</div>
<div class="**** ">

</div>
<div class="**** ">

</div>
</div>
</div>

今回は｢閉じる｣のボタンはありません。
「閉じる」の設置方法はまた次の記事でUPします。
このプラグインの開閉を利用したテンプレをそのうち公開したいなぁと思ってます。

▼忍者通常テンプレートのプラグインカテゴリー１のHTMLソース

<div class="PluginInnerBlock">
    <div class="PluginTitle ">
        <a href="JavaScript:oneOpenPlugin('open')"></a>
    </div>

    <div id="open" onclick="oneOpenPlugin('open')">
        <div class="PluginExplanation ">
            
        </div>
        <div class="PluginContents ">
            
        </div>
        <div class="PluginExplanation ">
            
        </div>
    </div>
</div>

閉じる▲

author:あるふぁ [12:48:23]│ Comment(2) │Trackback(0) │〆

[カスタマイズ]プラグイン

│▲

2006-09-09(Sat)

プラグインの開閉①一番簡単な開閉法

まずは一番簡単なプラグインの開閉方法のご紹介です。
プラグインをプラグインカテゴリーごと開閉するのではなく、各プラグイン(カレンダーとかアーカイブとか)ごとに開閉します。
プラグインカテゴリーごと開閉することももちろん可能です。

▼サンプル

プラグインタイトル１
プラグインタイトル２

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

実際の設定方法はこちら▼

スクリプト

まずはJavascriptの設定。
テンプレートの編集でHTMLの<body>の直後に以下のスクリプトを設置してください。

<script type="text/javascript" language="JavaScript">

</script>

HTMLの編集

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

まず、テンプレートの中から～で囲まれた部分を探します。
テンプレートごとに位置は異なるとは思いますがプラグインに対応している限りどこかにあります。
さらに～で囲まれた部分の中からという独自タグを探します。
それをこのように書き換えてください。

<a href="JavaScript:openPlugin('open')"></a>

ここが開閉スイッチになります。

が見つかったらその下に、、という独自タグがそれぞれ<div>タグか何かで囲まれているはずです。
そうしたらそのすべてを囲うようにさらに<div>～</div>で囲います。その際にidとstyleを指定します。
指定してみるとこんな風になります。ちなみにclass指定に****が入っているのはテンプレごとに指定は違うからです。すべてに同じ指定が入るという意味ではありません。

<div id="open" style="display:none;">
<div class="**** ">

</div>
<div class="**** ">

</div>
<div class="**** ">

</div>
</div>

ピンク色の部分が新しく囲った部分です。
style="display:none;"と記入した部分は最初の状態を閉じた状態にするという指定です。
ここを削ると初期状態が開いた状態になります。

｢閉じる｣ボタンを設置するには、ピンクで囲まれた中に

<a href="JavaScript:openPlugin('open')" title="閉じる">閉じる</a>

を入れてください。

これらすべてをまとめてみるとこのようになっています。

<div class="****">
<div class="**** ">
<a href="JavaScript:openPlugin('open')"></a>
</div>
<div id="open" style="display:none;">
<div class="**** ">

</div>
<div class="**** ">

</div>
<div class="**** ">

</div>
<a href="JavaScript:openPlugin('open')" title="閉じる">閉じる</a>
</div>
</div>

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

▼忍者ブログの通常テンプレート用プラグインカテゴリー１のHTMLソース

<div class="PluginInnerBlock">
<div class="PluginTitle ">
<a href="JavaScript:openPlugin('open')"></a> </div>
<div id="open" style="display:none;">
<div class="PluginExplanation ">

</div>
<div class="PluginContents ">

</div>
<div class="PluginExplanation ">

</div>
<a href="JavaScript:openPlugin('open')" title="閉じる">閉じる</a>
</div>
</div>

▼配布テンプレ用プラグイン１のHTMLソース
注：私の作ったテンプレートといえど、すべてがこのような指定をしているわけではありません。カスタマイズする際はあらかじめ元のテンプレートを保存しておくことをお勧めします。

<div class="plugin">
<div class="plugin_title"
style="text-align:;"> <a
href="JavaScript:openPlugin('open')"></a> </div>
<div id="open" style="display:none;">
<div class="plugin_description" style="text-align:;">

</div>
<div class="plugin_text" style="text-align:;">

</div>
<div class="plugin_description" style="text-align:;">

</div>
<a href="JavaScript:openPlugin('open')" title="閉じる">閉じる</a>
</div>
</div>

閉じる▲

author:あるふぁ [12:27:27]│ Comment(9) │Trackback(1) │〆

[カスタマイズ]プラグイン

│▲

2006-09-08(Fri)

プラグインでサムネイル？

独自構文解説書を読み返していたらというのが追加されていました。
サンプルソースを試しに使ったところ、まだ実装はされてないみたいです。
解説をみると一通りの画像に関するタグがあるみたい。

となると、これはプラグインでサムネイル表示が可能になるってことですねo(＾＾)o
写真などを毎日UPされてるって方には待ち望んでいた機能なんじゃないでしょうか？

面白いですね。テンプレにあらかじめ写真をサムネイル表示するものを組み込んでも楽しいかもしれないです。

それはそうと解説書ところどころ変なところがあるんですよね～
INDEXのところに｢各プラグインのタイトル｣とされているところが２つあるんです。
片方はなのでたぶん「各プラグインのタイトルの横位置」だとは思うんですけれど。
それからif_searchの説明文のところ、サンプルで検索文字の独自タグがになってるんです。たぶん、これは廃止されてになったんじゃないのかな～？と思います。
わざわざメールで報告するようなことでもないかなと思ってなにもしてないのですけれど(たぶん分かるだろうし)、一応気づいたので載せときます(^^;)

author:あるふぁ [18:23:19]│ Comment(2) │Trackback(0) │〆

NinjaBLOG

│▲

2006-09-06(Wed)

EntryNavigationを設置する

各ページごとの記事タイトルの一覧を表示させるプラグインを作ってみました。
以前からEntryNavigationとしてこのブログには設置してあるものです。

ご質問を受けて、どのブログにでも対応できるよう改良しようと独自構文解説書とにらめっこした結果･･･案外簡単にすることができました

実はページごとに条件わけしたり、自分用にちょこちょこいじったりしてたのでちょっと説明＆設置が大変だなぁと思って今まで公開してませんでした。
よく解説見たらそんな必要がなかったんですね～(泣)

気を取り直して行きましょう(^^;)

一覧機能としては、

通常ページ＝そのページに表示している記事のタイトルを一覧表示
詳細記事ページ＝最新記事のタイトルを一覧表示
カテゴリーページ＝そのカテゴリー名とそのカテゴリーの記事タイトルを一覧表示
日付ページ＝その日付とその日付の記事タイトルを一覧表示
検索結果のページ＝検索した文字とその検索結果の記事タイトルを一覧表示

といった感じになってます。そのしたに前後ページへのナビをつけることで、タイトルだけを見ながらページ移動をできるようにしてあります。

パンくずナビとはまた違った形で、サイト内での迷子防止になるかと思います。

設置してみるならこちらからどうぞ▼

実際に設置するソースです。
テンプレートのHTMLに記入しても使えますが、基本的には記事上部分のプラグインとして使うことを前提に作りましたのでテンプレートのHTMLに記入するときは注意してお使いください。
通常はプラグインの設定から各プラグインのHTML編集を選択して設置してください。
また、テンプレートによってはこのブログに設置してあるようには表示されないかと思います。その場合はご自分で調整してください。
（できない場合はこの記事のコメントか何かでご相談ください。）

HTMLソース▼

<div style="text-align:center;margin:0px auto;width:90%;">


<ul style="text-align:left;margin:0px auto;">
<strong>最新記事</strong>のタイトル一覧


<li><a href=""></a>(/)</li>

</ul>





<ul style="text-align:left;margin:0px auto;">

<strong></strong>の記事タイトル一覧
このページにある記事のタイトル一覧

<strong></strong>でのヒット記事一覧


<li>(/)<a href="" title=""></a></li>

</ul>




<table style="width:80%;margin:10px auto;">
<tr>
<td style="width:50px;">

<a href="" title="前へ">←</a>

</td>
<td style="text-align:center;font-size:10px;">
**
</td>
<td style="width:50px;text-align:right;">

<a href="" title="次へ">→</a>

</td>
</tr>
</table>

</div>

ある程度スタイル指定をするためにdivで囲ってますがあまり必要ないかもしれないです。
お好みでアレンジしてください♪

以前に何人かにご質問いただいたときできません～って答えてしまいましたが、なんとか汎用性のあるものができましたのでこの記事に気がつかれましたらお使いください(*- -)(*_ _)ペコリ

閉じる▲

author:あるふぁ [23:41:21]│ Comment(9) │Trackback(0) │〆

[カスタマイズ]プラグイン

│▲

Prev← 1P2P3P4P5P6P7P8P9P →Next

■Category

■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一括送信サイトです。ここ１件に送るだけでいろいろなところに送ってもらえます♪

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

■Calendar

日	月	火	水	木	金	土
			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

■CM&TB

●コメント

China-BlueVer-
Bison⇒(05/24)
ピンクチャイナ
Alyn⇒(05/23)
ピンクチャイナ
Jennylee⇒(05/23)
ピンクチャイナ
Chynna⇒(05/23)
ピンクチャイナ
Kayli⇒(05/23)

●トラックバック

パンくずナビをつける
kisatonomori blog⇒(11/16)
ページ別のアクセス解析の設置法
ディスカバリーネットで在宅ワーク！⇒(10/31)
スクロールバーの表示・非表示の切り替え
KISS AND KISS⇒(10/19)
スクロールバーの表示・非表示の切り替え
blog TK*Plus1⇒(10/19)
自己紹介バトン
流るるままに…⇒(10/05)

Scrollbar ONorOFF

■NinjaLink

■Thanks

テンプレートを作成するに当たってよく利用させていただいているサイト様です。

■QRcode

QRコードをクリックするとメールフォームが開きます。
メールフォームでPCから携帯にこのブログのURLを送ることができます

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

無料体験できるのでぜひお試しください♪

■EntryNavigation

このページにある記事のタイトル一覧

≪

*1*2*3*4*5*6*7*8*9*

≫

■Template

○公開したテンプレのプレビュー

詳細	詳細
詳細	詳細	詳細
詳細	詳細	詳細

○公開された携帯用テンプレのプレビュー

詳細

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

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

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

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

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

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

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

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

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

Scrollbar ONorOFF

○広告

■Recommend

○ルナエンバシージャパン

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

■Visiter

blog SEO

[PR] 美容外科 at 名古屋