-  1 2 3 4 5  次の10件>>

2007年04月15日

文字に背景色をつけてみる　その２

前回、文字に背景色をつけるHTMLを紹介しましたが、何行にもわたる場合、行ごとにマーカーのように背景色がついていました。

　【例】

16pixにするとこのように文字も大きくなる。

何行に渡ってもこのように背景色はつく。

次回は行ごとに背景色がつくのではなくて

段落で色をつける勉強をしましょう。



今回は、行ごとに背景色がつくのではなくて、段落すべてに色がつくように設定してみます。

　◎背景色をつけたい段落を　<P STYLE="background-color:背景色;"></P>で囲む

　【サンプル】

　<P STYLE="background-color:背景色;color:文字色;">
段落全体に色をつけてみる。

背景色は指定カラーをそのまま入力するか、HTML色コードで入力

さて、行ごとのラインマーカーではなくて、段落全部が

指定した色になりましたか？

</P>

すると、↓のように反映される


段落全体に色をつけてみる。

背景色は指定カラーをそのまま入力するか、HTML色コードで入力

さて、行ごとのラインマーカーではなくて、段落全部が

指定した色になりましたか？


【HTML・Javaスクリプトの最新記事】
posted by こうもり太朗555 at 12:58| Comment(20) | HTML・Javaスクリプト | このブログの読者になる | 更新情報をチェックする

2007年04月08日

文字に背景色をつけてみる

○まずは単純に文字にマーカーを引く感じで背景に色を付けてみる。

　<SPAN STYLE="background-color:#背景色">こんな感じ</SPAN>

#背景色のところに色コードを入れる。ちなみにredを入れてみると、

　こんな感じ

になる。



○次は文字色も変更して背景も色をつけてみる

<font color="#文字色" style="background-color:#背景色">文字色が指定できて、背景に色もつきます</font>

　文字色をwhiteにして、背景色をblackにしてみると、

　文字色が指定できて、背景に色もつきます

となる。

文字サイズを変える場合は
font color="文字色" style="font-size: ○○px; background-color: 背景色"　と言う風に指定する。

16pixにするとこのように文字も大きくなる。

何行に渡ってもこのように背景色はつく。

次回は行ごとに背景色がつくのではなくて

段落で色をつける勉強をしましょう。

posted by こうもり太朗555 at 12:34| Comment(0) | HTML・Javaスクリプト | このブログの読者になる | 更新情報をチェックする

2007年03月11日

音ログ

本日、メインブログ『トリプルファイブのトリ肌日記』に
音ログなるブログパーツをつけてみた。

専用ソフト音コンをインストールしてiTunesで音楽を聴いたら、自分が聴いた音楽のログを録って自動的に自分専用サイトにUPしてくれるという仕組み。

こういう形の音楽日記もおもしろいかも。
posted by こうもり太朗555 at 14:26| Comment(0) | ブログ関連・その他 | このブログの読者になる | 更新情報をチェックする

2007年02月16日

ルビふり

今日はルビ（ふりがな）について。

きっと他の人が読めないだろうなぁという漢字を使わなければならないことがたまにある。

そういう場合、平仮名を使うという選択肢もあるけれど、漢字が持つ独特の雰囲気を伝えたい場合はそういうわけにはいかない。

ということでルビをふりましょう。

例えば　濕る。

これにルビをふる。

○HTMLとしてはまずルビを振りたい文字を全体のHTMLとして、<ruby>〜</ruby>で囲む。

　<ruby>濕</ruby>る。

○次にルビをふる文字の指定として漢字を<rb>〜</rb>で囲む。

　<ruby><rb>濕</rb></ruby>る。

○ルビの文字のためのHTML　<rt>〜</rt>　を入れる。

　<ruby><rb>濕</rb><rt>しめ</rt></ruby>る。

これでルビふりは一見できたようだが、このHTMLではブラウザがIE以外の場合は反映されない。
なので、ルビ対応ブラウザ以外のためのHTMLも組み込んでおく。

　○未対応ブラウザ用に　<rp>〜</rp> を挿入。

　<ruby><rb>濕</rb><rp>（</rp><rt>しめ</rt><rp>）</rp></ruby>る。

こうしておくと、IEの場合は上にルビがふられ、FireFoxなどの未対応ブラウザの場合は横に（かっこ）で振り仮名がふられる。

さて、完成品としてはこういう感じになる。

濕（しめ）る。


posted by こうもり太朗555 at 22:05| Comment(0) | HTML・Javaスクリプト | このブログの読者になる | 更新情報をチェックする

