*ADMIN*

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 ≫

2024-04-19(Fri)

[PR]

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

author:あるふぁ [17:27:44]│ Comment(-) │ Trackback(-) │〆

│▲

2006-06-23(Fri)

カテゴリーに注釈(説明)をつける

忍者ブログでカテゴリーに注釈をつける方法です。

←サンプル画像
ツリー化して、大カテゴリー・小カテゴリーのように表示するのも良いのですが、もうちょっと注釈というか説明を記入できたらなぁと思って作成。

このスクリプトを使用したままツリー化する方法は分かりませんのでその点はご了承を。

で、実際に設定してみる。▼

実際の設定方法は基本的には下のソースをカテゴリーのプラグインのHTMLに置き換えて貼り付けるだけになります。

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


<div class="plugin_data">
<a href="">

()
</a>
<script type="text/javascript">
+'</li></ul>');
// -->
</script>
</div>

青字で表示されている部分の「カテゴリーXの説明文」に各カテゴリーの説明文を入れてください。
カテゴリーの番号(カテゴリーID)は各カテゴリーのURLを見れば分かります。

http://●●.blog.shinobi.jp/Category/5/

のようなカテゴリーであれば最後の｢５｣がカテゴリーの番号になります。
｢"｣を消さないように注意していただければ特に問題はないと思います。
カテゴリーが足りない場合は、

var ctext● = "カテゴリー●の説明文";

となります。
●の部分にカテゴリー番号の数字を入れて同じように説明文を記入すればいくつでもカテゴリーは増やせます。

また、説明文のスタイルはソースの緑色ところで一応行ってます。
スタイルを変えたいときは、ココにそのまま記入するなり、新たにclass指定を加えるなりしてください。

6/23日現在で、ツリー化したカテゴリーの下に注釈つきのカテゴリーを表示してます。

追記：いつサイドのカテゴリーを外してしまうか分からないのでサンプル画像をUP。

閉じる▲

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

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

│▲

2006-06-15(Thu)

プラグインにスクロールバーを表示する

プラグイン(サイド)にスクロールバーを設置するときどのようにしていますか？
特にoverflowの指定はどうしてます？
どれをしていすれば一番綺麗に表示されるのか試して見ます。

基本は高さを指定して、領域をはみ出すときの指定であるoverflowを指定すれば大丈夫なはず。でも、overflowの指定法が３種類あるのでどれがいいのか確認。
①overflow:scrollで指定

<div style="width:100%;height:200px;overflow:scroll;">ここに内容</div>

②overflow-y:scrollで指定

<div style="width:100%;height:200px;overflow:scroll-y;">ここに内容</div>

③overflow:autoで指定

<div style="width:100%;height:200px;overflow:auto;">ここに内容</div>

確認!!▼

author:あるふぁ [10:37:47]│ Comment(5) │Trackback() │〆

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

│▲

2006-04-01(Sat)

縦・横カレンダー

カレンダーの縦横表示はテーブルを使ってみました。

横表示のときは無理にテーブルを使わなくてもいいのですが、使ったほうが日付ヒトマスごとに指定ができるので、デザイン性があるかな？と思いました。

横のソースはこんな感じ。

<table>
<tr>
<th>
<a href="" title="月の記事へ">≪</a>
</th>

<td></td>

<th>
<a href="" title="月の記事へ">≫</a>
</th>
</tr>
</table>

クラス指定をつけて、きちんとデザインできればいい感じのカレンダーになる・・・ハズ。

縦型にするには日付の部分を

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

のようにすれば縦になるので(￣ー￣)V
(当然、前後もこれに応じて変わります)

author:あるふぁ [15:31:57]│ Comment(1) │Trackback() │〆

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

│▲

2006-03-27(Mon)

コメントや最新記事にNew＆Upマークをつける

最新記事リストやコメントにNew＆Upマークをつけてみました。

最新記事は３日以内なら

が表示され、コメントとトラックバックは

が表示されてます。

これをテンプレートのHTMLにつけることも可能ですが、とりあえずプラグインで使う方法を説明しておきます。

参考サイト：一定期間だけNEWの文字を表示する―javascript例文辞典

つづきはこちら▼

