RSSはこちら

ブログテンプレートならHKD

ブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。すでに変にこだわって時間をロスしています。

更新休止のお知らせ

現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。 ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。
  • --⁄--⁄--(--)
  • --:--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告
  • 2011⁄06⁄15(Wed)
  • 18:05

ImageClockを二つ以上表示する方法

hutatu02.gif

ImageClockを二つ以上表示する方法の説明です。

詳しくは続きをどうぞ。
ImageClockをダウンロードして頂き、そしてプラグインの編集画面からHTMLの編集をクリック。
ダウンロードはこちらから。

hutatu01.gif

下に表示されたHTMLコードをコピペしてもう1つ同じ内容を作ります。
すると次のように同じ内容のコードが二つできます。

<script type="text/javascript" src="http://blog-imgs-29.fc2.com/h/k/d/hkdesign/swfobject.js"></script>
<script type="text/javascript">
var imageUrl = new Array(), fontColor1 = "", fontColor2 = "", boxColor1 = "", boxColor2 = "", boxColor3 = "", boxColor4 = "", borderColor = "", speed = "";

//画像の設定
//""内のURLをお好きなものに変更してください。
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage01.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage02.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage03.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage04.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage05.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage06.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage07.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage08.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage09.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage10.jpg");

//文字の色設定
fontColor1 = "FFFFFF";
fontColor2 = "CBFF00";

//上下左右から出現する矩形の色設定
//順番は、1:上 2:右 3:下 4:左
boxColor1 = "CBFF00";
boxColor2 = "FFFFFF";
boxColor3 = "CBFF00";
boxColor4 = "FFFFFF";

//外枠の色設定
borderColor = "CBFF00";

//画像切り替えのタイミング設定
//単位は秒
speed = "1";


var flashvars = {"imageUrl": imageUrl, "fontColor1": fontColor1, "fontColor2": fontColor2, "boxColor1": boxColor1, "boxColor2": boxColor2, "boxColor3": boxColor3, "boxColor4": boxColor4, "borderColor": borderColor, "speed": speed};
swfobject.embedSWF("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/imageClock.swf", "imageClockArea", "170", "120", "9.0.0", "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/expressInstall.swf", flashvars);
</script>
<div id="imageClockArea"></div>
<script type="text/javascript" src="http://blog-imgs-29.fc2.com/h/k/d/hkdesign/swfobject.js"></script>
<script type="text/javascript">
var imageUrl = new Array(), fontColor1 = "", fontColor2 = "", boxColor1 = "", boxColor2 = "", boxColor3 = "", boxColor4 = "", borderColor = "", speed = "";

//画像の設定
//""内のURLをお好きなものに変更してください。
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage01.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage02.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage03.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage04.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage05.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage06.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage07.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage08.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage09.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage10.jpg");

//文字の色設定
fontColor1 = "FFFFFF";
fontColor2 = "CBFF00";

//上下左右から出現する矩形の色設定
//順番は、1:上 2:右 3:下 4:左
boxColor1 = "CBFF00";
boxColor2 = "FFFFFF";
boxColor3 = "CBFF00";
boxColor4 = "FFFFFF";

//外枠の色設定
borderColor = "CBFF00";

//画像切り替えのタイミング設定
//単位は秒
speed = "1";


var flashvars = {"imageUrl": imageUrl, "fontColor1": fontColor1, "fontColor2": fontColor2, "boxColor1": boxColor1, "boxColor2": boxColor2, "boxColor3": boxColor3, "boxColor4": boxColor4, "borderColor": borderColor, "speed": speed};
swfobject.embedSWF("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/imageClock.swf", "imageClockArea", "170", "120", "9.0.0", "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/expressInstall.swf", flashvars);
</script>
<div id="imageClockArea"></div>


このままだと不十分なので、次の赤字の部分を見つけ出して変更してください。

<script type="text/javascript" src="http://blog-imgs-29.fc2.com/h/k/d/hkdesign/swfobject.js"></script>
<script type="text/javascript">
var imageUrl = new Array(), fontColor1 = "", fontColor2 = "", boxColor1 = "", boxColor2 = "", boxColor3 = "", boxColor4 = "", borderColor = "", speed = "";

//画像の設定
//""内のURLをお好きなものに変更してください。
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage01.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage02.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage03.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage04.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage05.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage06.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage07.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage08.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage09.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage10.jpg");

//文字の色設定
fontColor1 = "FFFFFF";
fontColor2 = "CBFF00";

//上下左右から出現する矩形の色設定
//順番は、1:上 2:右 3:下 4:左
boxColor1 = "CBFF00";
boxColor2 = "FFFFFF";
boxColor3 = "CBFF00";
boxColor4 = "FFFFFF";

//外枠の色設定
borderColor = "CBFF00";

//画像切り替えのタイミング設定
//単位は秒
speed = "1";


