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
オオキ
オオキ
妻と2人の子供(姉妹・5歳と0歳)&ネコと一緒に生活している30代のパパブロガー。ブログ収益、月10万円以上を目指す。 元バックパッカーで旅行好き。娘が3歳の時に、タイへ2人旅。 子どもには、世界中にいろいろな「価値観」と「選択肢」があることを伝えたい。 WordPress,猫,新しいものが好き

COMMENT

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