ＣＳＳ 流れるメッセージはいかが おまけ
<div id="top10"><marquee behavior="alternate" direction="up" scrolldelay="10" truespeed="true" height="100">
<marquee behavior="alternate" scrolldelay="10" truespeed="true"width="130">●</marquee></marquee></div>
<marquee>を入れ子状態にしてみました・・・・
※scrolldelay="移動の間隔時間"を60以下にしますのでtruespeed="true"をつける必要があります
ＣＳＳ 流れるメッセージはいかが 2
今回は画像を流してみます 文章を流す場合は、前回の「ＣＳＳ 流れるメッセージはいかが 」
説明に使用するイラストは ポン さまにお借りしました
画像を使用するにはスクロールする画像のサイズをスクロールに合わせる必要があります
上下に移動させるには 画像の横幅をスクロールの横幅に合わせます
左右に移動させるには 画像の縦をスクロールの縦に合わせます
オリジナル画像を画像フォルダーにアップしたときに自動でサムネイル画像が作られますが
このサムネイルのサイズが合っているとは限りません
なので、オリジナルとは別にスクロールサイズに合わせた画像を作ってアップする必要があります
画像の用意が出来ましたら「タグ編集エディタ」の出番です
画像の追加で画像を並べていきます・・・・・
※ここで並べる画像は スクロールに合わせた画像をオリジナルで貼り付けます
左右に動かす場合は横に並べます
改行を削除して横につなげて行きます
プレビューで横につながればＯＫです
出来ましたら、前の記事を参考 にして<div>と<marquee>タグを最初と最後に貼り付けます
このままではクリックしたときにスクロール用の小さな画像が立ち上がってしまいます
大きな画像を立ち上げるには・・・・
<a>タグの中の画像のURLをオリジナルの画像のURLに変更します
<a href="スクロール用画像のURL" target="_blank"><img src="スクロール用画像のURL" alt="" width="130" height="100" border="0" /></a>
↓
<a href="オリジナル画像のURL" target="_blank"><img src="スクロール用画像のURL" alt="" width="130" height="100" border="0" /></a>
Thickboxを導入していてクリックしたらThickboxで開くようにする場合は
<a>タグの中に class="thickbox" を書きます
記事中は自動でこれが付くようにしてありますがサイドは付けないと動作しません
↓
<a class="thickbox" href="オリジナル画像のURL" target="_blank"><img src="スクロール用画像のURL" alt="" width="130" height="100" border="0" /></a>
プレビュー画面でスクロールを確認したらコピーします
コピーしたらフリースペースに貼り付けます 「タグ編集エディタ」は保存しないで終了でかまいません
プレビュー画面でスクロールしていればまずは完成です
後で背景画像とあわせて位置調整をします
次は背景です
CSSの編集を使います
今回はこんな背景を使ってみます
・・・文章を流す場合は 背景内の変な？コメントがジャマになります
といって背景色を設定すると 変なコメントが隠れてしまって意味がありません
流すのが画像だけなので使える背景です
↑別の画像で説明していますので上とはサイズが違っています
前回の「ＣＳＳ 流れるメッセージはいかが
」 を参考にCSSをCSSの編集で最後に貼り付けます
ブログを見て位置を調整して完成です
↑上2つは同じ背景を同じスクロール位置で使用していますので
<div class="tv001"><marquee scrollamount="1" direction="down" width="130" height="100> ・・・・・・・・・・・・・
・・・・・・・
</marquee></div>
<div class="tv001"><marquee scrollamount="1" width="130" height="100>
・・・・・・・・・・・・・
・・・・・・・
</marquee></div>
.tv001{
height:168px;/*背景画像の高さ*/
padding: 15px 0 0 20px;
background-image:url(背景画像のURL);
background-repeat:no-repeat;
}
と、classを使ってＣＳＳは1つで済ませています
「こんなの出来たよ～」ってコメントをください
他の皆様の参考になります
よろしくお願いします
ＣＳＳ 流れるメッセージはいかが
当サイトの記事TOP10のような流れるメッセージです
フリースペースまたはフリープラグインを使います
ページトップのメッセージボードでも使えるはずです
まずはフリープラグインにメッセージを書きます
今回は当サイトのトップページにあるメッセージを使ってみます
すでにサイトで使っている文章をコピーしますが
もちろん新規で書いても
メモ帳とかにある文章でもかまいません
表示させたい文章をコピーして
サイドバーの設定→フリースペースの編集 に貼り付けます
そのまま貼り付けると元の文章に入っているHTMLの改行<br />や<p></p>も一緒に貼り付けられますので余分に改行されることになりスキマが大きくなってしまいます
バックスペースキーで余分なスキマを削除してください
直接フリースペースに文章を書いた場合はそのままで大丈夫です
文字の色、リンクを貼る場合はここで指定してください
今回は全部白文字なのでここで指定をすると文字が確認できなくなりますのでCSSで指定します
※フリースペースは記事を書くの「タグ編集エディタ」と同じです
・・・・ただフリースペースには画像の貼り付け機能がありません
・・・・で、
当サイトのように画像も表示させたい場合は記事を書くの「タグ編集エディタ」を使ってしまいます
フリースペースにコピーするだけですのでタイトルも出来上がっての保存も必要ありません
が、定期的に文章などを変更する場合は適当なタイトルをつけて保存しておいた方が次回から楽になります
タグ編集エディタで画像の追加をします
※真ん中に表示させたい場合は中央を選んでください
※画像はこの後設定するスクロール範囲の幅以下にしておいてください
文字の色、リンクを貼る場合はここで指定してください
プレビューを見るとバランスがおかしいですが大丈夫です・・・・たぶん
文章を書き終わりましたら下を参考にして文章の上と下に<marquee>タグを貼り付けます
貼り付けるとプレビュー画面にスクロールが表示されるはずです
動きを確認して<marquee>タグのオプションの数字等を変更してください
<marquee>マーキー・・・・
Internet Explorerが独自に追加したタグで、文字や画像を上下左右にスクロールさせます
（対応していないブラウザーもあります）
behavior="動き方"････ 記入しないと scroll
behavior="scroll" 1方向に横移動を繰り返す
behavior="alternate" 画面の往復を繰り返す
behavior="slide" 画面の端で停止
※11/22 HTML 文字の移動 で、少し動き方の説明をしています
direction="方向"････ 記入しないと left
direction="left" 右から左へ
direction="right" 左から右へ
direction="up" 下から上へ
direction="down" 上から下へ
scrolldelay="移動の間隔時間"････ 記入しないと 85
スクロールのスピードです
数値が小さいと速く、大きいと遅くなります
"100" で100ミリ秒なので0.1秒おきに scrollamountで設定した距離を動きます
※59以下(早くする場合)にする場合は、truespeed="true"も同時に指定しておきます
これがないと数字を小さくしても60で動作します
scrollamount="移動距離"････ 記入しないと 6
テキストや画像などをscrolldelayで設定した時間ごとに何ピクセル動かすかの設定です
数字が大きいほどスクロール速度は速くなりますが、カクカクとした動きになります
width="**px"･･･････ スクロール範囲の幅
height="**px"･･････ スクロール範囲の高さ
bgcolor="#ffffff"･･ 背景色 なくてもよいです
↑これらを組み合わせて動かしたいようにタグを書きます
今回は 間隔時間85（初期設定85なので未記入）で移動距離は1、
方向は下から上の up、スクロール範囲は幅 130px 高さ 100px で設定します
あとで実際に見ながら調整すればいいので適当でもかまいません
<marquee scrollamount="1" direction="up" width="130" height="100"> を最初に
</marquee> を最後に・・・・ですが
背景の中にスクロール部分をおきますので<marquee>の外側を<div>で囲い
その<div>に背景、スクロールの文字色を設定します
divにid名を適当につけます（ＩＤはそのページ内で1個だけしか使えませんので、他とかち合わなければなんでもかまいません） 今回はtop10 にしてみました
ですので貼り付けるのは
文章の最初に
<div id="top10"><marquee scrollamount="1" direction="up" width="130" height="100" bgcolor="#000000" >
終わりに
</marquee></div> を貼り付けます 赤字部分は必ず必要です
以上、出来ましたら記事入力部分を全部コピーしてそのままフリースペースに貼り付けます
フリースペースに直接書いている場合はその最初と最後に加えてください
これでフリースペースは完成です
あとはサイドバーの設定→ サイドバーの配置 で表示させたい位置に「フリースペース」をドラッグさせます
※ブログを表示させて動きだけ確認してください
細かい位置調整は背景をつけてから調整しますので動いていることだけ確認です
続けて先ほど作った<div>に背景、スクロールの文字色を設定します
こんどはＣＳＳの編集になります
↓こんな背景画像を用意します（サイドの幅に収まるサイズで作ってください）
※サイドの幅で画像を作りましたので（169px）画像とスクロール部分は20pxで説明していますが実際はサイドの左からのサイズになります 横 20px ＋ 130px ＋ 20px ＝ 170px （サイドの幅になりますので使っているスキンのサイド幅に合わせて調整下さい・・・実際は右の20pxはドコにも出てきません、あまりが20pxになるってことです）
ＣＳＳの最後にコピペしてください
#top10{
height:168px;/*背景画像の高さ*/
padding: 15px 0 0 20px;/*スクロールの位置 上 右 下 左*/
background-image:url(画像のURL);
background-repeat:no-repeat;
color:#ffffff;/*スクロール内の文字色*/
}
※ＩＤ名は自分でわかるように付けてください
※padding: 15px 0 0 20px;/*スクロールの位置 上 右 下 左*/は
上のスキマと左のスキマだけ指定すれば後は
フリープラグインで設定したスクロール範囲の幅と高さで表示されます
ですので下端を上にするにはフリープラグインでスクロール範囲の高さを小さくしたり
右のスキマはフリープラグインでスクロール範囲の幅を調整します
※1ページ内で2ヶ所以上同じ背景同じスクロール範囲で設定する場合はid ではなく .class="クラス名"を使ってください（スクロール内の文章、画像は違っていてかまいませんが同じ背景を使う場合）
1ページ内で2ヶ所以上違う背景で設定する場合はその数だけ別のid 名を使ってCSSを作ってください
※今回は黒地に白文字だけですので<div>に文字色を設定しましたが
フリースペース、タグ編集エディタで文字色を設定してあればここの文字色は必要ありません
次回は・・・・・ ポン
さまのイラストをお借りして