貼っていただけたらうれしいです


Yahoo!ブックマークに登録



Googleブログ内検索
Loading
2008-05-21 10:25:57

CSS 流れるメッセージはいかが

テーマ:CSS

当サイトの記事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名を適当につけます(IDはそのページ内で1個だけしか使えませんので、他とかち合わなければなんでもかまいません) 今回はtop10 にしてみました


ですので貼り付けるのは

文章の最初に

<div id="top10"><marquee scrollamount="1" direction="up" width="130" height="100" bgcolor="#000000" >

終わりに

</marquee></div>  を貼り付けます 赤字部分は必ず必要です





以上、出来ましたら記事入力部分を全部コピーしてそのままフリースペースに貼り付けます


フリースペースに直接書いている場合はその最初と最後に加えてください

これでフリースペースは完成です


あとはサイドバーの設定→ サイドバーの配置 で表示させたい位置に「フリースペース」をドラッグさせます

※ブログを表示させて動きだけ確認してください

 細かい位置調整は背景をつけてから調整しますので動いていることだけ確認です





続けて先ほど作った<div>に背景、スクロールの文字色を設定します


こんどはCSSの編集になります


↓こんな背景画像を用意します(サイドの幅に収まるサイズで作ってください)



※サイドの幅で画像を作りましたので(169px)画像とスクロール部分は20pxで説明していますが実際はサイドの左からのサイズになります 横 20px + 130px + 20px = 170px (サイドの幅になりますので使っているスキンのサイド幅に合わせて調整下さい・・・実際は右の20pxはドコにも出てきません、あまりが20pxになるってことです)


CSSの最後にコピペしてください

#top10{
height:168px;/*背景画像の高さ*/
padding: 15px 0 0 20px;/*スクロールの位置 上 右 下 左*/
background-image:url(画像のURL);
background-repeat:no-repeat;

color:#ffffff;/*スクロール内の文字色*/
}


※ID名は自分でわかるように付けてください

※padding: 15px 0 0 20px;/*スクロールの位置 上 右 下 左*/は

上のスキマと左のスキマだけ指定すれば後は

フリープラグインで設定したスクロール範囲の幅と高さで表示されます
ですので下端を上にするにはフリープラグインでスクロール範囲の高さを小さくしたり
右のスキマはフリープラグインでスクロール範囲の幅を調整します

※1ページ内で2ヶ所以上同じ背景同じスクロール範囲で設定する場合はid ではなく .class="クラス名"を使ってください(スクロール内の文章、画像は違っていてかまいませんが同じ背景を使う場合)

 1ページ内で2ヶ所以上違う背景で設定する場合はその数だけ別のid 名を使ってCSSを作ってください

※今回は黒地に白文字だけですので<div>に文字色を設定しましたが

  フリースペース、タグ編集エディタで文字色を設定してあればここの文字色は必要ありません



なんかやっているうちに・・・・

アメブロのカスタマイズになってしまっていますが・・・・・

フリープラグイン 3800字の文字数限度に挑戦中!!?

ついでに・・・ CSSも

って、こっちがメインになりつつありますが・・・・・・

オリジナルスキンをつくる参考になれば・・・






次回は・・・・・ ポン さまのイラストをお借りして


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


AD

コメント

[コメントをする]

1 ■おお!

仕事の合間にチャレンジしてます
うまくいったらトラバしますね~★

2 ■うまくいったら教えてください

この記事がうまく書けなくて・・・
何度も書き直しているうちにこんな量になってしまいました
最初は画像まで説明するつもりでしたが・・・・
一度にはムリ!
これでもうまく伝わっているのかが心配です
あらためて文才のなさを認識しています・・・

うまくいったら教えてください
たぶん皆さんもどんなアイデアで動かすのか知りたいと思っているはず

3 ■コメ②

一応メッセージ欄とサイドに試し実装しました
2個はくどいからどちらか外す予定です

これは実際やってみると簡単ですね(=⌒▽⌒=)

4 ■>やってみると簡単ですね

すごくいいですね
この説明で伝わるか不安でしたが安心しました

>2個はくどいからどちらか外す予定です
やはり使いすぎは良くないですね

よろしくお願いします

5 ■うまくいきました。

どうしても画像だけでスクロールしたかったので
何時間か試行錯誤した後、無事完成しました。
はじめはどうしてもズレたりしたのですが、
完成してよかったです。

<div id="top10"><MARQUEE scrollamount="1" direction="up" width="134" height="92">
<FONT color="#000000"><B>

--------!本文

</B></font></marquee></DIV>

bgcolorを指定せずにやったところ、うまくいきました。
いつも本当にお世話になっています。
色々改造できて楽しいです。

6 ■あっそ~ですね

あいり さまの背景はバックを消してしまっては意味がありませんね
NEWの更新印も和風ぽくていいですね
うまくいきましたらまた教えて下さい

7 ■無題


メッセ-ジ部分を全て真ん中にするタグってありますか?

8 ■>森 さま

メッセ-ジの最初に <center>  最後に </center> を入れてみてください

9 ■無題


ありがとうございます!

10 ■無題

たびたびとすいません、

http://www.lovecandied.com/count/24.gif

の画像を背景に使いたいんですが、

プレビューでみると、背景が表示されません。

CSSには、

#top10{
height:168px;/*背景画像の高さ*/
padding: 15px 0 0 20px;/*スクロールの位置 上 右 下 左*/
background-image:url(http://www.lovecandied.com/count/24.gif);
background-repeat:no-repeat;
color:#ffffff;/*スクロール内の文字色*/
}

と貼付けましたm

どうやったら表示されるのか、教えていただけないでしょうか? お願いします!

11 ■>❤ゆり❤ さま

その素材を配布しているサイトの注意書きは読まれましたか・
直リン禁止のため直リンの場合は画像は表示できないようになっています
必ずダウンロードして自分のブログの画像フォルダにアップしてその画像のURLを指定してください

12 ■無題

そうでしたか!
私の不注意でした、ありがとうございます!

13 ■無題


すいません、
この記事の通りやったのですが
記事とメッセージボードがサイドバーに入っちゃうのですが
どうすればいいのですかね??

14 ■>sfさま

ゴメンナサイ
記事中の説明で </div> が抜けていました
訂正しておきました
今度は大丈夫だと思います

15 ■無題


出来ました★
ありがとうございます!!

16 ■背景だけ・・・

フリースペースに背景をつけたく思っています。
(blogの、familyとshoppingの部分です)

CSSに、
<div id="top10">
background-image:url(http://stat.ameba.jp/user_images/20100314/08/yuyuyu-0412/78/5e/j/t01910020_0191002010450381736.jpg);
background-repeat:no-repeat;}
</div>

と貼りつけましたが表示されません。

スクロールをつけず、背景だけを付けたい場合
どのようにすればいいのかご指南いただけますでしょうか。
宜しくお願いします。

17 ■>yumaさま

<div id="top10">

ここに内容をかきます

</div>
<style type="text/css">#top10{background:url(http://stat.ameba.jp/user_images/20100314/08/yuyuyu-0412/78/5e/j/t01910020_0191002010450381736.jpg) repeat-y;}</style>

18 ■無題

http://ameblo.jp/baby-saekun/

上のブログのアイフレにある流れるnewsは

どうやって設置するんでしょうか?

(1番上のあいふれに
「飴児様募集中」と書いてある奴)

教えてください!(-^□^-)

19 ■>いず*さま

・・・
それを含めて記事にしますね
お待ち下さい

また・・質問のときはそのままの状態にしたままで質問してください
確認のしようがありません

コメント投稿

[PR]気になるキーワード