marquee（マーキー）でのみ、HTML記述コードで構築するニュース＆
メニューラインソースでは、流れ　動きにぎこちなさも見受けられましたが、
スタイルシートにCSS指示を加えることで、ジェイクエリプラグン同様の動きを
静的に表すことができます...

 

親ページでご案内のHTML記載は一部切り替えますが、サイト内個別
ページ導入は、コピー用記載を追加すればすぐに正常確認頂けます..

 

当ページのグローバルナビ下にも設置してますので作動をご確認ください..

 

 

グローバルナビの下、もしくはナビなしの場合でヘッダー下に表示する

 

 

まず、表示させたいページのHTMLテンプレートに、MTML記述を
配置します...

 

トップ、カテゴリー、エントリー、それ以外リンク集まで取り付け可能...

 

各、HTMLで3種のテキストを別表記でも作動OK...

 

以下のHTML記載をコピーしてお使いください...
文字は好みに書き変えてくださいね..

 

コード
<div class="marqueeRightLeft"><p>テキスト、文字</p></div>

 

 

 

 

各HTMLテンプレートで、置く場所は以下

 

<!-- ★ヘッダーここから★ -->
<% pageTopic %>
<div id="header"<% pageHeaderImage %>>
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
<% pageDescription %>
</div>
<!-- ★ヘッダーここまで★ -->

 

<div class="marqueeRightLeft"><p>ここに置きます</p></div>

 

 

---

 

 

記事カラム内に配置する場合は、記事カラム内にMTML記述を
置いてください..

 

 

エントリーページのみ、ページごとに文字、テキストは変更も可能
その際は、CSSの指示を上級者設定　スタイルの割り込みに
張り付けてください..

 

---

 

 

スタイルシート追加記述

 

 

 

スタイルシートに置く記載　場所はどこでもいいみたいです..

 

/* MARQUEE */

 

.marqueeRightLeft {
max-width: 900px;　　/*　　横幅　　*/
padding: 0.3em 0;
margin: 0 auto;
position: relative;
overflow: hidden;
text-align: left;
color:#FFFFFF;　　/*フォントカラー　　*/
　　　　font-size:16px;　　/*フォントサイズ　　*/
　　　background: #666666;　/*背景カラー　　*/
}

 

上記載は当サイトで使用しているもの

 

 

以下は、背景無　上下をボーダーライン表示

 

.marqueeRightLeft {
max-width: 900px;
padding: 0.5em 0;
margin: 0 auto;
position: relative;
overflow: hidden;
text-align: left;
border-top: 1px solid #000000;　/*ボーダーラインとカラー*/
border-bottom: 1px solid #000000;　/*ボーダーラインとカラー*/
color:#000000;　　　/*フォントカラー　　*/
　　　font-size:16px;　　　/*フォントサイズ　　*/
}

 

 

上記のどちらかを選択して、以下記載を継続記載ください

 

 

.marqueeRightLeft p:after {
content: "";
white-space: nowrap;
}
.marqueeRightLeft p {
margin: 0;
padding-left: 100%;
display: inline-block;
white-space: nowrap;
-webkit-animation-name:marqueeRL;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:12s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:marqueeRL;
-moz-animation-timing-function:linear;
-moz-animation-duration:12s;
-moz-animation-iteration-count:infinite;
-ms-animation-name:marqueeRL;
-ms-animation-timing-function:linear;
-ms-animation-duration:12s;
-ms-animation-iteration-count:infinite;
-o-animation-name:marqueeRL;
-o-animation-timing-function:linear;
-o-animation-duration:12s;
-o-animation-iteration-count:infinite;
animation-name:marqueeRL;
animation-timing-function:linear;
animation-duration:12s;　
animation-iteration-count:infinite;
}

 

@-webkit-keyframes marqueeRL {
from {-webkit-transform:translate(0);} to {-webkit-transform:translate(-100%);}
}
@-moz-keyframes marqueeRL {
from {-moz-transform:translate(0);} to {-moz-transform:translate(-100%);}
}
@-ms-keyframes marqueeRL {
from {-ms-transform:translate(0);} to {-ms-transform:translate(-100%);}
}
@-o-keyframes marqueeRL {
from {-o-transform:translate(0);} to {-o-transform:translate(-100%);}
}
@keyframes marqueeRL {
from {transform:translate(0);} to {transform:translate(-100%);}
}

 

ここまで

 

カスタマイズ

 

 

記事カラム内に置く場合は、max-width: 900px;を記事幅数値に
書き換えてください..

 

サイト幅が、1000の場合は　1000pxですね..

 

 

 

 

移動するスクロールのスピードは、
animation-duration:12s;　の12sの記載で調整できますが
通常のCSS調整と意味合いがやや違います..

 

表示されているライン幅内で、どの秒数内で文字をすべて表示するか
という調整になります..

 

 

現時点の数値、12sの指示の場合

 

文字数が多いと早くなる　

 

文字数が少ないと遅くなる

 

...という感じですので、一度ラインに文字を
加えてからの調整がやりやすいです

 

 

 

テキストにイメージ画像を置く

 

当サイトのメニューソースでは、頭に小さな画像を置いてますが

 

皆さんも画像を置く際は、シリウスで作成される画像コードに
縦横ともサイズ指定をしてください..

 

height:16px;width:16px

 

サイズ指定をしない場合は、スマホで閲覧すると画像が縮小できず
ゆがみます

 

参考記載
<img src="<% pageDepth %>img/sirius.jpg" style="height:16px;width:16px;" alt="" />

 

 

 

 

今回は、morobrand.net様のサイトを参考にさせていただきました..
http://morobrand.net/mororeco/css/marquee/

 

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

 

以上です.....

 

 

スポンサーリンク

 

 

 

CSS採用でスーッと動くニュース&メニューラインソース
シリウス記事内に流れる文字列を配置するカスタマイズ
シリウスカスタマイズトップ