テキストが横に流れていくアレ=「ティッカー」スクリプト
|カテゴリー: WEB制作技術やツール
こんにちは。新潟ホームページ制作【マザーシップ】です。
「テキストが横に流れていくアレ」についてご紹介します。業界用語(?)で「ティッカー」と呼ぶらしいです。
10年くらい前に流行したあと一度廃れた気がするこのティッカーですが、スマホ対応のサイトが増えるとともに、省スペースで「重要なお知らせ」を目立たせつつ見せたいという目的で実装の依頼が増えてきています。
実装例はこちら!結婚式招待状・席次表の【pure】さんです。
簡単に実装するなら <marquee>タグですが
昔は<marquee>タグでOKでしたよね。ガラケーサイトを制作するときにもよく使っていたような気がします。
<marquee>文字</marquee>
簡単な記述で実装できますし、ネットスケープでは動作しないとありますが、最近の大抵のブラウザでは動作するようです(最新のIE,クローム,サファリ,Firefox,Operaなどで確認できています)
しかし、「HTML5で廃止されるタグ」という点が個人的には気になっており、今後制作するホームページでは使わないほうが良いのかなぁと思っています。
CSS3のマーキーモジュール
HTML5で廃止された<marquee>タグのかわりにCSS3に「マーキーモジュール」なるものが登場しました。
<p style="width:600px; overflow:marquee; marquee-style:scroll">文字</p>
みたいな感じで実装します。
ただ、こちらは動作するブラウザが少なすぎて、実用は厳しいです。
jQueryを使った実装
今はjQueryを使った実装が一般的なようです。
私がよく使っているのは、coolcarousels。
下の画像をクリックすると、デモをご覧いただくことが可能です。
#09 News ticker effect by scrolling a definition list
何がいいかというと、汎用性の高さ。1つのjsファイルで次のようなカルーセルを一緒に実装できちゃうところが気に入っています。
#02 Fluid full window width carousel with truncated previous and next images
#23 Continuously scrolling carousel immediately stopping onMouseOver
GitHubからスクリプトをダウンロード後、jquery.carouFredSel-6.2.1-packed.jsファイルを任意の場所にアップロードし、HTMLファイルの<head>タグ内に読み込ませて、
<script type='text/javascript' src='http://yoursite.jp/アップロードしたフォルダ/jquery.carouFredSel-6.2.1-packed.js'></script>
デモページにあるHTMLタグ、Jsタグ、CSSタグを参考にいろいろと書き込めばOKです。
ティッカーの場合、なるべくシンプルにすると下記のような記述になります。
HTML
<div id="wrapper">
<div class="first">
<dl id="ticker-1">
<dt>見出し</dt><dd>テキスト</dd>
<dt>見出し</dt><dd>テキスト</dd>
</dl>
</div>
</div>
JS
jQuery(function() {
var _scroll = {
delay: 1000,
easing: 'linear',
items: 1,
duration: 0.07,
timeoutDuration: 0,
pauseOnHover: 'immediate'
};
jQuery('#ticker-1').carouFredSel({
width: 1000,
align: false,
items: {
width: 'variable',
height: 35,
visible: 1
},
scroll: _scroll
});
});
CSS
#wrapper > div {
width: 100%;
height: 30px;
padding: 15px 0;
overflow: hidden;
}
#wrapper dl {
display: block;
margin: 0;
}
#wrapper dt, #wrapper dd {
display: block;
float: left;
margin: 0 10px;
padding: 5px 10px;
}
#wrapper dt {
background-color: #f66;
color: #fff;
}
#wrapper dd {
color: #333;
margin-right: 50px;
}
HTMLのdtタグとddタグ内のテキストはAdvance Custom Fieldsなどを駆使して、更新しやすくカスタムすることをおすすめします。
ティッカー専用WPプラグイン「Ditty News Ticker」
上記の実装が面倒、という方はワードプレスのプラグイン「Ditty News Ticker」が今のところのおすすめです。インストールが完了すると、管理画面のサイドバーに
というメニューが現れて、
こんな感じで入力が可能です。入力が完了するとショートコードが現れるので、それをテンプレートあるいは記事内に貼り付ければOKです。移動する方向やスピードも管理画面から調整可能です。
こちらのプラグイン、日本語仕様ではないため最初は戸惑うかもしれませんが、一度覚えてしまえば実装も更新も簡単です。
というわけで、ティッカーいかがでしたでしょうか。
皆様のホームページ制作のお役にたつことができましたら幸いです。