まずjavascriptを設置します。設置する場所はNewマークを表示させたいプラグインのHTMLのところで大丈夫です。
もしテンプレートHTMLのほうに設置するなら、このスクリプトは<body>～</body>の間ならたぶんどこでも大丈夫なハズのスクリプトなのでどこでもいいと思います。(自信ないですが･･･)
気になるなら、分かりやすくしておくためにも<body>のすぐあとぐらいが適当なのでは？と思います。
コメントと最新記事両方にマークをつけたいというときでもスクリプトはひとつでいいので、どちらかにスクリプトを入れておいてください。
個人的にはプラグインHTMLにスクリプトを設置しておくコトをオススメします。
テンプレートを変更してもソースを移す必要がないので楽ですよ～

<script type="text/JavaScript">
function newupMark(u1, u2, u3, u4) {
delDay = 3;
oldDay = new Date(u1 + "/" + u2 + "/" +u3);
newDay = new Date();
u3 =(newDay - oldDay) / (1000 * 24 * 60 * 60);
if(u3 <= delDay) {
if(u4 == "new") document.write("<img src='New画像のURL' border='0'>");
if(u4 == "up") document.write("<img src='Up画像のURL' border='0'>");
}
}
</script>

dlDay = 3; の数字が何日間マークを表示させるかを指定しています。ここでは３日になってます。
この色で指定したところに画像を入れるようになってますが変わりに「New!!」のように文字を入れることもできます。

これをどこか一箇所に入れたら、今度は実際にNew＆Upマークを入れたいところにもスクリプトを入れます。
ここでは、最新記事のところにUpマークをつけたのを例とします。

<div class="plugin_data">
<a href="">

<script>
newupMark(,,,"up")
</script>
</a>
</div>
<div class="plugin_data_date">
(/)
</div>

青く表示したものがUpマークを表示するところです。
基本構造は

<script>
newupMark(年,月,日,"up")
</script>

となってます。「年」のところにはそれを表示する忍者ブログの変数が入り、「月」、「日」も同様です。
最後の「"up"」の部分はここにはUPマークを表示させるという意味になります。ここを「"new"」にするとNewマークが表示されることになります。

ってぐあいでマークを表示したいところにスクリプトを設置するのですが、よくわからないって方は、一応それぞれのスクリプトを用意しておきましたのでコピーして使ってみてください。

注：ソースをコピーするとき文字化けに注意してください。時々化けます。

・プラグインの最新記事でNewマークを表示する

<script>
newupMark(,,,"new")
</script>

・プラグインの最新記事でUpマークを表示する

<script>
newupMark(,,,"up")
</script>

・プラグインの最新コメントでNewマークを表示する

<script>
newupMark(,,,"new")
</script>

・プラグインの最新コメントでUpマークを表示する

<script>
newupMark(,,,"up")
</script>

・プラグインの最新トラックバックでNewマークを表示する

<script>
newupMark(,,,"new")
</script>

・プラグインの最新トラックバックでUpマークを表示する

<script>
newupMark(,,,"up")
</script>

テンプレートでは独自タグを表示する部分にあわせて変えて使ってください。
一応自分のブログでは確認はしましたが、Winのみの確認です。
何か変だなぁと思った方、できれば教えて下さい<(_ _)>

閉じる▲

author:あるふぁ [20:44:10]│ Comment(2) │Trackback() │〆

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

│▲

2006-03-25(Sat)

カレンダーとアーカイブをひとまとめに

プラグインはブログを続けていくとどんどん増えていきます。

FC2ブログの共有プラグインほうでいいアイディアがあったので、忍者ブログでもやれるかな？とトライしてみました。

やってみた結果です。▼

まずはアーカイブをプルダウン化します。
忍者ブログ用のソースはアーカイブをプルダウンメニューにという記事の中にもあります。

今回はそれを元にカレンダーに合うように変更します。
変更した結果は下になります。

<script type="text/javascript">
function change(myURI){
if(myURI !="default"){
window.document.location.href=myURI;
}
}
</script>
<form name="archiveMenu" id="archiveMenu">
<p>
<select name="selectarchiveMenu" id="selectarchiveMenu"
onchange="change(this.form.selectarchiveMenu.value);" style="width:100px;">
<option value="default">年月</option>

<option value="">年月()</option>

</select>
</p>
</form>

ここでは一応幅を100pxとしています。カレンダーに組み込んだあとで、幅が合わない場合はwidth:100px;というところを書き換えてください。

このプルダウンメニュー化したアーカイブをカレンダーの「現在の月」が表示される部分に組み込みます。

<table class="CalendarMoveTable">
<tr class="CalendarMoveTr">
<td class="CalendarPrevTd">
<a href=""></a>
</td>
<td class="CalendarNowTd">
/
</td>
<td class="CalendarNextTd">
<a href=""></a>
</td>
</tr>

</table>

<table class="CalendarTable">

