CriCri
クリエイティブになりたいクリクリ工房
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
画像のループ文
今回は猫テンプレで使用している、画像のループ文です。
数種類あるタイトルの画像が繰り返して表示されます。
完成品を探したけどそのまま使用できるものがなくて、改変や切り張りをしました。
このスクリプトは<head>と</head>の間、<title></title>の次に入れます。
これは記事のタイトル用に作ったものです。
プラグインの場合は"EntryTitle"のところを"PluginTitle"に変えてください。
ピンク色の箇所は画像の数です。画像の数をここに入れてください。
これで、クラスのEntryTitleがEntryTitle1、EntryTitle2というように変化していきます。
そしてJava Script をページの読み込み時に行使させるために、<body>に上記の緑色の部分を加えます。
あとCSSに画像を入れますが、0から数字が始まるので、EntryTitle {}、EntryTitle1 {}、EntryTitle2 {} というように番号を付けて、画像の数だけ指定をしください。
JavaScript が効かないブラウザは、最初のEntryTitle だけを表示します。
プラグインのタイトルの場合はPluginTitle {}、PluginTitle1 {}、PluginTitle2 {}といように番号を付けてください。
詳しい使用例は猫テンプレのソースを見ていただくとはっきり分かると思います。
機能の保障はしませんので、自己責任でお願いしますね。
数種類あるタイトルの画像が繰り返して表示されます。
完成品を探したけどそのまま使用できるものがなくて、改変や切り張りをしました。
このスクリプトは<head>と</head>の間、<title></title>の次に入れます。
<head>
・
・
・
<script type="text/javascript">
<!--
function changeBack(){
j=0;
divObj = document.getElementsByTagName("div");
if(!divObj)return;
for(i=0;i<divObj.length;i++){
if(divObj[i].className=="EntryTitle"){
if (j%3) {
divObj[i].className = "EntryTitle" + (j%3)
}
j++;
}
}
}
-->
</script>
</head>
<body onload="javascript:changeBack();">
これは記事のタイトル用に作ったものです。
プラグインの場合は"EntryTitle"のところを"PluginTitle"に変えてください。
ピンク色の箇所は画像の数です。画像の数をここに入れてください。
これで、クラスのEntryTitleがEntryTitle1、EntryTitle2というように変化していきます。
そしてJava Script をページの読み込み時に行使させるために、<body>に上記の緑色の部分を加えます。
あとCSSに画像を入れますが、0から数字が始まるので、EntryTitle {}、EntryTitle1 {}、EntryTitle2 {} というように番号を付けて、画像の数だけ指定をしください。
JavaScript が効かないブラウザは、最初のEntryTitle だけを表示します。
プラグインのタイトルの場合はPluginTitle {}、PluginTitle1 {}、PluginTitle2 {}といように番号を付けてください。
詳しい使用例は猫テンプレのソースを見ていただくとはっきり分かると思います。
機能の保障はしませんので、自己責任でお願いしますね。
[1回]
使用 Java Script
Java Script はお借りしているものと、自前工作品があります。
お借りしているのは下記のとおりです。サイトリンクはプラグインのテクニカルリンクにあります。
他のカスタマイズ用スクリプトも紹介されてていますので、参考にしてください。
私の工作品は、あちこちのサイトのスクリプトを参考にしています。
ニンブロラボ様
Leigeber様
►ドロップダウンメニュー (IE8でバグが発生しました)
Java Script ライブラリー JQuery
►ドロップダウンメニュー（Droppy）
►ドロップダウンメニュー（multilebel Dropdown menu）
自前工作品（保障はしませんが、使用はご自由に）
►画像のループ文
►プラグインの切り替え
お借りしているのは下記のとおりです。サイトリンクはプラグインのテクニカルリンクにあります。
他のカスタマイズ用スクリプトも紹介されてていますので、参考にしてください。
私の工作品は、あちこちのサイトのスクリプトを参考にしています。
Customize in Ninja Blog様
►プラグイン開閉
ニンブロラボ様
►追記開閉
Leigeber様
►ドロップダウンメニュー (IE8でバグが発生しました)
Java Script ライブラリー JQuery
►ドロップダウンメニュー（Droppy）
►ドロップダウンメニュー（multilebel Dropdown menu）
自前工作品（保障はしませんが、使用はご自由に）
►プラグインの切り替え
[0回]
使用HTMLと表示確認データ
2009年9月 更新
2011年7月 更新
表示確認環境は次の通りです
各ブラウザはIE6、IE7を除いて、常に更新しています。
古いバージョンでのサポートはしていませんので、お使いのブラウザを常に最新版にされることをお勧めします。
忍者のプレビューはXHTML+Safari の条件が重なると表示崩れを起こすバグがあるので、Macご使用の方はFirefox で表示確認されることをお勧めします。
2011年7月 更新
表示確認環境は次の通りです
記述HTML : XHTML 1.0 Transitional
OS : Windows 7、Windows XP、Windows 用 Mac
ブラウザ : IE6、IE7、IE8、IE9、Firefox、Opera、Safari、Google Chrome
モニター : 1024×768、1440×900
各ブラウザはIE6、IE7を除いて、常に更新しています。
古いバージョンでのサポートはしていませんので、お使いのブラウザを常に最新版にされることをお勧めします。
忍者のプレビューはXHTML+Safari の条件が重なると表示崩れを起こすバグがあるので、Macご使用の方はFirefox で表示確認されることをお勧めします。
[1回]
テンプレートを左寄り、右寄り、または中央にする
猫テンプレは左寄りですが、中央に持ってきたい方のために説明をいたします。
また、中央にあるテンプレを左右に寄せるのも簡単ですので、ついでにここで説明したいと思います。
これはCSSを変更しなければなりません。
まず、テンプレート設定 / 編集ページに入り、変更したいテンプレートの右からテンプレート編集ページに入ります。
ページの右下のCSSを少しスクロールして、「メインブロックの設定」を探します。
そこには下のような指定がしてあります。
こうすると、テンプレは中央に来て、なおかつ右下の猫が見えます。
右寄りにしたい場合は下記のようにしてください。
指定の仕方は簡単ですので、カスタマイズをされるときに活用してください。
また、中央にあるテンプレを左右に寄せるのも簡単ですので、ついでにここで説明したいと思います。
これはCSSを変更しなければなりません。
まず、テンプレート設定 / 編集ページに入り、変更したいテンプレートの右からテンプレート編集ページに入ります。
ページの右下のCSSを少しスクロールして、「メインブロックの設定」を探します。
そこには下のような指定がしてあります。
「左寄せにする指定」
#mainBlock {
width:780px;
margin:0px auto 0px 0px; （「上」「右」「下」「左」の順番で指定する）
padding:0px 10px;
text-align:center;
background-color:#FFF;
}
これを中央に持ってきたい場合は次のように変更します。
「中央にする指定」
「中央にする指定」
#mainBlock {
width:780px;
margin:0px auto; （上下と左右が同じ場合の指定で「上下」「左右」の順）
padding:0px 10px;
text-align:center;
}
猫テンプレは右下にもう一匹猫がいるので、背景色のbackground-color:#FFF;を取ります。こうすると、テンプレは中央に来て、なおかつ右下の猫が見えます。
右寄りにしたい場合は下記のようにしてください。
「右寄りの指定」
#mainBlock {
width:780px;
margin:0px 0px 0px auto;
padding:0px 10px;
text-align:center;
background-color:#FFF
}
完全に中央にするのではなく左から少しだけ離したい場合は、「左寄せの指定」を使って最後の「左」に希望するピクセルを指定してください。その分だけ左側から離れていきます。指定の仕方は簡単ですので、カスタマイズをされるときに活用してください。
[0回]
ミニ猫だらけ
2009年1月26日 配布
2月16日 記事部分にランキングバナー用フッター追加
2010年6月15日 拍手機能に対応しました
9月15日 新フッターに対応。コメント投稿者のメールアドレスを非公開にしました。
表示確認データはテクニカルデータを参照してください。
プラグイン2+4は折りたたみ式です。
横カレンダー右下の肉球はHOMEやAdminなどのリンクです。マウスを上に持ってくると、リンクの説明が出ます。
プラグインは簡単に左右の入れ替えができます。カスタマイズのこちらを参照してください。
テンプレートを中央に持ってきたい方はこちらを参照してください。
SEO・検索エンジン最適化の処理をしました。GoogleやYahooなどの検索エンジンに引っ掛かりやすくなっています。ブログ管理ページ左側の「便利ツール」にある「検索エンジン登録」をすると確率があがります。
記事の下にランキング用バナー設置個所があります。バナーや広告を貼り付けたい方はこちらを参照してください。
更新前：コメント投稿者名に付くメールアドレスリンクの色は、文章と同じです。マウスオーバーでリンクの有無を確認してください。詳しい説明はこちらにあります。
更新後：コメント投稿者のメールアドレスは非公開です。アドレスの有無は、コメント一覧ページで確認してください。
画像はもずねこ様よりお借りしています。画像がお気に召しましたら、もずねこ様のサイトよりオリジナルをダウンロードしてください。
素材の加工、他での使用は厳禁です。テンプレートご使用の際には利用規約を一読ください。
ブログパーツは180px (ピクセル) 以下のものを使用してください。
画像をクリックするとプレビューが見られます
2月16日 記事部分にランキングバナー用フッター追加
2010年6月15日 拍手機能に対応しました
9月15日 新フッターに対応。コメント投稿者のメールアドレスを非公開にしました。
表示確認データはテクニカルデータを参照してください。プラグイン2+4は折りたたみ式です。横カレンダー右下の肉球はHOMEやAdminなどのリンクです。マウスを上に持ってくると、リンクの説明が出ます。プラグインは簡単に左右の入れ替えができます。カスタマイズのこちらを参照してください。テンプレートを中央に持ってきたい方はこちらを参照してください。SEO・検索エンジン最適化の処理をしました。GoogleやYahooなどの検索エンジンに引っ掛かりやすくなっています。ブログ管理ページ左側の「便利ツール」にある「検索エンジン登録」をすると確率があがります。記事の下にランキング用バナー設置個所があります。バナーや広告を貼り付けたい方はこちらを参照してください。更新前：コメント投稿者名に付くメールアドレスリンクの色は、文章と同じです。マウスオーバーでリンクの有無を確認してください。詳しい説明はこちらにあります。更新後：コメント投稿者のメールアドレスは非公開です。アドレスの有無は、コメント一覧ページで確認してください。
画像はもずねこ様よりお借りしています。画像がお気に召しましたら、もずねこ様のサイトよりオリジナルをダウンロードしてください。素材の加工、他での使用は厳禁です。テンプレートご使用の際には利用規約を一読ください。ブログパーツは180px (ピクセル) 以下のものを使用してください。画像をクリックするとプレビューが見られます
[0回]
カレンダー
| 04 | 2024/05 | 06 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 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 |
AD
PR
ブログ内検索
素材サイト様
White Board様
妙の宴様
もずねこ様
押し花とアイコン様
petit sozai emi様
幕末維新新選組様
The Heart of Eternity 様
Crambon様
⇒DragonArtz Design 様
妙の宴様
もずねこ様
押し花とアイコン様
petit sozai emi様
幕末維新新選組様
The Heart of Eternity 様
Crambon様
⇒DragonArtz Design 様
Firefoxを支援しています
管理人はFirefoxの愛好者です。Internet Explorer は大嫌い。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。