簡単に設置できる手作りニュースティッカー

サイトのトップページやカテゴリページに新着情報を表示するニュースティッカーを設置したい。

そう思っていいプラグインがないか調べていたのですが、数が多すぎてどれにするか決めあぐねていました。

そんな中、手作りのシンプルなニュースティッカーを発見したので改造して使わせてもらうことにしました。

すごいシンプルなニュースティッカー。role=”marquee”を添えて

改造といってもscriptの部分はほぼそのまま流用しています。変更したのは読み込み時にニュースティッカー部を非表示にしておき、スクリプトで表示させるようにした点だけです。

場所を取らずにニュースティッカーだと分かるよう外観は大幅に変更し、ティッカーに「お知らせ」といった説明や一覧ボタンを前後につけられるようにしました。

配色にさえ気をつければ場所を問わず違和感なく設置できるようになったと思ってます。

構成

Script

利用にはjavascriptのライブラリjQueryが必要です。

ScriptはWordpressで使えるようカプセル化してあります。jQueryの後で読み込むことを忘れなければそのまま使えます。不要ならカプセル化の部分は省いてOK。

HTML

HTMLの構成はニュースティッカー部の入れ物(news-ticker-boxをIDに)である

<div id=”news-ticker-box”></div>

ニュースティッカーのタイトルを収めるためのヘッダー部分(ulをインラインブロック化)

<ul class=”news-ticker-head”><li>ニュースティッカータイトル(ヘッダー)</li></ul>

ニュースティッカーのコンテンツ(ulをインラインブロック化)

<ul class=”news-ticker”><li class=”news-ticker–item”>テキスト部</li></ul>

の3パーツです。

スクリプト

スクリプト部分は共通でmasuP.netさんのものをほぼそのまま流用しています。

jQueryを先に読み込ませることだけ忘れなければWordpressでもそのまま使えます。

(function($) {
	$(function() {
		var ticker = document.querySelector('.news-ticker'),
		    items = ticker.querySelectorAll('.news-ticker--item');
		if (items.length < 2) {
			return false;
		};

$('.news-ticker-head').css('visibility', 'visible');
 $('.news-ticker').css('visibility', 'visible');

// init
 ticker.setAttribute('role', 'marquee');
 Array.prototype.forEach.call(items, function(e, i) {
 if (i === 0) {
 e.setAttribute('aria-hidden', 'false');
 } else {
 e.setAttribute('aria-hidden', 'true');
 }
 });
 // loop
 var loopTicker;
 function startTicker() {
 clearInterval(loopTicker);
 loopTicker = setInterval(function() {
 var currentTicker = ticker.querySelector('[aria-hidden="false"]'),
 nextTicker = currentTicker.nextElementSibling;

currentTicker.setAttribute('aria-hidden', 'true');

if (nextTicker) {
 nextTicker.setAttribute('aria-hidden', 'false');
 } else {
 items[0].setAttribute('aria-hidden', 'false');
 }
 }, 7000);
 }

// stop on hover
 function stopTicker() {
 clearInterval(loopTicker);
 }
 ticker.addEventListener('mouseover', function() {
 stopTicker();
 });
 ticker.addEventListener('mouseout', function() {
 startTicker();
 });
 // run
 startTicker();
 });
 })(jQuery); 

初期ではvisibility:hidden;にしている.news-ticker-headと.news-tickerをvisibleにする点だけ変更しています。

デモ

タイプ1(ヘッダー前)

  • お知らせ
  • うまく動いていれば
  • この文章が
  • 表示されるはず

HTML

<div id="news-ticker-box">
<ul class="news-ticker-head">
 <li>お知らせ</li>
</ul>
<ul class="news-ticker">
 <li class="news-ticker--item">うまく動いていれば</li>
 <li class="news-ticker--item">この文章が</li>
 <li class="news-ticker--item">表示されるはず</li>
</ul>
</div>

CSS

#news-ticker-box {
 width: 100%;
 margin: 0;
 padding: 0;
 height: 1.6em;
 font-size: 14px;
}
@media (max-width: 500px) {
 #news-ticker-box .news-ticker-head, #news-ticker-box .news-ticker {
 list-style: none;
 padding: 0 .3em;//simplicityのmobileCSS対策
 }
 #news-ticker-box {
 font-size: 12px;
 }
}

