忍者ブログ

Customize in Ninja Blog

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

2017.07│ 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 31

[PR]

×

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

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

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

サンプル▼

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

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

まずは変化させるスタイルシートを2つ用意します。
Ninjaブログの通常テンプレートのEntryInnerBlockというclass指定で指定される記事部分を切り替えることにします。
(サンプルに挙げたテンプレートは違うclass指定を使用してます。)
/*記事表示部分の背景や余白等の設定*/
.EntryInnerBlock {
width:500px;
margin: 0px 0px 0px 0px ;
padding:0px;
text-align:left;
background-color:#99CCFF;
}
.EntryInnerBlock2 {
width:500px;
margin: 0px 0px 0px 0px ;
padding:0px;
text-align:left;
background-color:#FFCCFF;
}

通常のスタイルはEntryInnerBlockですが、EntryInnerBlock2としてもうひとつスタイルを指定しました。見て分かると思いますが、背景色の色が水色桃色になるように指定してあります。

スタイルシートが用意できたら、次はHTMLにjavascriptを組み込みます。
HTMLから次の部分を探します。
<div class="EntryInnerBlock">
この部分を▼のようなスクリプトに書き換えます。
<script type="text/JavaScript">
<!--
if(<!--$entry_no--> % 2 == 0) document.write('<div class="EntryInnerBlock">');
if(<!--$entry_no--> % 2 == 1 || <!--$entry_no--> % 2 == 1/2) document.write('<div class="EntryInnerBlock2">');
// -->
</script>
<noscript><div class="EntryInnerBlock"></noscript>

水色の部分は、背景色を水色にするスタイルシートを組んでいる部分です。
意味としては、記事番号を2で割り、余りが0であればEntryInnerBlockというclassを表示するという意味になります。
また桃色の部分は、背景色を桃色にするスタイルシートを組んでいる部分で、意味は、記事番号を2で割ったときの余りが1かもしくは2分の1であったときはEntryInnerBlock2というclass指定を表示するという意味になります。
最後に青色で表示している部分はjavascriptがOFFであった場合にはこのスタイルを指定するという意味になります。

これをそのまま忍者の通常テンプレートに使用したサンプル画像が以下のものになります。

共有テンプレートでは背景色に白(#ffffff)と薄い緑(#f7fff0)を指定していますが、分かりやすいようにはっきりした色をここでは使いました。

応用編

もし3つを切り替えるとすればこうなります。
.EntryInnerBlock3 {
width:500px;
margin: 0px 0px 0px 0px ;
padding:0px;
text-align:left;
background-color:#FFFFFF;
}
まずは上のように背景色が白のスタイルをさらにひとつ追加しておきます。
そしてスクリプトは次のようになります。
<script type="text/JavaScript">
<!--
if(<!--$entry_no--> % 3 == 0) document.write('<div class="EntryInnerBlock">');
if(<!--$entry_no--> % 3 == 1 || <!--$entry_no--> % 3 == 1/3 ) document.write('<div class="EntryInnerBlock2">');
if(<!--$entry_no--> % 3 == 2 || <!--$entry_no--> % 3 == 2/3 ) document.write('<div class="EntryInnerBlock3">');
// -->
</script>
<noscript><div class="EntryInnerBlock"></noscript>

これを忍者の新規テンプレートに当てはめたプレビューがこれ▼


いろいろ応用方法はあると思います。記事タイトルを入れ替えても良いと思いますし。
ただ、難点はあくまで記事番号に基づいているってところでしょうか?
非公開の記事があったり、カテゴリーページで記事番号が混ざってるとあんまり意味がないのです(^-^;)

使おうと思われた方はテキトーに使ってください♪
変なところとかありましたらこの記事にコメントください<(_ _)>
PR
*COMMENT-コメント-
*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
06

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