WordPress

ヘッダーにニュースティッカーを表示させる方法

ブログを訪問してくれた人に、ひとこと伝えたいことってありませんか?シンプルなニュースティッカーを表示する方法を紹介します。

JavaScriptを追加

コード

function ticker(){

$(‘#news li:first’).slideUp( function(){
$(this).appendTo($(‘#news’)).fadeIn();
});
}
setInterval(function(){ticker()}, 5000);

一番下の行の「5000」は、次のメーセージを表示するまでの時間です。

style.cssにコードを追加

コード

css.ticker {
width: 100%;
height: 30px;
overflow: hidden;
margin: 0;
padding-top: 5px;
background-color: #F2F2F2;
color: #333;
font-size: 16px;
list-style: none;
}

文字のサイズ、背景の色、高さ等は、自分のサイトに合わせて調整してください。

header.phpにHTMLを追加

HTML

<ul id=”news” class=”ticker”> <li>ここにメッセージ</li> <li>ここにメーセージ</li> </ul>

表示させたい場所に記述してください。

ABOUT ME
ねこのてそう
ねこのてそう
超記憶力の悪い、30代の引きこもり父さん。 死ぬまで楽しく生きるがモットー。 尊敬する人は、絵を描ける人とピアノを弾ける人。嫌いなものはタバコ。 最近は、元2ちゃんねる管理人、ひろゆきが好き。

COMMENT

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