Webサイト上での限られたスペースにお知らせなどの
複数にわたる情報を表示させたい際に便利なニュースティッカー。

jQueryプラグインでもいろいろな形状のニュースティッカー用プラグインがありますが
シンプル(ベーシック)な動きのニュースティッカーを
極力シンプルなスクリプト構成で実装することが出来ないか試してみたので紹介してみます。

jQueryでニュースティッカーをシンプルに実装する方法

ニュースティッカーの切り替え動作については
——————————————————–
・フェード切り替え
・画面下からスライドイン
・画面右からスライドイン
——————————————————–
の3パターン構成にしてみます。

まずフェード切り替えパターンのサンプルから。

HTML構成は以下の様になります。

◆HTML
<div class="ticker" rel="fade">
<ul>
<li><a href="#1">【News1】このテキストはNewsTicker用のダミーテキスト[1]です。</a></li>
<li><a href="#2">【News2】このテキストはNewsTicker用のダミーテキスト[2]です。</a></li>
<li><a href="#3">【News3】このテキストはNewsTicker用のダミーテキスト[3]です。</a></li>
<li><a href="#4">【News4】このテキストはNewsTicker用のダミーテキスト[4]です。</a></li>
<li><a href="#5">【News5】このテキストはNewsTicker用のダミーテキスト[5]です。</a></li>
</ul>
</div><!--/.ticker-->

ULリスト全体をブロック要素で囲み、任意のクラスを付けます。(IDでも可)
サンプルではクラス「.ticker」としています。

そして、そのブロック要素に対して、
ニュースティッカーの切り替えエフェクトを何にするか
rel属性を使って指定します。
※上記HTMLではフェード切り替えサンプルとしてrel属性は「fade」になっています。

各指定方法は
——————————————————–
・[fade] フェード切り替え
・[roll] 下からスライドイン
・[slide] 右からスライドイン
——————————————————–
この様になっています。

これに対してのCSSは以下の様に指定します。

◆CSS
.ticker {
	margin: 0 auto;
	padding: 10px;
	width: 600px;
	text-align: left;
	border: #ccc 1px solid;
	position: relative;
	overflow: hidden;
}

.ticker ul {
	width: 100%;
	position: relative;
}

.ticker ul li {
	width: 100%;
	display: none;
}

CSSの構成は基本的に
切り替えエフェクト3パターン共に全て同じです。

そして、実際のニュースティッカー動作を実装させるスクリプトは
以下の様に記述します。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
	$(window).load(function(){
		var $setElm = $('.ticker');
		var effectSpeed = 1000;
		var switchDelay = 6000;
		var easing = 'swing';

		$setElm.each(function(){
			var effectFilter = $(this).attr('rel'); // 'fade' or 'roll' or 'slide'

			var $targetObj = $(this);
			var $targetUl = $targetObj.children('ul');
			var $targetLi = $targetObj.find('li');
			var $setList = $targetObj.find('li:first');

			var ulWidth = $targetUl.width();
			var listHeight = $targetLi.height();
			$targetObj.css({height:(listHeight)});
			$targetLi.css({top:'0',left:'0',position:'absolute'});

			var liCont = $targetLi.length;

			if(effectFilter == 'fade') {
				$setList.css({display:'block',opacity:'0',zIndex:'98'}).stop().animate({opacity:'1'},effectSpeed,easing).addClass('showlist');
				if(liCont > 1) {
					setInterval(function(){
						var $activeShow = $targetObj.find('.showlist');
						$activeShow.animate({opacity:'0'},effectSpeed,easing,function(){
							$(this).next().css({display:'block',opacity:'0',zIndex:'99'}).animate({opacity:'1'},effectSpeed,easing).addClass('showlist').end().appendTo($targetUl).css({display:'none',zIndex:'98'}).removeClass('showlist');
						});
					},switchDelay);
				}
			} else if(effectFilter == 'roll') {
				$setList.css({top:'3em',display:'block',opacity:'0',zIndex:'98'}).stop().animate({top:'0',opacity:'1'},effectSpeed,easing).addClass('showlist');
				if(liCont > 1) {
					setInterval(function(){
						var $activeShow = $targetObj.find('.showlist');
						$activeShow.animate({top:'-3em',opacity:'0'},effectSpeed,easing).next().css({top:'3em',display:'block',opacity:'0',zIndex:'99'}).animate({top:'0',opacity:'1'},effectSpeed,easing).addClass('showlist').end().appendTo($targetUl).css({zIndex:'98'}).removeClass('showlist');
					},switchDelay);
				}
			} else if(effectFilter == 'slide') {
				$setList.css({left:(ulWidth),display:'block',opacity:'0',zIndex:'98'}).stop().animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist');
				if(liCont > 1) {
					setInterval(function(){
						var $activeShow = $targetObj.find('.showlist');
						$activeShow.animate({left:(-(ulWidth)),opacity:'0'},effectSpeed,easing).next().css({left:(ulWidth),display:'block',opacity:'0',zIndex:'99'}).animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist').end().appendTo($targetUl).css({zIndex:'98'}).removeClass('showlist');
					},switchDelay);
				}
			}
		});
	});
});
</script>

