自動で動くニュースティッカーを設置しよう！

はじめに

カスタマイズやテンプレートご利用の方へ！
★記事内で紹介しているカスタマイズやテンプレートはアメブロの仕様変更やブラウザによって正しく表現されない場合がありますので、編集前にメモなどにバックアップをとるなどの対処をオススメ致します。(全てのブラウザでの確認はしていない場合があります)

★ご質問などは、皆さんで共有できるように該当記事のコメ欄かメッセからお願いします。

★ご質問などの返事が遅れる場合がありますがご了承下さい。

自動で動くニュースティッカーについて

今回は以前に読者様からの要望があったのでニュースティッカーをご紹介致します。

このニュースティっカーは自動で流れるようにスクロールします。

カーソルをのせればストップしますので読む際にも問題ないと思います。

メリットは限られたスペースで多くの情報を提供できる事と、動いているので目にとまる事だと思います。

比較的、簡単なので挑戦してみましょう！

注意事項

転載、転売などはご遠慮下さい。

CSS３での表現は若干IEでは立体感やグラディーションの表現が他のブラウザと異なります。

テンプレート、カスタマイズを利用しての如何なる損害、損失も保証致しかねます。（何もないとは思いますが心配な方はバックアップを取ってからの利用をオススメします。）

ニュースティッカー設置手順

手順は③手順になります。

①フリースペースにてテキスト部分の記入。

②CSSにてニュースティッカーの設置スペース確保、サイズ変更、装飾など。
※CSSはCSS編集画面にて最下部の
「 (4) その他、拡張・/* その他、拡張があれば記述 */」の下にコピペ。

③フリープラグインにて自動で動かす為のをjquery設定。

ニュースティッカー設置開始

手順①
フリースペースにニュースティッカー内の任意のテキストを設定します。
次のHTMLをペースト。
※赤字にタイトルなど、青字にテキストなど。

<div id="tickerContainer"><div id="ticker"><h3 class="heading">News title</h3><div class="text">text </div><h3 class="heading">News title</h3><div class="text">text </div><h3 class="heading">News title</h3><div class="text">text </div><h3 class="heading">News title</h3><div class="text">text </div><h3 class="heading">News title</h3><div class="text">text </div><h3 class="heading">News title</h3><div class="text">text </div></div></div>

項目を増やしたい場合はスペースを開けて--><h3 class="heading">News title</h3><div class="text">text </div><!--を追記

手順②-A
ニュースティッカーを設置するスペースをCSSにて確保します。
各デザインやカスタム内容によっては異なりますが、通常は下記のようになっていると思います。
今回は青枠の部分にスペースを確保します。
※.skinContentsAreaの上部を拡大します。

/* ニュースティッカースペース */
.skinContentsArea{
padding-top:300px;
}

上記のCSSをペーストすると次の画像の青枠ようなスペースができると思います。

手順②-Ｂ
次にスペースの部分をニュースティッカーを設置する基点にしますと言う設定のCSSを追記します。※②-Aに追記箇所は赤字部分

/* ニュースティッカースペース・基点 */
.skinContentsArea{
padding-top:300px;
position:relative;
}

これで設置箇所のスペース確保は完了です。

手順②-C
次にサイズや装飾のCSSを追記。
※変更すると思う箇所に説明を書きましたので参考に変更して下さい。

/* ニュースティッカーサイズ・装飾 */
#ticker {
position:absolute;　/* 基点にした場所に配置設定 */
width:480px;　　　　/* ニューススティッカーの横サイズ */
height:300px;　　　　/* ニューススティッカーの縦サイズ */
border:1px solid #ccc;　/* ボーダーラインの太さ・種類・カラー */
overflow:auto;
margin:0;
padding:0;
top:0px;　　　　/* 基点からの位置指定top（上）から */
left:95px;　　　/* 基点からの位置指定left（左）から */
}
#ticker h3 {
font-size: 14px;　　/* タイトルテキストのサイズ */
padding:0 10px 5px 10px;　/* タイトルテキストの位置設定 */
margin:0px;
background-color:#eee;　　/* 背景カラー設定 */
padding-top:10px;
border:1px solid #fff;
border-bottom:none;
border-right:none;
position:relative;
}
#ticker div.text {
margin-left:0;
font-size: 13px ;　　　/* テキストのサイズ */
padding:0 10px 10px 10px;
border-bottom:1px solid #ccc;
background-color:#eee;
border-left:1px solid #fff;
position:relative;
}
#ticker div.last {
border-bottom:1px solid #fff;
}
#ticker div { margin-top:0; }

CSS全体はこうなります。

/* ニュースティッカースペース・基点 */
.skinContentsArea{
padding-top:300px;
position:relative;
}
/* ニュースティッカーサイズ・装飾 */
#ticker {
position:absolute;　/* 基点にした場所に配置設定 */
width:480px;　　　　/* ニュースティッカーの横サイズ */
height:300px;　　　　/* ニュースティッカーの縦サイズ */
border:1px solid #ccc;　/* ボーダーラインの太さ・種類・カラー */
overflow:auto;
margin:0;
padding:0;
top:0px;　　　　/* 基点からの位置指定top（上）から */
left:95px;　　　/* 基点からの位置指定left（左）から */
}
#ticker h3 {
font-size: 14px;　　/* タイトルテキストのサイズ */
padding:0 10px 5px 10px;　/* タイトルテキストの位置設定 */
margin:0px;
background-color:#eee;　　/* 背景カラー設定 */
padding-top:10px;
border:1px solid #fff;
border-bottom:none;
border-right:none;
position:relative;
}
#ticker div.text {
margin-left:0;
font-size: 13px ;　　　/* テキストのサイズ */
padding:0 10px 10px 10px;
border-bottom:1px solid #ccc;
background-color:#eee;
border-left:1px solid #fff;
position:relative;
}
#ticker div.last {
border-bottom:1px solid #fff;
}
#ticker div { margin-top:0; }

ここまでで特に設定変更をしていなければ次のようになっていると思います。

手順③
フリープラグインに自動で動かす為に次のjquery設定。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script>
<script type="text/javascript">
$(document).ready(function() {
var t = $("#ticker");
//ラップする
t.children().filter("h3").each(function() {
var h = $(this),
c = $("<div>");
h.next().appendTo(c);
h.prependTo(c);
c.appendTo(t);
});
//スクロールバー非表示
t.css("overflow", "hidden");
function animator(currentItem) {
var d = currentItem.height();
duration = (d + parseInt(currentItem.css("marginBottom"))) / 0.025;
//アイテムの処理
currentItem.animate({ marginBottom: -d }, duration, "linear", function() {
currentItem.appendTo(currentItem.parent()).css("marginBottom", 0);
animator(currentItem.parent().children(":first"));
});
};
//ティッカーアニメーション開始
animator(t.children(":first"));
//マウスセンサーをセット
t.mouseenter(function() {
//ストップ
t.children().stop();
});
//マウスが外れた時の処理
t.mouseleave(function() {
animator(t.children(":first"));
});
});
</script>

これで完了です。

後はお好みで変更などして下さい。

～ルシから一言～
今回は説明画像も使いレクチャー風にご説明してみました＾＾

しかし、元々文才が無いのでマッタリと記事にしましたが何気に１時間半くらいかかってしまいました(；ωﾉ|柱|。。。

今回のような説明のほうが読む方には解り易いのか・・、それともガチャガチャして解りにくいのか・・。（説明下手もありますが・・汗）

時間のあるときにはレクチャー風？でご紹介するかもしれません。

今後ともよろしくお願い致します。

知恵の樹・アメブロテンプレート