アメブロ向上企画書ー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名を適当につけます（ＩＤはそのページ内で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>に文字色を設定しましたが

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

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

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

• 
• 
• ツイート