【2015/02/08】 リストが一件の場合、アニメーションがループしないように調整しました。

スクリプト開始部分にある
——————————————————————————
var $setElm = $(‘.ticker’);
var effectSpeed = 1000;
var switchDelay = 6000;
var easing = ‘swing’;
——————————————————————————
は上から
——————————————————————————
・ニュースティッカー用リスト一式を囲うエリアのクラス名(IDでも可)
・切り替わる際のエフェクトスピード時間
・切り替わるまでの待機時間
・切り替わる際のエフェクトのイージング
——————————————————————————
となっているので、
ここの値を変更することでそれぞれスピードなど調整することが可能です。

そして、これを実行させると以下の様になります。

フェード切り替えはクロスフェードさせることも可能だったのですが
基本的にはニュースティッカーではテキスト切り替えになるので
クロスフェードさせるのはあまり綺麗ではないと感じたので
あえて前の内容がフェードインした後に次をフェードインさせています。
(クロスフェードさせたい要望がありましたらサンプル追加します。。)

次に、下からスライドインしてくるパターン。

CSSとスクリプトはフェード切り替えパターンと同じものを使用し、
HTML側でrel属性を「roll」にします。

◆HTML
<div class="ticker" rel="roll">
<ul>
<li><a href="#1">【News1】このテキストはNewsTicker用のダミーテキスト[1]です。</a></li>
<li><a href="#2">【News2】このテキストはNewsTicker用のダミーテキスト[2]です。</a></li>
<li><a href="#3">【News3】このテキストはNewsTicker用のダミーテキスト[3]です。</a></li>
<li><a href="#4">【News4】このテキストはNewsTicker用のダミーテキスト[4]です。</a></li>
<li><a href="#5">【News5】このテキストはNewsTicker用のダミーテキスト[5]です。</a></li>
</ul>
</div><!--/.ticker-->

rel属性を変更した以外はフェード切り替えの時と構成は変わっていません。

そして、これを実行させると以下の様になります。

前の内容が上にスライドアウトし、
次の内容が下からスライドインしてきます。

最後は、右からスライドインしてくるパターン。

CSSとスクリプトは同じものを使用し、
HTML側でrel属性を「slide」にします。(それ以外は同じ)

◆HTML
<div class="ticker" rel="slide">
<ul>
<li><a href="#1">【News1】このテキストはNewsTicker用のダミーテキスト[1]です。</a></li>
<li><a href="#2">【News2】このテキストはNewsTicker用のダミーテキスト[2]です。</a></li>
<li><a href="#3">【News3】このテキストはNewsTicker用のダミーテキスト[3]です。</a></li>
<li><a href="#4">【News4】このテキストはNewsTicker用のダミーテキスト[4]です。</a></li>
<li><a href="#5">【News5】このテキストはNewsTicker用のダミーテキスト[5]です。</a></li>
</ul>
</div><!--/.ticker-->

そして、これを実行させると以下の様になります。

前の内容が左にスライドアウトし、
次の内容が右からスライドインしてきます。

以上がニュースティッカーのサンプルになります。

ニュースティッカーは1行表示での切り替え処理することが多いかと思いますので
以前の記事の「jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法
と組み合わせて実装させることで、HTMLに記載されるテキスト量が多くなっても
1行表示で制御できるようになるかと思います。

併せて、動作のイージングも簡単に変更できるようにしてあるので
jQueryアニメーションにイージング(easing)処理をつけるプラグイン【イージング動作サンプル一覧】 」このようにイージングの指定を変えることで
また少し違った動作を実装することも可能になっています。