#news-ticker-box .news-ticker-head {
 visibility: hidden;
 list-style: none;
 margin: 0;
 width: 4em;
 margin: 0;
 padding: 0 .3em;
 color: white;
 background: orange;
 font-weight: 800;
 border: 1px solid orange;
 border-radius: 8px 0 0 8px;
 -webkit-border-radius: 8px 0 0 8px;
 -moz-border-radius: 8px 0 0 8px;
 vertical-align: bottom;
 display: inline-block;
}

#news-ticker-box .news-ticker {
 visibility: hidden;
 width: calc(100% - 6em);
 border: 1px solid orange;
 border-radius: 0 8px 8px 0;
 -webkit-border-radius: 0 8px 8px 0;
 -moz-border-radius: 0 8px 8px 0;
 display: inline-block;
 vertical-align: bottom;
 position: relative;
 overflow: hidden;
}

#news-ticker-box .news-ticker[role="marquee"] {
 list-style: none;
 margin: 0;
 padding: 0 .3em;
}

#news-ticker-box .news-ticker .news-ticker--item[aria-hidden] {
 text-align: left;
}

#news-ticker-box .news-ticker .news-ticker--item[aria-hidden="false"] {
 position: relative;
 left: auto;
 -webkit-animation-duration: 0.3s;
 animation-duration: 0.3s;
 -webkit-animation-name: slidein;
 animation-name: slidein;
}

#news-ticker-box .news-ticker .news-ticker--item[aria-hidden="true"] {
 position: absolute;
 left: 200%;
 width: calc(100% - 6em);
 -webkit-animation-duration: 0.3s;
 animation-duration: 0.3s;
 -webkit-animation-name: slideout;
 animation-name: slideout;
}

@-webkit-keyframes slidein {
from {
 right: 100%;
}
to {
 right: 0%;
}
}

@keyframes
slidein {from
 {
 right: 100%;
}
to {
 right: 0%;
}
}

@-webkit-keyframes
slideout {from
 {
 left: 0%;
}
to {
 left: 100%;
}
}

@keyframes
slideout {from
 {
 left: 0%;
}
to {
 left: 100%;
}
}

タイプ2(ヘッダー後ろ)

  • うまく動いていれば
  • この文章が
  • 表示されるはず
一覧(リンク)

HTML

<div id="news-ticker-box">
<ul class="news-ticker">
 <li class="news-ticker--item">うまく動いていれば</li>
 <li class="news-ticker--item">この文章が</li>
 <li class="news-ticker--item">表示されるはず</li>
</ul>
<div class="news-ticker-head">一覧(リンク)</div>
</div>

CSS

#news-ticker-box {width:100%;margin:0;padding:0;height:1.6em;font-size:14px;}
@media (max-width: 500px){
#news-ticker-box .news-ticker-head,#news-ticker-box .news-ticker{list-style: none;padding: 0 .3em;//simplicityのmobileCSS対策}
}
#news-ticker-box .news-ticker-head {visibility:hidden;
 list-style: none;
 margin: 0;
 width: 7em;
 margin: 0;
 padding: 0 .3em;
 color: white;
 background: orange;
 font-weight: 800;
 border: 1px solid orange;
 border-radius: 0 8px 8px 0;
 -webkit-border-radius: 0 8px 8px 0;
 -moz-border-radius: 0 8px 8px 0;
 vertical-align: bottom;
 display: inline-block;
}
#news-ticker-box .news-ticker {visibility:hidden;
 width: calc(100% - 9em);
 border: 1px solid orange;
 border-radius: 8px 0 0 8px;
 -webkit-border-radius: 8px 0 0 8px;
 -moz-border-radius: 8px 0 0 8px;
 display: inline-block;
 vertical-align: bottom;
 position: relative;
 overflow: hidden;
}
#news-ticker-box .news-ticker[role="marquee"] {
 list-style: none;
 margin: 0;
 padding: 0 .3em;
}
#news-ticker-box .news-ticker .news-ticker--item[aria-hidden] {
 text-align: left;
}
#news-ticker-box .news-ticker .news-ticker--item[aria-hidden="false"] {
 position: relative;
 left: auto;
 -webkit-animation-duration: 0.3s;
 animation-duration: 0.3s;
 -webkit-animation-name: slidein;
 animation-name: slidein;
}
#news-ticker-box .news-ticker .news-ticker--item[aria-hidden="true"] {
 position: absolute;
 left: 200%;
 width: calc(100% - 6em);
 -webkit-animation-duration: 0.3s;
 animation-duration: 0.3s;
 -webkit-animation-name: slideout;
 animation-name: slideout;
}

