テーマを「SANGO」に変更しました。

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

eyecatch_news ticker

ヘッダーにニュースティッカーを表示させました。ブログ画面の一番上を見ると、確認できると思います。

ブログを訪問してくれた方に、ひとこと伝えたいことってありませんか?

自分の近況や、告知。 Twitterでも良いのかもしれないけど、すぐ流れて読まれない可能性がある。でも、まだ記事にする程でもない。

シンプルなニュースティッカーを表示する方法を紹介します。 

 

以下のコードを追加

function ticker(){

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

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

 

Style.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にコードを追加

<ul id="news" class="ticker">
    <li>ここにメッセージを追加</li>
    <li>ここにメーセージを追加</li>
</ul>

表示させたい場所にコードを追加します。

コメントを残す