2007年01月20日

文字を流してみようか　その３

◎<Marquee direction="up" height="100">上へ流れていく</Marquee>


上へ流れていく



◎<Marquee direction="down" height="100">下へ流れていく</Marquee>


下へ流れていく






上の二つのマーキーを組み合わせると、

◎<Marquee behavior="alternate" direction="up" height="100">
上へ行き下へ戻る</Marquee>


上へ行き下へ戻る


となる。


ちなみにheight="100"とは、文字の動く幅を指定してます。
この数値を大きくすれば移動幅も広がり、小さくすると移動幅は狭くなります。
posted by こうもり太朗555 at 13:58| Comment(0) | ブログ関連・その他 | このブログの読者になる | 更新情報をチェックする

2006年11月30日

ステータスバーに文字を流してみようか

タイトルそのまんまです。
ステータスバーに文字を流しましょう。

<HEAD>〜</HEAD>要素の中に次のjavaスクリプトを挿入します。




<!--headの中に-->
<SCRIPT LANGUAGE="JavaScript">
<!--
timerID=10;
blnk="　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　";
msg1="流したい文字をココに入れる";
msg2="あまり長すぎるとうまくながれませんのでご注意";
msg=blnk+blnk+msg1+msg2;
function scroll() {
clearTimeout(timerID);
timerID = setTimeout("scroll()",200);
msg=msg.substring(2,msg.length)+msg.substring(0,2);
window.status=msg;
}
// -->
</SCRIPT>
<!--ここまで-->
<BODY onLoad="scroll()">

以上。
さて下のステータスバーにうまく流れてるかな？

注）現在ステータスバーに文字は流しておりません。

posted by こうもり太朗555 at 00:01| Comment(0) | HTML・Javaスクリプト | このブログの読者になる | 更新情報をチェックする

2006年11月17日

文字を流してみようか　その２

◎＜Marquee behavior="alternate"＞行きつ戻りつ＜/Marquee＞

行きつ戻りつ




◎＜Marquee Bgcolor="カラーコード"＞背景に色をつけると＜/Marquee＞

背景に色をつけると




こんな感じ。
posted by こうもり太朗555 at 23:09| Comment(0) | HTML・Javaスクリプト | このブログの読者になる | 更新情報をチェックする

2006年11月09日

文字を流してみようか

文字を流すHTML

◎＜Marquee＞こんな感じ＜/Marquee＞

こんな感じ



◎＜Marquee direction="right"＞右へ流してみる＜/Marquee＞

右へ流してみる

でも、これはIEでしか反映されないのかも。


posted by こうもり太朗555 at 00:02| Comment(0) | HTML・Javaスクリプト | このブログの読者になる | 更新情報をチェックする

2006年10月29日

画像コピー防止　その２

ブログでUPした画像を無断で使用されたくない場合の対策を
前記事でいろいろと書いてきました。例えば、

　●イメージツールバーを表示させない

　●右クリック禁止のメソッド

もうひとつありました。
それは、上の対策を講じても画像をデスクトップなりにドロップ
されると簡単にコピーされてしまう。
それの対処として前記事で紹介した右クリック禁止のHTMLの後ろに
以下のHTMLを追加挿入すればよい。

＜ondrag="return false;"＞

以上。
posted by こうもり太朗555 at 23:08| Comment(0) | 画像の処理 | このブログの読者になる | 更新情報をチェックする

2006年10月19日

イメージツールバーについて

ボクはブログに写真をUPするとき、サムネイルではなくて
そのままの大きさで表示されるようにします。

その際、気になっていたのがイメージツールバー。
画像が　200pix　×　200pix　以上になったときに、写真の上に
マウスカーソルを載せると、左上に『保存』とか『印刷』とか
『Eメールで送信』とかのためにアイコンが出てしまうアレ・・・

あのイメージツールバーを非表示にさせるためには・・・
＜head＞〜＜/head＞の間に非表示にするための以下の定義を挿入
すればよいということを知りました。

　＜META http-equiv="imagetoolbar" content="no"＞

これを挿入しておけば、イメージツールバーは表示されないし
画像のコピー防止にも若干ながら一役買うかもです。
どうしてもコピーされたくない場合には、前記事に書いた
右クリック禁止のメソッドと併合して使うとよいのかも。
posted by こうもり太朗555 at 21:55| Comment(0) | 画像の処理 | このブログの読者になる | 更新情報をチェックする
-  1 2 3 4 5  次の10件>>

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 ＞　【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


posted by Seesaa ブログ