JavaScriptで文字が流れるスクリプトのソースを見つけた。
以前に紹介した1行ニュースを右から左へながすやつ。
ひな型ソースとしての認識で自分なりに手を加えればと思います。
ソースが載せてあるサイトは以下です。
JavaScriptを学習してないAfroもできるほど簡単に説明されてますが手を加えるとなるとそれなりの知識は必要っぽい。
WordPress Defaultテーマで手順と説明
/wp-content/themes/defaultディレクトリのheader.phpファイルを開きBODYタグの編集になります。
①BODYタグの編集
<BODY onload="setInterval('mess()',1000)" bgcolor="#b9b973" text="#660000">
同じくheader.phpファイルの最後の行にある
</div> <hr />
の後に
②ソース本体
<SCRIPT language=JAVASCRIPT>
<!--
coment = "このように文字が流れます。";
mojisuu = 0;
TIME= 0;
if(navigator.appName=="Microsoft Internet Explorer"){
a=1;
}
else{
a=2;
}
function mess()
{
moji=" "+coment;
document.test.oneline.value =moji.substring(mojisuu+=a,moji.length+1);
if (mojisuu>moji.length) mojisuu = 0;
clearTimeout(TIME);
TIME = setTimeout("mess()",100);
}
// -->
</SCRIPT>
を追加。
続けて以下のフォームも追加
③流れる文字のフォーム
<FORM name="test"><BR> <INPUT size="45" type="text" name="oneline"></FORM>
少し手を加えるとすれば
先頭文字からでない修正として
②ソース本体
moji=" "+coment;
スペースを増やしてみる。
流れるフォームの幅を広げるには
③流れる文字のフォーム
size="45"
の値45を大きくする（②ソース本体のスペースも増やす必要がでてくるかも）
流れるフォームの位置
単純にcenterタグを使って③流れる文字のフォームを
<center><FORM name="test"><BR> <INPUT size="85" type="text" name="oneline"></FORM></center>
とするとか。
さらに手を加えて②ソース本体を別ファイルにしてしまう場合
②ソース本体の一部
<!--
coment = "このように文字が流れます。";
mojisuu = 0;
TIME= 0;
if(navigator.appName=="Microsoft Internet Explorer"){
a=1;
}
else{
a=2;
}
function mess()
{
moji=" "+coment;
document.test.oneline.value =moji.substring(mojisuu+=a,moji.length+1);
if (mojisuu>moji.length) mojisuu = 0;
clearTimeout(TIME);
TIME = setTimeout("mess()",100);
}
// -->
をtest.jsファイルとして保存しWordPressのルートディレクトリにアップロード。
③流れる文字のフォームに少しソースを追加で
<script type="text/javascript" src="test.js"></script> <center><FORM name="test"><BR> <INPUT size="85" type="text" name="oneline"></FORM></center>
ソース本体をtest.jsファイルとすることでheader.phpファイルはスッキリするかも。
横型カレンダーの設置のときにも思ったんですが
WordPress Defaultテーマはヘッダーとボディ部分のイメージが分かれてて
こういう編集はやりやすいです。
っでAfroも使ってるWPTP-Chocolateテーマや
ヘッダーとボディ間にdivタグなどでスタイルがハシゴしてたりするテーマだと
横型カレンダーの設置その2でやったような
デザインが崩れる境目を修正する必要があると思います。
WPTP-Chocolateテーマに設置する場合
/wp-content/themes/wptp-chocolateディレクトリのheader.phpファイルを編集するのは同じ。
①BODYタグの編集も同じく。
②ソース本体はtest.jsファイルでやることにします。
③流れる文字のフォームで同じくheader.phpファイルに追加するだけでは
ヘッダーとボディ部分が引き裂かれてデザインは崩れてしまいます。
そこでフォームのバックグラウンドの画像をスタイルシートで指定してやります。
③流れる文字のフォーム
<div id="bodyaddsbg"><script type="text/javascript" src="test.js"></script> <FORM name="test"><BR> <INPUT size="85" type="text" name="oneline"></FORM></div>
④スタイルシートの編集
/wp-content/themes/wptp-chocolateディレクトリにあるstyle.cssファイルの最後の行に
#bodyaddsbg {
text-align:center;
float: left;
width: 922px;
background: url(images/content.jpg);
position: relative;
}
を追加です。
ほとんどのテーマはこういった方法で設置できる気がします・・・。
設置参考としてはAfroの別サイトでやってます
ただしテーマがころころかわったり、プラグイン削除されてたりするかも。