<tr class="CalendarWdayTr">
<th class="CalendarWdaySun">日</th>
<th class="CalendarWday">月</th>
<th class="CalendarWday">火;</th>
<th class="CalendarWday">水</th>
<th class="CalendarWday">木</th>
<th class="CalendarWday">金</th>
<th class="CalendarWdaySat">土</th>
</tr>


<tr class="CalendarTr">
<td class="CalendarTdSun"></td>
<td class="CalendarTd"></td>
<td class="CalendarTd"></td>
<td class="CalendarTd"></td>
<td class="CalendarTd"></td>
<td class="CalendarTd"></td>
<td class="CalendarTdSat"></td>
</tr>


</table>

うえで赤く表示されているところ「現在の月」を表示する忍者ブログの独自タグです。
ここにプラグイン化したアーカイブを入れます。
挿入した結果は以下のようになります。

<table class="CalendarMoveTable">

<tr class="CalendarMoveTr">
<td class="CalendarPrevTd">
<a href=""></a>≪
</td>
<td class="CalendarNowTd">

<script type="text/javascript">
function change(myURI){
if(myURI !="default"){
window.document.location.href=myURI;
}
}
</script>
<form name="archiveMenu" id="archiveMenu">
<p>
<select name="selectarchiveMenu" id="selectarchiveMenu"
onchange="change(this.form.selectarchiveMenu.value);" style="width:100px;">
<option value="default">年月</option>

<option value="">年月()</option>

</select>
</p>
</form>

</td>
<td class="CalendarNextTd">
≫<a href=""></a>
</td>
</tr>

</table>

<table class="CalendarTable">

<tr class="CalendarWdayTr">
<th class="CalendarWdaySun">日</th>
<th class="CalendarWday">月</th>
<th class="CalendarWday">火</th>
<th class="CalendarWday">水</th>
<th class="CalendarWday">木</th>
<th class="CalendarWday">金</th>
<th class="CalendarWdaySat">土</th>
</tr>


<tr class="CalendarTr">
<td class="CalendarTdSun"></td>
<td class="CalendarTd"></td>
<td class="CalendarTd"></td>
<td class="CalendarTd"></td>
<td class="CalendarTd"></td>
<td class="CalendarTd"></td>
<td class="CalendarTdSat"></td>
</tr>


</table>

これで、アーカイブとカレンダーがひとつのプラグインで無理なく表示されます。
サンプルはこのブログのサイドのカレンダーです。

4/1追記：の位置が間違ってました。

5/1：曜日が空白になってましたので、漢字で入れておきました。英語にしたい方は、該当部分を直してください。

9/23：火曜の｢火｣の横に「;」が入っちゃってました。入ってる方は取り除いてください～<(_ _)>
教えてくださった方、感謝です♪

閉じる▲

author:あるふぁ [00:47:43]│ Comment(1) │Trackback() │〆

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

│▲

2006-03-24(Fri)

アーカイブをプルダウンメニューに

プラグインでサイドに表示されるアーカイブ（過去の月別のリンク）をプルダウンメニューにしてみました。
プルダウンメニューは別名ドロップダウンメニューとも言われます。
クリックするとメニューが表示されて、選択するとリンクするというものです。
メニューが長くなったときに、スペースを省略するのによく使われています。

私はjavascriptの知識が乏しいので、Project UDONからソースをおかりして、なんとかアーカイブのプルダウンメニューを作成してみました。

ただ、javascriptをOFFにしているとこの機能は使えないです。
もっとも、最近の統計では９割以上の人がjavascriptをONにしているとのコトなのであんまり気にしなくても大丈夫だと思います。
▼サンプル

つづきはこちら▼

author:あるふぁ [20:35:40]│ Comment(5) │Trackback() │〆

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

│▲

Prev← 1P2P

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

■CM&TB

●コメント

パンくずナビをつける
Michalexcire⇒(01/18)
パンくずナビをつける
ViktorianitemY⇒(01/17)
コメントや最新記事にNew＆Upマークをつける
kirara⇒(04/06)
しばらく休止いたします。
リゾートバイト⇒(12/04)
独自ドメイン
shige⇒(12/01)

●トラックバック

Scrollbar ONorOFF

■NinjaLink

■Thanks

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

■QRcode

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

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

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

■EntryNavigation

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

≪

*1*2*

■Template

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

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

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

詳細

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

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

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

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

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

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

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

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

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

Scrollbar ONorOFF

○広告

■Recommend

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

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

■Visiter

blog SEO

[PR] 美容外科 at 名古屋