BlogNINJAブログを使いこなそうと始めたブログ。ないブログに表示されています。新しい記事を書く事で広告が消えます。│▲2007-02-17(Sat)プラグインタイトルを虹色の文字で文字色を七色に変化させるスクリプトを使って何かできないかな~と思案したもの。変化させる文字を指定しています。"ここに入力された文字が虹色に変化します。変化する色コードを指定しています。;document.write(myStyle.fontcolor(myColor[myNum]));}</script>赤い字で表示されたところに入力された文字が虹色に変化します。これはどこにでもある文字色の虹色表示のスクリプトなのですが、これを利用すると画像を使わなくてもカラフルなテンプレができるかな~と思いましてたとえば赤い文字のところを<!--$g_title-->として、テンプレートの<!--$g_title-->を探してjavascriptごと置き換えればブログタイトルが虹色になります。リンクの関係上ブログタイトルで使うのはちょっと難しいかもですが(^^;)お勧めはプラグインのタイトル。赤い文字のところを<!--$plugin_title-->としてjavascriptを作ります。;document.write(myStyle.fontcolor(myColor[myNum]));}</script>これをテンプレートのHTMLから<!--$plugin_title-->という部分を探して上のソース全部と置き換えます。すると一番上にある文字色サンプルのようにプラグインタイトルの文字色が虹色変化して表示されるようになります。虹色として指定している色を変えたり、変化させる色の数を変えるともっと楽しめるかも♪いつかどっかでつかいたいな~と思ってます。Comment(2)│Trackback(0)│〆[カスタマイズ]テンプレート│▲2006-08-27(Sun)記事番号で背景色を変化させるAlternation-緑×白-で使用した背景色を記事番号ごとに交互に変化させるスクリプトです。サンプル▼...このテンプレートの記事部分とプラグイン部分はその番号ごとに交互に背景色が変化してます。交互につまり、切り替えるスタイルシートは2つになってますが、スクリプトの変更でいくつでもスタイルを付け加えることができます。実際の設定方法は見る?▼まずは変化させるスタイルシートを2つ用意します。Ninjaブログの通常テンプレートのEntryInnerBlockというclass指定で指定される記事部分を切り替えることにします。(サンプルに挙げたテンプレートは違うclass指定を使用してます。;padding:0px;text-align:left;background-color:#FFCCFF;}通常のスタイルはEntryInnerBlockですが、EntryInnerBlock2としてもうひとつスタイルを指定しました。見て分かると思いますが、背景色の色が水色と桃色になるように指定してあります。スタイルシートが用意できたら、次はHTMLにjavascriptを組み込みます。HTMLから次の部分を探します。class="EntryInnerBlock">この部分を▼のようなスクリプトに書き換えます。class="EntryInnerBlock"></noscript>水色の部分は、背景色を水色にするスタイルシートを組んでいる部分です。意味としては、記事番号を2で割り、余りが0であればEntryInnerBlockというclassを表示するという意味になります。桃色の部分は、背景色を桃色にするスタイルシートを組んでいる部分で、意味は、記事番号を2で割ったときの余りが1かもしくは2分の1であったときはEntryInnerBlock2というclass指定を表示するという意味になります。最後に青色で表示している部分はjavascriptがOFFであった場合にはこのスタイルを指定するという意味になります。これをそのまま忍者の通常テンプレートに使用したサンプル画像が以下のものになります。共有テンプレートでは背景色に白(#ffffff)と薄い緑(#f7fff0)を指定していますが、分かりやすいようにはっきりした色をここでは使いました。応用編もし3つを切り替えるとすればこうなります。;padding:0px;text-align:left;background-color:#FFFFFF;}まずは上のように背景色が白のスタイルをさらにひとつ追加しておきます。スクリプトは次のようになります。class="EntryInnerBlock"></noscript>これを忍者の新規テンプレートに当てはめたプレビューがこれ▼いろいろ応用方法はあると思います。記事タイトルを入れ替えても良いと思いますし。HTML4.01lかXHTMLかHTML4.01lでテンプレを作るかXHTMLでテンプレを作るかいつも迷ってます。一応、全てXHTMLのほうで作ってあります。そのため、プラグインででてくるソースなどがHTMLのままででてくるので少々アンバランスなことになってます。記事内の改行や、HTMLエディタで作られるソースはおおむねXHTML仕様ということですので、ブログのメインは記事だろうと私はは思ってるのでしてます。(おおむねというのが微妙なトコですが・・・)このあたりは使う方の好みだと思うのですが、忍者ブログの通常のDOCTYPE宣言は下のようになってます。encoding="UTF-8"?>の部分がブログ上に表示されてしまうというアクシデントがあったりしたので▼のような宣言を使ってたときもありました。"http://www.w3.org/TR/html4/loose.dtd">こちらはいわゆるURL付きというもの。gatewayなどでチェックするとエラーになってしまいます。/>ではなく<p>~</p>を利用して文章を表現するといいです。自力で入力する必要がありますが。)カスタマイズする際にどーしても気になる、という方はいろいろ試してみてください。Comment(3)│Trackback(1)│〆[カスタマイズ]テンプレート│▲2006-07-21(Fri)ページ別のアクセス解析の設置法しばらくまえからアクセスカウンターとアクセス解析が1クリックで設置できるようになってます。(例によって気づくの遅いんですが)カウンターは初期のものだと手裏剣のカウンターになってる見たいです。アクセス解析はというと、プラグインのひとつとして追加される仕様のようです。アクセス解析ってプラグインにふつーは記述しないのがほとんどだと思います。サイドなどにアクセス解析ってコーナーがでても、テンプレ上のその部分には何も表示されないってことになっちゃいますから。テンプレートに記述しなおすのが通常のように思います。テンプレートに記述しなおすならページごとに解析をするように直したほうがより解析っぽくなります。記事ひとつひとつを解析することは難しいですが、トップページ、カテゴリーページ、詳細記事ページ、日付ページ、メインページ、検索結果のページの6つに分けることぐらいなら割と簡単です。ひと手間かけてみませんか?はじめてアクセス解析を設置するという方にオススメです。)やってみるならこちら・・・▼それでは実際にやってみます。アクセス解析の管理画面に入ってください。すると左側の一番下、「管理メニュー」のところに「Pageの設定」というところがあります。ここを開くと解析するページ名を編集できます。(画像は都合上90~100のところを表示してます。)必要な解析用ソースは6個なので、ページの1~6をそれぞれ、トップページ、カテゴリーページ、詳細記事ページ、日付ページ、メインページ、検索結果のページのように名前をつけておいてください。名前をつけ終えたら「上記に変更」ボタンを押して変更してください。今度はアクセス解析の管理画面の「解析用ソース」というところを開きます。先ほどの「Pageの設定」というところの上です。このページの中ほどに「ページの選択」というところがあって隣にページ名が表示されてます。先ほど変更したPage1の名前が表示されてるはずです(画像ではPage100になってます)。その下は解析の種類を選べるようになってますが、忍者ブログで使うなら高性能のままなにも変更しないでOKです。その下、赤い部分の下のテキストエリアにあるタグが解析用のソースです。「ページの選択」というところをクリックするとプルダウンして別のページのタグが表示されるようになります。それぞれのページ用の解析タグを取得したら、それを以下の部分の該当箇所に貼り付けてください。--><!--if_toppage-->トップページ用の解析用ソースをここに貼ってください<!--/if_toppage--><!--if_category-->カテゴリーページ用の解析用ソースをここに貼ってください<!--/if_category--><!--if_entry-->詳細記事ページ用の解析用ソースをここに貼ってください<!--/if_entry--><!--if_date-->日付ページ用の解析用ソースをここに貼ってください<!--/if_date--><!--if_page-->メインページ用の解析用ソースをここに貼ってください<!--/if_page--><!--if_search-->検索結果ページ用の解析用ソースをここに貼ってください<!--/if_search-->これで、ページ別に解析するソースは出来上がりましたので、あとはテンプレートに貼るだけです。貼り付け終わったら、今度はブログの管理画面に入ります。「テンプレートの設定/編集」から現在使用中のテンプレートの「修正」をクリックしてテンプレートの編集画面を開きます。大きなテキストエリアが2つ出てきますが、上のほうがHTMLで下のほうがCSSを編集するところです。編集するのはHTMLなので上のほうを見てください。上のほうのテキストエリアの中に<body>というタグがあります。(見つからなかったら、いったんメモ帳かテキストエディタに全部をコピペして検索で探してみてください)<body>のすぐ下に、さっき作り上げたページ別に解析するソースを貼り付けて終了です。これはあくまで忍者ブログの独自タグでできる範囲のページ別の解析の設置法です。ページ別にする必要がないって方は、<body>のすぐ下に解析用ソースを何もせずに貼り付けるだけで済みます。必要なところだけ別に解析してみるってのもいいと思います。Comment(3)│Trackback(1)│〆[カスタマイズ]テンプレート│▲2006-06-14(Wed)カテゴリーを画像に変更する。プラグインをツリー化するとどうしても記事内のカテゴリーの表示が「[大カテゴリー]小カテゴリー」となってしまい[かっこ]でくくられている部分が目障りだな~と思ってしまいます。サイドのプラグインではツリー化してるので気にならないのですが、記事部分はツリー化してないので気になる・・・ということで、カテゴリーを画像に変えてしまえば目障りじゃなくなるのかな?と思い実行。ソースと結果は?▼ソースは、簡単です。忍者ブログの独自構文解説書に「記事に設定されたカテゴリのID番号」という独自タグがあります。そこのサンプルソースを使用すればカテゴリーの画像化ができます。一応ココにも載せておきます。通常カテゴリーを記事内で表示するときはこのようなタグになってます。href="<!--$entry_category_link-->"><!--$entry_category--></a>これを次のように変更します。解説書のサンプルとはすこし違います。border="0"></a>ソースをこのように変えたら、後は画像を自分のブログにUPするだけです。そのときの注意は画像の名前です。画像の名前は必ずcategory_<!--$entry_category_id-->.gifにあわせてUPしなくてはいけません。この「<!--$entry_category_id-->」はカテゴリーのID番号、つまりURLで言ったらカテゴリーのurlが「http://***.blog.shinobi.jp/Category/2/」だとしたら最後の「2」がID番号になります。カテゴリーのIDが2のカテゴリーの名前が「[ブログ]日記」だとしたら、「日記」という画像を作って、その画像を「category_2.gif」としてUPすることになります。やって自分が作ったカテゴリーを全て画像に置き換えれば完了です。サンプルは本館のほうを見てください。記事内のカテゴリーを一部画像化してます。追記に開閉をさせる方法はいくつかありますが、こちらが一番分かりやすいと思います。追記部分を折りたたむ│お気楽極楽ブログ上のサイト様以外でも、説明をされているところは数多くあります。参考サイトをたどってみてもホントのでどころはよくわからないので、作者不詳ってことで上のサイトではMTでの説明になってます。スクリプトだけそのままお借りし、MTのタグを忍者ブログのタグ(参考:独自構文解説)に置き換えれば、わりと簡単に可能です。タグの変え方が分からないという方は、ニンブロラボ.様が同じスクリプトをかなり詳しく解説してます。(参考元は違うみたいですが)よろしければ参考にしてください。Comment(0)│Trackback(0)│〆[カスタマイズ]テンプレート│▲2006-04-21(Fri)パンくずナビをつけるまずは、パンくずナビって何?って方。パンくずナビゲーションというのは、サイト上でディレクトリを下がっていくときに、その階層の上層やトップに戻れるようにする、いわばサイトの縦型のナビゲーションです。そのページがディレクトリのどこに位置するのかひと目で分かるという便利なもの。これをNinjaブログでも再現してみました。共有化したテンプレには積んでおきました。ソース自体はそこから持ってってもけっこうです。(下にもあります)どういう風に表示されるかだけちょっと説明しておこうかと。実際に設置してみる▼トップページ(http://○○.blog.shinobi.jp/)では、ただ単にhomeと出ます。これは、リンクでもなんでもないです。トップページと同じように表示されるメインページの最初のページ(http://○○.blog.shinobi.jp/Page/1/)ではHOME≫現在のページ≫次項となり、その次のページ(http://○○.blog.shinobi.jp/Page/2/)では、HOME≫前項≫現在のページ≫次項のように表示されます。詳細記事ページ(http://○○.blog.shinobi.jp/Entry/記事番号/)ではHOME≫カテゴリー名≫記事タイトルとなります。カテゴリーのページ(http://○○.blog.shinobi.jp/Category/カテゴリー番号/)ではHOME≫カテゴリー名の記事と表示されます。日付のページ<(http://○○.blog.shinobi.jp/Date/2006XXAA/)ではHOME≫2006年XX月AA日の記事のように表示され、また月表示の日付ページ(http://○○.blog.shinobi.jp/Date/2006XX/)ではHOME≫2006年XX月の記事と表示されます。検索結果のページ(http://○○.blog.shinobi.jp/Search/)では、HOME≫検索した文字の検索結果と表示されます。注:検索した文字が強調される(背景色が付くなど)は、また別の指定です。コメントの編集ページ(http://○○.blog.shinobi.jp/Edit/記事番号/コメント番号/)ではHOME≫コメント編集中となります。注:ただし、テンプレートによっては記事本文やサイドメニューなどをコメント編集のページに表示させないものもあります。その場合は、この部分を削除するなり、ご自分でカスタマイズしてください。Leaf(2)NinjaBLOG(17)プレビュー用記事(6)新規テンプレいじり(17)[テンプレート]未定(0)■Search■About●このブログについて忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。_)ペコリなお、このブログで実験もしています。常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。→こちらは記事の内容を下に移転&閉鎖しました。Blogがメインブログになってます。night-・・・現在作成中のメインHP●リンクについてこのブログはリンクフリーです。解像度:1024*768●FireFox私が普段利用しているブラウザ。Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪ダウンロードは▼からどうぞ●Pingoo!忍者ブログのPing送信先は10件まで。それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。29■CM&TB●コメントパンくずナビをつけるMichalexcire⇒(01/18)パンくずナビをつけるViktorianitemY⇒(01/17)コメントや最新記事にNew&Upマークをつけるkirara⇒(04/06)しばらく休止いたします。photo[ブログ]今日もいろいろあったんよ。■Thanksテンプレートを作成するに当たってよく利用させていただいているサイト様です。■QRcodeQRコードをクリックするとメールフォームが開きます。メールフォームでPCから携帯にこのブログのURLを送ることができますもし、携帯電話で表示されきれない~とご不満の方はこちらのアプリを導入してみることをお勧めします。HTML4.01lかXHTMLか(07/21)ページ別のアクセス解析の設置法(06/14)カテゴリーを画像に変更する。○忍者ブログで共有化中のテンプレ●Alternation-緑×白-記事番号で背景色が交互に変わるちょっとおもしろテンプレ。Leaf初の携帯用テンプレート。さわやかな感じに仕上げてみました絵文字使用。トップページにカテゴリー表示アリ。●ブルーチャイナ涼しげなチャイナ風左右メニューテンプレ。「China」の色違いのような感じですが、配置は違いますのでご注意ください。※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。⇒ピンクチャイナ●Gray2blockノート風テンプレ「Gray」の2カラム版です。●Chinaかわいい系の3カラムテンプレート。同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。⇒China-BlueVer-●Gray灰色のノート風罫線テンプレ。追記開閉式の3カラムです。●JapnBlueサッカー日本代表ユニフォームなテンプレ。※このテンプレには2カラムバージョンもあります。なしの5ブロックテンプレ。Alpha.忍者ブログ[PR]。