var flashvars = {"imageUrl": imageUrl, "fontColor1": fontColor1, "fontColor2": fontColor2, "boxColor1": boxColor1, "boxColor2": boxColor2, "boxColor3": boxColor3, "boxColor4": boxColor4, "borderColor": borderColor, "speed": speed};
swfobject.embedSWF("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/imageClock.swf", "imageClockArea", "170", "120", "9.0.0", "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/expressInstall.swf", flashvars);
</script>
<div id="imageClockArea"></div>
<script type="text/javascript" src="http://blog-imgs-29.fc2.com/h/k/d/hkdesign/swfobject.js"></script>
<script type="text/javascript">
var imageUrl = new Array(), fontColor1 = "", fontColor2 = "", boxColor1 = "", boxColor2 = "", boxColor3 = "", boxColor4 = "", borderColor = "", speed = "";

//画像の設定
//""内のURLをお好きなものに変更してください。
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage01.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage02.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage03.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage04.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage05.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage06.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage07.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage08.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage09.jpg");
imageUrl.push("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/sampleimage10.jpg");

//文字の色設定
fontColor1 = "FFFFFF";
fontColor2 = "CBFF00";

//上下左右から出現する矩形の色設定
//順番は、1:上 2:右 3:下 4:左
boxColor1 = "CBFF00";
boxColor2 = "FFFFFF";
boxColor3 = "CBFF00";
boxColor4 = "FFFFFF";

//外枠の色設定
borderColor = "CBFF00";

//画像切り替えのタイミング設定
//単位は秒
speed = "1";


var flashvars = {"imageUrl": imageUrl, "fontColor1": fontColor1, "fontColor2": fontColor2, "boxColor1": boxColor1, "boxColor2": boxColor2, "boxColor3": boxColor3, "boxColor4": boxColor4, "borderColor": borderColor, "speed": speed};
swfobject.embedSWF("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/imageClock.swf", "imageClockArea2", "170", "120", "9.0.0", "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/expressInstall.swf", flashvars);
</script>
<div id="imageClockArea2"></div>


変更箇所は2点。どちらもimageClockAreaからimageClockArea2に改名します。
これでOKです!


【解説】
まず一つ目の変更点(下のコード)はなにをしているかというと、HTMLのID要素"imageClockArea2"にImageClockを貼り付けなさいという命令をだしています。
swfobject.embedSWF("http://blog-imgs-29.fc2.com/h/k/d/hkdesign/imageClock.swf", "imageClockArea2", "170", "120", "9.0.0", "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/expressInstall.swf", flashvars);


そして二つ目の変更点(下のコード)はなにをしているかというと、ID要素"imageClockArea2"という空のdivボックスを用意しています。
<div id="imageClockArea2"></div>



つまり、2個目のImageClockを用意して、2個目をどこに表示させるのか名前を決めて指定してやればOKということになります。
3個表示させたかったら3個目のImageClockを作って、また名前を改名してやってください。
今回は例としてimageClockArea2としましたがお好きな名前でOKです。
ただしid属性の命名規則は守りましょう。

【サンプル】
最後に三つのImageClockを同時に表示したのを別ページに用意しました。
分かりやすくするため画像だけ変更しています。
こちらからどうぞ。
関連記事
スポンサーサイト
category
カスタマイズ > ImageClock
tag
カスタマイズ
genre
ブログ
theme
FC2ブログ共有プラグイン

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/137-f5be266f

検索フォーム

プロフィール

HKD TEMPLATE


Author:
 Hellow
mail:
 hkdesign.mail☆gmail.com
 ☆を半角@に変えてください。

Henni
Kodawaru
Design
略してHKD

ブログテンプレートならHKDにようこそ!
このサイトではFC2で使える共有テンプレートを配布しています。
サイトについての説明はこちらをどうぞ。

カテゴリ

アクセスランキング

[ジャンルランキング]
ブログ
1187位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
12位
アクセスランキングを見る>>

FC2カウンター

メールフォーム

名前:
メール:
件名:
本文:

アプリ紹介

google chrome拡張機能「high! like!」を作りました。
機能1:はてなハイクをサイト上に投稿できる
機能2:はてなハイク投稿時に同時にtwitterにも投稿する
詳しくは次のURLへお越しください
hk-factory
Googleウェブストア

プラグインギャラリー

ブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。

CastomCategory
CustomRssReader
ImageClock

テンプレートギャラリー

ブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。

動作環境について

テンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。もし、記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。

【Win】FireFox 3 / IE8 / IE7(*) / IE6(*) / Google Chrome
【Mac】FireFox 3.0(*) / Safari 3.0(*)
*マークがあるブラウザは手元に環境がないので、Adobe BrowserLabを使ってチェックしています。

Adobe BrowserLab
https://browserlab.adobe.com/

ライセンスについて

ライセンス形態はGPLライセンスをとります。
簡単に言うと次の4つです。
  • カスタマイズ・再配布など連絡なしに使用OK。
  • ただし、著作権表示は消したらダメです。
  • なんらかの損害が出た場合は自己責任です。
  • 再配布する場合、GPLライセンスが適用されます。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。