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
とき
とき
妻と姉妹(5歳と0歳)ネコと生活している30代のパパブロガー。生後3ヶ月で心臓病の手術。人はいつ死ぬか分からない。死ぬ前に「やりたいことをはやろう」と強く考える。海外で旅をしながら猫の写真を撮影。娘が3歳の時にタイへ2人旅。人生は死ぬまで楽しい思い出を作ること。考え方が変われば結果は変わる。

COMMENT

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