スクリプト編

Javscriptを書くときの注意点

特定のページ内だけ有効にするとき
- #beforescriptプラグインを使用する
  編集画面で以下のように書くと、 headタグの間にscriptが入ります。
```
#beforescript{{

この中にjavascriptのソースを書く

}}
```
- #html プラグインを使用する
  スクリプトを使用するページに、必要な場所に、 #htmlプラグインで指定してください。
```
#html{{
<script language="javascript">

この中にjavascriptのソースを書く

</script>
}}
```

全部のページにスクリプトを入れるとき
「サイト情報の設定」の「その他のタグ」のところに入れます。このときは、スクリプトのソースだけを書いてください。最初の #beforscript{{ と最後の }} は不要です。

イベントが必要なとき
<body onload="javascriptの関数">　イベントが必要な場合は、編集画面で以下のように記述します。
```
#html{{
<script language="javascript">
window.onload=呼び出すjavascript関数名();
</script>
}}
```

No.S01 カウントダウン表示したい　[☆]

イベントの開催まで、あと何日といったことを自動で表示してくれるスクリプトです。編集画面で適当な場所に入れてください。
c = new Date("January 1,2011");　で指定している基準日を変更してください。

#html{{
来年の正月は　2011年1月1日(土)です。<br />
<span style=color:blue;font-size:1.8em;>
<script language="JavaScript">
date = new Date();
c = new Date("January 1,2011");
rest=Math.floor((c.getTime()-date.getTime())/1000/3600/24);
document.write("今年もあと残り "+rest+"日です。");
</script></span>
}}

例）

来年の正月は　2011年1月1日(土)です。

▲トップへ戻る

No.S02 表示のたびに異なる画像を表示したい　[☆☆☆]

以下の方法でページを開く度に違う画像を表示できます。Javascriptを使用します。
このスクリプトは、画面表示する時に３個の画像のうちどれかを表示します。
初心者には難しいと思いますので、自信のない人はQHMに慣れてからやったほうが良いと思います。
QHMで動作確認していますが、自己責任でお願いします。
データのバックアップを取ってから行ったほうが安心です。

ページを更新すると以下の画像が変わります。

手順

１．画像を用意しSWFUでアップしてください。
　こののスクリプトは３個のファイルをランダムに表示します。
　以下の名前にしてください。

topimage1.jpg
topimage2.jpg
topimage3.jpg

数を増やしたいときは、スクリプトの画像数を増やして、画像もその数だけ用意してください。

このスクリプトを改造すれば、曜日毎に違う画像を表示することなども可能です。

２．以下のスクリプトをコピーして、サイト情報の「その他のタグ」に入れてください。
　画像の説明は適当に変えてください。

<script language="JavaScript">
function Random_ImageView()
{
var image_number ;
var max_imagenum =3 ; //画像数
var image_array =new Array(max_imagenum ) ; //配列を生成
var ram_number ;
var expd =".jpg" ; //画像拡張子
var judge_num = 1.0/max_imagenum ;

for(var i=0 ;i <max_imagenum ;i++ )
{
image_array[i] = "swfu/d/topimage" + (i+1) ;
}

ram_number = Math.random() ;
image_number = Math.floor( ram_number/judge_num ) ;

document.write("<img src=\"" + image_array[image_number] + expd +"\" alt =\"画像の説明\" >") ;
}
</script>

３．編集で以下のスクリプトをコピーしてコンテンツ領域に入れてください。

#html{{
<script language="JavaScript">
Random_ImageView()
</script>
}}

▲トップへ戻る

No.S04 日付や曜日を表示したい

QHMには、日付を表示するプラグインはたぶんありません。Javascriptで表示するのが一番簡単かと思います。
編集画面で以下のスクリプトを表示したい場所に書いてください。
文字サイズや色を変更したい場合は、CSSでスタイル指定する必要があります。<span>の中に指定してください。

例：曜日だけ文字を赤　サイズを22pxに設定

#html{{
<script type="text/javascript">
<!--
weeks=new Array("日","月","火","水","木","金","土");
today=new Date();
y=today.getFullYear();
m=today.getMonth()+1;
d=today.getDate();
w=weeks[today.getDay()];
document.write("今日は、<span>",y,"<\/span>年");
document.write("<span>",m,"<\/span>月");
document.write("<span>",d,"<\/span>日");
document.write("<span style=\"color:red; font-size:22px;\">",w,"<\/span>曜日です。");
-->
</script>
}}

▲トップへ戻る

ご意見箱

皆様のご意見をお待ちします。

とっても助かりました。他のメニュータイトルも色々参考にさせていただきますね。ありがとうございました。 -- OH!QHM 2010-04-22 (木) 22:07:25
お役に立ててなによりです。他のコンテンツもよろしくお願いします。 -- tomzo 2010-04-24 (土) 00:03:08
素晴らしいアイデアの記述の仕方に感心し、利用させて頂いております。さて、現在、創立〇〇年というスクリプトに変更しておりますが、なかなか思うように決まりません。色々なサイトで検索するのですが、カウントダウンは結構有るのですが、あるときから〇年というものがありません。カウントダウンの変更で対応できそうな感じはしますが、どうかご教示下さい！ -- yumeyutaka 2010-05-05 (水) 13:00:53
yumeyutaka さん　実は私はあまりJavascriptは得意ではありません。よそのサンプルを見ながら、いろいろと修正を加えたりして自分なりのスクリプトを作ったりしています。ご希望のスクリプトは時間的にも今直ぐにはできそうもありません。時間ができましたら挑戦するかもしれません。
計算式は　経過年=（今日 - 基準日）/365　　になると思います。余りは切り捨て。うるう年の考慮などを考えるとちょっと面倒かなと思ったりしています。 -- tomzo 2010-05-07 (金) 22:43:28
ヒントをありがとうございます！幾つもの課題をピックアップし、ランダムに処理していってますが、なかなか素人には難しい事ばかりですね！日々少しずつでも改善できたらよいのかなあと思いながら挑戦を続けています。今後とも宜しくお願い致します！ -- yumeyutaka 2010-05-10 (月) 22:53:25

選択肢	投票
たいへん役に立った	22
ちょっとだけ役に立った	4
普通	2
あんまり	0

QHM (Quick Homepage Maker) ユーザのためのTips集。小技から大技までテクニック満載