はてなブログで JavaScript のスライド表示
前回のスライド表示のソース(要点のみ):
<p> <!-- ここに画像を表示(0.JPG は初期値の画像) --> <img name="hiyo_dori_slide" src="http://domain.jp/usr-name/image/hiyo-slide-550px/0.JPG" alt="ヒヨドリ" width="550" height="387"> </p> <p>…記事…</p> <!-- 記事本文の最後に JavaScript コードを記述 --> <script type="text/javascript"> my_num = 0; function changeImage() { ++my_num; my_num %= 22; document.hiyo_dori_slide.src = "http://domain.jp/usr-name/image/hiyo-slide-550px/" + my_num + ".JPG"; } setInterval('changeImage()',1750); </script>
はてなブログでこんな風に記述するだけで OK。<head>~</head> 内ではなく、ブログの記事本文に記述しても一応表示できるようだ。これは HTML5 風の記述だが、読み込み時に自動的に xhtml 形式に変換される(はてなブログは xhtml 形式らしい)。
普通のブログでは head ブロックには記述できないし、onload で読み込むのも無理なので、これはありがたい。はてなブログでは『設定 - 詳細設定』で head ブロック内に追記が可能らしいが、1つの記事のためだけに head に記述するのもどうかな、と思うし…。
ただ、写真は『はてなフォトライフ』ではなく、自分のホームページ・スペースに置いた。はてなフォトライフの写真を使うとアップロード時にファイル名が変わってしまって面倒臭くなるので。写真は 0.JPG ~ 21.JPG の計22枚を用意している(剰余演算に反映)。
あと、ご覧の通り html 直入力なので…。そんで、ちゃんと表示できるようになるまでに、けっこう色々とハマったので、それを紹介しておきます。
- img 要素… id 属性ではなく、name 属性を使う(ブラウザ依存の問題?)
- img 要素… 画像サイズはブログ本文スペースの width 以内とする
- img 要素… 画像の拡張子は ".jpg" か ".JPG" かを正確に指定
- JavaScript… 変数名には - (ハイフン)は使わない(代わりに _ を使う)
- JavaScript… ブログ内で変数名が衝突しないように気を付ける
- name属性、id属性… ブログ内で名前が衝突しないように気を付ける
気を付けるべきは、こんなところかな。これでうちの環境では Firefox、Chrome、Edge で表示確認しました。ちなみに、コードは以下のサイトを参考にしました。↓
◆ スライドショー
我が家のスライドショー
http://www.scollabo.com/banban/java/jvsample_003.html