@-webkit-keyframes slidein {
 from {
 right: 100%;
 }
 to {
 right: 0%;
 }
}

@keyframes
slidein {from
 {
 right: 100%;
 }
to {
 right: 0%;
 }
}
@-webkit-keyframes
slideout {from 
 {
 left: 0%;
 }
 to {
 left: 100%;
 }
}
@keyframes
slideout {from 
 {
 left: 0%;
 }
 to {
 left: 100%;
 }
}

タイプ3(要素の中に配置しやすいタイプ)

2番目のものを少し改変すると、要素の中に収めることができます。

ボーダーは#news-ticker-box3のみにして、news-ticker-headのbackgroundだけ色を付ければ、ぴったり収まったように見えます。

ニュースティッカーのヘッダーを後ろに置いてfloat:right;にすれば右端によせられます。

カテゴリトップページの説明文の要素中の上や下に設置すれば邪魔にならずに設置できる形です。

記事タイトルの前にthe_category();で取得したカテゴリーをspanでくくって背景色を付けてやれば、カテゴリーへの誘導もできます。

  • ニューステキスト1
  • トピックテキスト2
  • ニューステキスト3
一覧(リンク)

HTML

<div id="news-ticker-box">
<ul class="news-ticker">
 <li class="news-ticker--item"><span style="font-size: 12px; background: blue; color: white; padding: 0 0 2px 0; margin: 0 4px 2px 0;">ニュース</span>テキスト1</li>
 <li class="news-ticker--item"><span style="font-size: 12px; background: blue; color: white; padding: 0 0 2px 0; margin: 0 4px 2px 0;">トピック</span>テキスト2</li>
 <li class="news-ticker--item"><span style="font-size: 12px; background: blue; color: white; padding: 0 0 2px 0; margin: 0 4px 2px 0;">ニュース</span>テキスト3</li>
</ul>
<div class="news-ticker-head">一覧(リンク)</div>
</div>

CSS

#news-ticker-box {width:100%;margin:0;padding:0;height:1.6em;font-size:14px; background:white; border-color:orange;border-style:solid;border-width:1px 0;}
@media (max-width: 500px){
#news-ticker-box .news-ticker-head,#news-ticker-box .news-ticker{list-style: none;padding: 0 .3em;//simplicityのmobileCSS対策}
}
#news-ticker-box .news-ticker-head {visibility:hidden;float:right;
 list-style: none;
 margin: 0;
 width: 7em;
 margin: 0;
 padding: 0 .3em;
 color: white;
 background: orange;
 font-weight: 800;
 border: 1px solid orange;
 vertical-align: bottom;
 display: inline-block;
}
#news-ticker-box .news-ticker {visibility:hidden;
 width: calc(100% - 9em);
 display: inline-block;
 vertical-align: bottom;
 position: relative;
 overflow: hidden;
}
#news-ticker-box .news-ticker[role="marquee"] {
 list-style: none;
 margin: 0;
 padding: 0 .3em;
}
#news-ticker-box .news-ticker .news-ticker--item[aria-hidden] {
 text-align: left;
}
#news-ticker-box .news-ticker .news-ticker--item[aria-hidden="false"] {
 position: relative;
 left: auto;
 -webkit-animation-duration: 0.3s;
 animation-duration: 0.3s;
 -webkit-animation-name: slidein;
 animation-name: slidein;
}
#news-ticker-box .news-ticker .news-ticker--item[aria-hidden="true"] {
 position: absolute;
 left: 200%;
 width: calc(100% - 6em);
 -webkit-animation-duration: 0.3s;
 animation-duration: 0.3s;
 -webkit-animation-name: slideout;
 animation-name: slideout;
}
@-webkit-keyframes slidein {
 from {
 right: 100%;
 }
 to {
 right: 0%;
 }
}
@keyframes
slidein {from
 {
 right: 100%;
 }
to {
 right: 0%;
 }
}
@-webkit-keyframes
slideout {from 
 {
 left: 0%;
 }
 to {
 left: 100%;
 }
}
@keyframes
slideout {from 
 {
 left: 0%;
 }
 to {
 left: 100%;
 }
}

スポンサーリンク
336
336

フォローする