忍者ブログ

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ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

プラグインタイトルを虹色の文字で

文字色を七色に変化させるスクリプトを使って何かできないかな~と思案したもの。

文字色サンプル▼

実際のスクリプト▼

<script language="JavaScript" type="text/javascript">
// 変化させる文字を指定しています。独自タグ使用可。
myChengeFont= "ここに入力された文字が虹色に変化します。"
// 変化する色コードを指定しています。数の増減も可。
myColor = new Array("#ff9999", "#ffcc99" , "#ffff99" , "#ccff99" , "#99ff99" , "#99ccff" , "#cc99ff");
for (i=0; i < myChengeFont.length; i++) {
    myStyle = myChengeFont.charAt(i);
    myNum = i % myColor.length ;
    document.write(myStyle.fontcolor(myColor[myNum]));
    }
</script>

赤い字で表示されたところに入力された文字が虹色に変化します。

とまぁこれはどこにでもある文字色の虹色表示のスクリプトなのですが、これを利用すると画像を使わなくてもカラフルなテンプレができるかな~と思いまして

たとえば赤い文字のところを<!--$g_title-->として、テンプレートの<!--$g_title-->を探してjavascriptごと置き換えればブログタイトルが虹色になります。
リンクの関係上ブログタイトルで使うのはちょっと難しいかもですが(^^;)

お勧めはプラグインのタイトル。赤い文字のところを<!--$plugin_title-->としてjavascriptを作ります。
実際に入れてみたのが▼

<script language="JavaScript" type="text/javascript">
myChengeFont= "<!--$plugin_title-->"
myColor = new Array("#ff9999", "#ffcc99" , "#ffff99" , "#ccff99" , "#99ff99" , "#99ccff" , "#cc99ff");
for (i=0; i < myChengeFont.length; i++) {
    myStyle = myChengeFont.charAt(i);
    myNum = i % myColor.length ;
    document.write(myStyle.fontcolor(myColor[myNum]));
    }
</script>
これをテンプレートのHTMLから<!--$plugin_title-->という部分を探して上のソース全部と置き換えます。
そうすると一番上にある文字色サンプルのようにプラグインタイトルの文字色が虹色変化して表示されるようになります。
虹色として指定している色を変えたり、変化させる色の数を変えるともっと楽しめるかも♪
いつかどっかでつかいたいな~と思ってます。
PR

記事番号で背景色を変化させる

Alternation-緑×白-で使用した背景色を記事番号ごとに交互に変化させるスクリプトです。

サンプル▼

…このテンプレートの記事部分とプラグイン部分はその番号ごとに交互に背景色が変化してます。

交互につまり、切り替えるスタイルシートは2つになってますが、スクリプトの変更でいくつでもスタイルを付け加えることができます。

DOCTYPE宣言 HTML4.01lかXHTMLか

HTML4.01lでテンプレを作るかXHTMLでテンプレを作るかいつも迷ってます。
一応、全てXHTMLのほうで作ってあります。

そのため、プラグインででてくるソースなどがHTMLのままででてくるので少々アンバランスなことになってます。

ただ、記事内の改行や、HTMLエディタで作られるソースはおおむねXHTML仕様ということですので、ブログのメインは記事だろうと私はは思ってるのでしてます。
(おおむねというのが微妙なトコですが・・・)

このあたりは使う方の好みだと思うのですが、忍者ブログの通常のDOCTYPE宣言は下のようになってます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
私が使っているのはこれ▼
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
前は、<?xml version="1.0" encoding="UTF-8"?>の部分がブログ上に表示されてしまうというアクシデントがあったりしたので▼のような宣言を使ってたときもありました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
こちらはいわゆるURL付きというもの。
デザインを崩さずある程度やるのならばこのあたりが良いのではないでしょうか?

ちなみに記事内の改行を自動で入れている場合<br />が入ります。
これが連続するとAnother HTML-lint gatewayなどでチェックするとエラーになってしまいます。
回避したいのならば、<br />ではなく<p>~</p>を利用して文章を表現するといいです。
ただし、自力で入力する必要がありますが。(めんどくさいので私はやってません

カスタマイズする際にどーしても気になる、という方はいろいろ試してみてください。

ページ別のアクセス解析の設置法

しばらくまえからアクセスカウンターとアクセス解析が1クリックで設置できるようになってます。
(例によって気づくの遅いんですが)
カウンターは初期のものだと手裏剣のカウンターになってる見たいです。
アクセス解析はというと、プラグインのひとつとして追加される仕様のようです。

でも、アクセス解析ってプラグインにふつーは記述しないのがほとんどだと思います。
サイドなどにアクセス解析ってコーナーがでても、テンプレ上のその部分には何も表示されないってことになっちゃいますから。
当然、テンプレートに記述しなおすのが通常のように思います。

で、どうせテンプレートに記述しなおすならページごとに解析をするように直したほうがより解析っぽくなります。
さすがに記事ひとつひとつを解析することは難しいですが、トップページ、カテゴリーページ、詳細記事ページ、日付ページ、メインページ、検索結果のページの6つに分けることぐらいなら割と簡単です。
どうせなら、ちょっとひと手間かけてみませんか?

はじめてアクセス解析を設置するという方にオススメです。(・・・たぶん。)

カテゴリーを画像に変更する。

プラグインをツリー化するとどうしても記事内のカテゴリーの表示が「[大カテゴリー]小カテゴリー」となってしまい[かっこ]でくくられている部分が目障りだな~と思ってしまいます。

サイドのプラグインではツリー化してるので気にならないのですが、記事部分はツリー化してないので気になる・・・

ということで、カテゴリーを画像に変えてしまえば目障りじゃなくなるのかな?と思い実行。


追記の開閉

追記に開閉をさせる方法はいくつかありますが、こちらが一番分かりやすいと思います。

追記部分を折りたたむお気楽極楽ブログ

上のサイト様以外でも、説明をされているところは数多くあります。
参考サイトをたどってみてもホントのでどころはよくわからないので、作者不詳ってことで

上のサイトではMTでの説明になってます。
スクリプトだけそのままお借りし、MTのタグを忍者ブログのタグ(参考:独自構文解説)に置き換えれば、わりと簡単に可能です。

なお、タグの変え方が分からないという方は、ニンブロラボ.様が同じスクリプトをかなり詳しく解説してます。(参考元は違うみたいですが)
よろしければ参考にしてください。

パンくずナビをつける

まずは、パンくずナビって何?って方。

パンくずナビゲーションというのは、サイト上でディレクトリを下がっていくときに、その階層の上層やトップに戻れるようにする、いわばサイトの縦型のナビゲーションです。

そのページがディレクトリのどこに位置するのかひと目で分かるという便利なもの。

これをNinjaブログでも再現してみました。

すでに共有化したテンプレには積んでおきました。
ソース自体はそこから持ってってもけっこうです。(下にもあります)

どういう風に表示されるかだけちょっと説明しておこうかと。
■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