『ＣＳＳ 流れるメッセージはいかが 2』

今回は画像を流してみます　　　　文章を流す場合は、前回の「ＣＳＳ　流れるメッセージはいかが」

説明に使用するイラストはポンさまにお借りしました

画像を使用するにはスクロールする画像のサイズをスクロールに合わせる必要があります

上下に移動させるには　画像の横幅をスクロールの横幅に合わせます

左右に移動させるには　画像の縦をスクロールの縦に合わせます

オリジナル画像を画像フォルダーにアップしたときに自動でサムネイル画像が作られますが

このサムネイルのサイズが合っているとは限りません

なので、オリジナルとは別にスクロールサイズに合わせた画像を作ってアップする必要があります

画像の用意が出来ましたら「タグ編集エディタ」の出番です

画像の追加で画像を並べていきます・・・・・

※ここで並べる画像は　スクロールに合わせた画像をオリジナルで貼り付けます

左右に動かす場合は横に並べます

改行を削除して横につなげて行きます

プレビューで横につながればＯＫです

出来ましたら、前の記事を参考にして<div>と<marquee>タグを最初と最後に貼り付けます

このままではクリックしたときにスクロール用の小さな画像が立ち上がってしまいます

大きな画像を立ち上げるには・・・・

<a>タグの中の画像のURLをオリジナルの画像のURLに変更します

　　　　　　　　↓

Thickboxを導入していてクリックしたらThickboxで開くようにする場合は
<a>タグの中に class="thickbox" を書きます
記事中は自動でこれが付くようにしてありますがサイドは付けないと動作しません

　　　　　　　　↓

プレビュー画面でスクロールを確認したらコピーします

コピーしたらフリースペースに貼り付けます　　「タグ編集エディタ」は保存しないで終了でかまいません

プレビュー画面でスクロールしていればまずは完成です

後で背景画像とあわせて位置調整をします

次は背景です

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つで済ませています

「こんなの出来たよ～」ってコメントをください
他の皆様の参考になります
よろしくお願いします

ブログ画像一覧を見る

このブログをフォローする

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！

ＣＳＳ 流れるメッセージはいかが 2

ＣＳＳ　流れるメッセージはいかが　2