TOP

marqueeにCSSを加えたラインソース

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

CSS採用でスーッと動くニュースメニューのラインソース関連解説
シリウスで流れる文字列の有効カスタマイズ
シリウスで流れる文字列の有効活用のコンテンツカスタマイズです 流れる文字列は記事内ばかりではなくヘッダー内やフリースペースでも有効に活用できます
スペースを空けずに文字を流すCSS指定
シリウスに流れる文字列を組み込んでも、文字行が終了してからの再表示 となるが通常の仕組みですが、ここでは終了以前に左から隠れ消えた行が 再登場する回転形式のCSS記述をご案内します。 ただし