縦にスクロールするティッカー機能を持つjQueryプラグイン「vTicker」の使い方

縦にスクロールするティッカー機能を持つjQueryプラグイン「vTicker」の使い方

vTickerは、ティッカー機能を持つjQueryプラグインです。 オプションがかなり豊富にあります。

• Methods
• Events

同じような動きをするhtmlで「marquee」がありますが、動き自体はよく似た動作をします。
ただ、このjQueryプラグインは、横にスクロールせず、縦にスクロールします。
これが大きな違いですね。

また、オプションも豊富にあるため、細かいコントロールも出来るようになっています。
いやはや、便利なjQueryプラグインです。

組み込み自体は非常に簡単ですので、もし機会がありましたら気軽に組み込んで頂けると思います。
では、進めていきたいと思います。

本家サイトです。
GitHub内のページですね。

• vTicker

phptemp_vt_160908.zip

サンプルです。

• 組み込み済みサンプル

サンプルには、トップページにのみ、コンテンツを追記しています。

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

ヘッダ内に組み入れたhtmlソースです。

<script src="/js/jquery.vticker.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	$('#tickerbox').vTicker('init', {mousePause:false});
});
</script>

トップページに組み入れたhtmlソースです。

<div id="tickerarea">
<div id="tickerbox">
<ul>
<li>ニュース内容です。なんでも好きなことを書いてください。<br />ニュース内容です。なんでも好きなことを書いてください。</li>
<li>ニュース内容です。</li>
<li>ニュース内容です。</li>
<li>ニュース内容です。</li>
</ul>
</div>
</div>

各種 top.css （3種類の top.css ）にそれぞれ以下の記述を追記しました。
レスポンシブ対応の記述を含んでいます。

まず、PC用の” top.css ”に追記した内容です。

/******************************************
 トップページのティッカーエリア用CSS
******************************************/

#tickerarea {
	width: 800px;
	margin: 0 auto 20px auto;
}

#tickerbox {
	width: 100%;
	border: 1px solid #ccc;
	padding-right: 10px;
	padding-left: 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#tickerbox ul {
}

#tickerbox ul li {
	text-align: left;
}

次にスマホ用の” top.css ”に追記した内容です。

/******************************************
 トップページのティッカーエリア用CSS
******************************************/

#tickerarea {
	width: 80%;
	margin: 0 auto 20px auto;
}

#tickerbox {
	width: 100%;
	border: 1px solid #ccc;
	padding-right: 10px;
	padding-left: 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#tickerbox ul {
}

#tickerbox ul li {
	text-align: left;
}

最後に、タブレット端末向けの” top.css ”に追記した内容です。
本テンプレートではスマホ用と同一の内容にしているので、環境に併せて適宜調整をお願い致します。

/******************************************
 トップページのティッカーエリア用CSS
******************************************/

#tickerarea {
	width: 80%;
	margin: 0 auto 20px auto;
}

#tickerbox {
	width: 100%;
	border: 1px solid #ccc;
	padding-right: 10px;
	padding-left: 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#tickerbox ul {
}

#tickerbox ul li {
	text-align: left;
}

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_160202.zip 」です。

いかがでしたでしょうか？
簡単な記述で導入が出来るプラグインですね。

既に形が出来上がったページには、突発的にお知らせしたいことを差し込むには、デザイン的にも心情的にもなかなか難しいモノがありますよね。
そんな時にティッカーはが活躍すること間違いありません。

是非、使ってみてくださいね。

執筆 : 清水 隼斗

縦にスクロールするティッカー機能を持つjQueryプラグイン「vTicker」の使い方の通常ページ