文字数カット&イージング処理を変えたパターンはこちら。

以上が、jQueryでシンプルなニュースティッカーを実装するサンプルの紹介でした。

Webサイト上にニュースティッカーを実装させる際にでも是非。。。

サンプルファイルをダウンロードしたい方はこちらから

SHARE

Comments (40)

  • jQueryでニュースティッカーをシンプルに実装する方法 | BlackFlag | ちゅどん道中記 | 2012.11.15 3:40

    […] | BlackFlag Posted 2012年11月15日 Check jQueryでニュースティッカーをシンプルに実装する方法 | BlackFlagWebサイト上での限られたスペースにお知らせなどの […]

  • SK | 2012.12.13 10:53

    初めてまして、最近BlackFlag様を知ってご利用させて頂いております。

    この度、当記事の『jQueryでニュースティッカーをシンプルに実装する方法』を使わせて頂きました。

    ところが文字の位置枠の中の中央ではなく、下に表示され当記事と違う感じになってしまいました。

    当記事をそのまま使ってのですが、何故でしょうか?HPは残念ながらここで公開出来ないのですが、何か心当たりがあればご教授頂ければと思います。

  • BlackFlag | 2012.12.14 0:22

    >SKさん

    コメントありがとうございます。
    このニュースティッカースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました件についてですが
    どのように実装されているのか確認できない状況だと何とも言えないのですが
    想定できることとすれば、CSSのブラウザリセットがされていないのではないかと感じます。

    ユニバーサルセレクタを使って
    *{margin:0;padding:0;}
    としたり、
    もしくはリストに対して
    ul,li{margin:0;padding:0;}
    としてみることで解消される可能性があるかと思っております。

    お試しください。
    よろしくお願いします。

  • kc | 2013.01.29 7:36

    初めてまして、kcと申します。

    今回こちらのニュースピッカーを利用させてもらおうとしていますが、ひとつお願いがありコメントさせていただきました。

    今回こちらのニュースピッカーをWEBサイトへ導入しようと考えていますが、ニュースの数が多い場合、最後のニュースが表示されるまで時間を要してしまいます。

    そこで、[←prev][next→]ボタンで切り替えをユーザー自身で行えるようにしたいのですが、中々うまくいきません…

    もしよろしければ、切り替えスイッチ付きバージョンを公開していただけないでしょうか?

    因みに利用したいものは[文字数カット&イージング処理を変えたパターン]の方です。

    お忙しい中大変申し訳ないのですが、どうぞよろしくお願いいたしますm(_ _)m

  • KITE | 2013.01.30 11:52

    一つのスクリプトで定番の3種類のアニメーションを選べて、汎用性も高く、とても良いプラグインでしたので、使わせていただきました。

    細かいところですが、li要素が1つしかない場合は、一度アニメーション後消えた状態で止まってしまいますので、setInterval あたりで if($targetLi.length<=1) return false; などを挿入した方が良いと思いました。

    一度ご検討いただければ幸いです。

  • BlackFlag | 2013.02.02 22:02

    >kcさん

    コメントありがとうございます。
    このニュースティッカースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただいた件についてですが
    このスクリプトではもともとその様な構成ではなかったのですが
    [←prev][next→]ボタンを設置して、
    ボタンをクリックさせることでニュースティッカーを動作させる構成に変更することで
    可能になるかと思っております。

    その様なサンプルができましたら
    またここで紹介させていただきたいと思っております。
    よろしくお願いします。

  • BlackFlag | 2013.02.02 22:07

    >KITEさん

    コメントありがとうございます。

    スクリプトについてアドバイスいただき
    ありがとうございました。
    確かにリストが一つしかない場合の対処もあった方が良いですね。
    参考にさせて頂きます。

    また何かありましたら
    よろしくお願いします。

  • inko | 2013.02.07 12:05

    はじめまして。自社の商用サイト(といっても簡単なサイトですが)で
    ニュースティッカーを実装させていただいています。
    新着情報をスクロールで表示するようにしています。

    それで、li要素を複数表示してロールするようにすることはできませんでしょうか。
    もし可能ならバージョンをアップしていただけると助かります。
    よろしくお願いします。

  • BlackFlag | 2013.02.09 22:56

    >inkoさん

    コメントありがとうございます。
    このニュースティッカーをご活用いただいているようで
    嬉しく思っております。

    ご質問いただいた件についてですが
    現状のスクリプトではカスタマイズは難しいかと思いますので
    その様なサンプルができましたらまたここで紹介させていただきます。

    よろしくお願いします。

  • regepan | 2013.03.13 19:48

    こちらのスクリプトですが、
    IE8にてエラーが出ていました。

    .animate()の中でzIndexを使うのがまずいようです。
    .css()に置き換えたら大丈夫っぽいです。

  • BlackFlag | 2013.03.20 1:32

    >regepanさん

    ご指摘ありがとうございます。

    確かに「.animate()」に「zIndex」を入れている箇所があったのは
    凡ミスでした・・・

    記事内のスクリプトおよびサンプルファイルの「zIndex」の記述は
    「.css()」に移行させていただきました。

    また何かありましたらよろしくお願い致します。

  • yamaura | 2013.04.10 1:02

    はじめまして、yamaura と申します。
    ニュース用のティッカーを探していて、こちらにたどり着きました。
    ほんとにシンプルで使いやすいと思いました。

    roll するタイプを、オフィシャルなサイトに使用したいのですが、
    こちらは自由に使用しても構わないのでしょうか?

    使用にあたり手続き等がありましたら教えてください。
    よろしくお願いいたします。

  • BlackFlag | 2013.04.10 1:12

    >yamauraさん
    コメントありがとうございます。

    このニュースティッカースクリプトをご活用いただいているようで
    とても嬉しく思っております。

    こちらのスクリプトの使用に関しては
    個人・商用問わず、ご自由に使用していただいてかまいません。

    この記事に関わらず、当ブログで紹介しているスクリプトは
    特にライセンスなども設けていないので、
    ご自由に使用および改変して
    サイトに組み込んでいただいて問題ありませんので
    ご活用いただけると幸いです。

    よろしくお願いします。

  • yamaura | 2013.04.10 1:28

    BlackFlag さま

    早々にお返事いただきまして、ありがとうございます!
    こちらありがたく使用させていただきます。

    ご連絡、ありがとうございました。

    yamaura

  • naito | 2013.07.19 18:57

    いつも拝見し参考にさせていただいております。
    roll するタイプですが、これを上から下にする場合の情報もいただけないでしょうか。。。
    javascriptの知識が乏しく、可能であればご教示いただければ幸いです。

  • BlackFlag | 2013.07.21 18:20

    >naitoさん
    コメントありがとうございます。
    このニュースティッカースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    「roll」タイプを上から下にする場合は
    スクリプトの33~37行目の中にある
    「-3em」を「3em」に
    「3em」を「-3em」に
    することで実現可能かと思っております。(全3箇所)

    お試しください。
    よろしくお願いします。

  • izumi | 2013.07.29 11:47

    ニュースティッカースクリプトを使用させていただいております。
    ニュースの上にマウスオーバーした際にアニメーションを一時停止させたいのですが、
    どうしてもうまくいかないので方法わかりましたら
    ご教授いただけなでしょうか?

  • BlackFlag | 2013.08.02 0:32

    >izumiさん
    コメントありがとうございます。
    このニュースティッカースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました
    マウスオーバーでストップさせる件についてですが
    記事内で紹介しているスクリプトから
    setIntervalの部分を少々カスタマイズする必要があります。

    サンプルファイルを用意しましたので
    下記URLからダウンロードして変更箇所等、ご確認ください。
    https://black-flag.net/devel/jQuerySimpleNewsTicker/jQuerySimpleNewsTickerHoverStop.zip

    よろしくお願いします。

  • izumi | 2013.08.02 13:29

    BlackFlag 様

    マウスオーバーでストップさせる件、
    サンプルを作成していただき、ありがとうございます。

    早速参考させていただき、希望通りの動作となりました。

    大変助かりました。
    ありがとうございました。

  • オンズ » 【jQuery】Simple News Ticker の使い方。 | 2014.02.17 0:13

    […] オリジナルは BlackFlag 様が制作。 以下、簡単な説明とサンプルデモを。 […]

  • 一行の新着情報をスライドとかで複数件表示させるjQuery | chibicolon【チビコロン】 | 2014.04.03 10:14

    […] 参考サイト jQueryでニュースティッカーをシンプルに実装する方法 […]

  • ありさん | 2014.05.17 20:51

    こちらのニュースティッカースクリプトを使用させていただこうとおもうのですが、
    NEWやCHECKなどのjpg、gif、pngなどのアイコン画像を差し込み表示させることってできますか?

    表現がわかりにくいかもですが、ご教授おねがいします。

  • BlackFlag | 2014.05.19 0:45

    >ありさんさん
    コメントありがとうございます。
    このニュースティッカースクリプトの使用をご検討いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    ニュースティッカー一件一件は単純な<li>リスト構成になっておりますので
    アイコン等を追加する際にはリストの背景画像として敷くかimgタグで配置するなど
    HTMLとCSSで実現できるかと思っております。

    お試しください。
    よろしくお願いします。

  • SERA | 2014.05.20 11:39

    izumiさんのマウスオーバーでストップさせるものを使おうかと検討している者です。
    本題なのですがニュースティッカーのアニメーションをfadeとslide両方指定したいのですがやり方がわからず苦悩しています。
    マウスオーバーでストップさせる機能をつけたままfadeとslide両方のアニメーションを指定することはできますか?
    出来たらでいいのでサンプルを作成してほしいです。
    御返信お待ちしております。

  • SERA | 2014.05.20 11:49

    連続投稿申し訳ございません。
    前の質問の補足なのですがfadeとslide両方指定し、さらにvar easingの値をそれぞれ別の値に指定したいのですができますか?
    出来たらでいいのでサンプルを作成してほしいです

  • BlackFlag | 2014.05.22 0:22

    >SERAさん
    当ニュースティッカーの「slide」はフェードしながらスライドする構成になっておりますので
    「fade」と「slide」を一緒に指定する必要はないかと思っております。
    (「effectSpeed」の時間を長くしていただくと分かりやすいかと思います)

    実装されようとしている構成がいまいち把握できないでおりますが
    「easing」についても「fade」にイージングをつけても
    あまり意味が無いのではないかと思っております。。

    よろしくお願いします。

  • tama | 2014.12.10 16:56

    ニュースティッカーを
    ダウンロードさせて頂きました。

    ありがとうございます。

    何か規制はないでしょうか?
    下部の方にURLがありますが削除しても
    かまいませんか?
    注意事項がありましたら
    教えて下さい。

  • BlackFlag | 2014.12.12 0:57

    >tamaさん
    コメントありがとうございます。
    当記事のニュースティッカースクリプトをご活用いただいているようで
    嬉しく思っております。

    当ブログのライセンスに関しては
    個人・商用問わずフリーとなっております。

    詳細については
    » ライセンスに関して
    こちらに記載しておりますのでご参照ください。

    下部の方のURLについても
    削除していただいて問題ありません。

    よろしくお願いします。

  • Chie | 2015.01.27 11:03

    はじめまして、いつもこちらで勉強させていただいています。
    すみませんが、質問させてください。
    ニュースティッカーのが1つだった場合、1回表示されるだけで止まってしまうのを、ループさせることは可能でしょうか?
    つまり、1件だけの場合でも、常に流れ続けるようにしたいのですが…。

  • BlackFlag | 2015.02.08 1:47

    >Chieさん
    コメントありがとうございます。
    当記事のニュースティッカースクリプトの使用をご活用いただいている様で
    嬉しく思っております。

    リストが一件だけだった際の処理を追加していたつもりでしたが
    まだ未実装でした・・・

    理想としている動作とは違うかもしれませんが
    リストが一件の場合は、開始アニメーションのみ再生し
    その後は動作しないようにスクリプトを調整し
    サンプルファイルを更新しましたので
    ご確認いただければと思います。

    よろしくお願いします。

  • なかむ | 2015.02.08 10:36

    初めまして。
    超初心者ですが、ニューステロップのようなものを探していてここにたどり着きました。
    早速使わせていただきましたが、とても分かりやすく導入も簡単で大変重宝しております。

    さらにテキストのテロップのみではなく、画像を用いたフェードも使いたいと考えています。
    この記事内で少し触れられていたクロスフェードについて、コードの数値を変えることで実現は可能でしょうか?
    よろしくお願いします。

  • BlackFlag | 2015.02.10 1:56

    >なかむさん
    コメントありがとうございます。
    当記事のニュースティッカースクリプトをご活用いただいている様で
    嬉しく思っております。

    当記事のスクリプトでは構成上
    クロスフェードさせるのは厳しいかと思っておりますが
    ニュースティッカータイプではないですが当ブログ別記事の
    ————————————–
    ・jQueryで画像がクロスフェードするシンプルな画像ビューアー(自動再生)を作成する方法【改訂版】
    https://black-flag.net/jquery/20130109-4439.html
    ————————————–
    こちらのタイプでしたら
    テキストでも画像でもクロスフェードさせることが可能になっております。

    よろしければお試しください。
    よろしくお願いします。

  • あーちゃそ | 2015.05.15 12:39

    お世話になります。
    シンプルで導入しやすく、弊社WEBサイトで仕様させて頂きました。

    厚かましいお話なのですが、オプション機能としてランダムに表示させる機能は追加出来ますでしょうか。

    サイト全体で50ページ程あり、全てのページに表示させているのですが、ページ遷移ごとに同じ内容からスタートするのでランダムに出来ればと思いました。

    サンプルなど作っていただけるとありがたいですが、難しい場合コード加工のヒントでもいただけると幸いです。

    以上、よろしくお願いいたします。

  • BlackFlag | 2015.05.16 12:23

    >あーちゃそさん
    コメントありがとうございます。
    当記事のニュースティッカースクリプトをお試しいただいている様で
    嬉しく思っております。

    ランダム機能はオプションでも用意していないのですが
    当ブログ別記事の

    ・jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法
    https://black-flag.net/jquery/20130327-4522.html

    こちらの2つ目のサンプルスクリプトが
    リストをランダムに並べ替えるスクリプトを実装しておりますので
    6~19行目を組み込んでみていただければと思います。

    お試しください。
    よろしくお願いします。

  • たなか | 2015.10.16 10:20

    いつもこちらのスクリプトを利用させていただいています。
    導入しやすいスクリプトばかりでとても助かっています。
    ありがとうございます。

    すみませんが、質問させてください。
    こちらのニュースティッカーとRSSを組み合わせることは可能でしょうか?
    「zRSSFeed」や「Google Feed API」などで試してみたんですが、うまく表示されませんでした。
    何かアドバイスなどございましたら、ご教授おねがいします。

  • BlackFlag | 2015.10.17 14:37

    >たなかさん
    コメントありがとうございます。
    当記事のニュースティッカーをお試しいただいている様で
    嬉しく思っております。

    RSSと組み合わせることはもちろん可能です。

    動作を実行させる順番の問題かと思いますので
    RSSから情報を取得しリストを形成した後に
    当記事のニュースティッカースクリプトが実行されるように
    構成してみてください。

    よろしくお願いします。

  • 774 | 2017.03.31 21:09

    はじめまして。
    利用させていただきました。
    悩んでた問題がめっちゃ簡単に片付いて助かりました。
    ありがとうごうざいます。

  • BlackFlag | 2017.04.02 10:01

    >774さん
    コメントありがとうございます。

    このニュースティッカースクリプトがお役に立ったようで
    嬉しく思っております。

    当ブログでは他にもいろいろと紹介させていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。

  • よしの | 2018.04.18 18:35

    こちらのサイトに何回もお世話になっているものです。
    今回、このニュースティッカーをWPに実装させて頂きました。
    ロール版で使用しています。

    「li」で書き出している部分の微調整の方法が知りたくコメントさせて頂きました。
    PC表示では上手く表示されるのですが、スマホで見ると、
    ニュースティッカーの後ろが画面からはみ出してしまいます。

    そこでニュースティッカー自体の外枠を狭めてみたのですが、
    文章の頭の最初は外枠との間に余白があるのに対し、
    お尻の部分は枠と文字がピッタリくっついてしまいます。

    外枠を狭めた際は、文章が1行ではなく2行になっています。(これ自体は構いません)
    文章の初めと終わりに余白を残す方法がございますでしょうか。

    よろしくお願いします。

  • BlackFlag | 2018.04.21 9:27

    >よしのさん
    コメントありがとうございます。
    当記事のニュースティッカーをご活用いただいている様で
    とてもうれしく思っております。

    ご質問いただきました件についてですが
    こちらでもスマホで検証してみましたが
    サンプルで言う外枠「.ticker」の「width」の値を調整していただければ
    文章の初めと終わりに同じ余白が空くことを確認しました。

    もしうまくいかない場合は、
    実装されているデータをどこかにテストアップなどして
    URLをお知らせいただければ調査させていただくことも可能です。

    ご確認の程、よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して