ブラウザのタブに表示されるWEBページのタイトルをスクロールさせる方法

ブラウザのタブに表示されるWEBページのタイトルをスクロールさせる方法

ブラウザのタブに表示されるWEBページのタイトルをスクロールさせる方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加

WEBサイトを開くと、そのページの<title>タグがブラウザのタブに表示されます。このタブに表示されたタイトルをスクロールしながら動くようにする方法を紹介いたします。

動きについては以下デモページをご参照ください。

デモページを見る

スポンサードリンク

ブラウザのタブに表示されるページのタイトルをスクロールさせる方法

タイトルをスクロールさせるには、以下のようなスクリプトを仕込んであげればOKです。厳密には、タブに表示させるタイトルもスクリプト内で指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onLoad="scrltitle()">
<p>タブをご覧くださいませ</p>
<script language="JavaScript">
var scrl = " 動くよー!!!!! ";
function scrltitle() {
scrl = scrl.substring(1, scrl.length) + scrl.substring(0, 1);
document.title = scrl;
setTimeout("scrltitle()", 300);
}
</script>
</body>
</html>

scrltitle()でタイトルをスクロールするように定義し、bodyがロードされた時に実行しています。

「動くよー!!!!!」の部分がタブに表示されるタイトルになりますので、この部分を自サイトに合わせて変更してください。<title>タグにページのタイトルが記述されていても、タブにはscrlに入れたテキストが表示されます。

あとがき

自己満足でしかないですが、サイトに面白い仕掛けをしてみようかなという方は、参考にしていただければ幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。