アプリ版：「スタンプのみでお礼する」機能のリリースについて

ホームページ上の文字の色を変える方法

解決済

  • 質問者：miharin
  • 質問日時：
  • 回答数：4件

今、ホームページビルダーを使ってホームページの作り直しをしています。
それで、ページ上の普通の文字（ロゴなどではないと言う意味）の上に、マウスを当てると、文字の色が変わるようにしたいのです。それをクリックすると、リンクする設定になっている文字に対してです。
いったい、それは、どのようなことをしたらそうなるのでしょうか？素人には無理でしょうか？
自分なりに、それはスクリプトなのではないかな、と考え、それを説明している無料サイトなども見ているのですが、「文字の色を変える」などというのは見つからず、今ひとつ分かりません。
もし、よければどなたか、教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： starflora
  • 回答日時：

　


　　hover のスタイルシートでの色指定は、すでに答えが出ています。しかし、次のようなヴァリエーションがあります：
　
　　１）
--------------------------------------
　
</HEAD>

<style type="text/css">
<!--

A:active {text-decoration: none; color: #ff0000}
A:hover {text-decoration: none; color: #0000ff}

.pink-text {text-decoration: none; color: #ffa0e0}
.sky-text {text-decoration: none; color: #c0c0ff}
.green-text {text-decoration: none; color: #007000}

-->
</style>

　…………

<a href="Test001.html">Test001</a><br>
<a href="Test002.html" class="pink-text">Test002</a><br>
<a href="Test003.html" class="sky-text">Test003</a><br>
<a href="Test004.html" class="green-text">Test004</a><br>

　　これは、何かといいますと、Link の色や、Visited の色は指定していないので、Test001 のリンクは、デフォルトの青が「リンク」で、赤紫が「訪問済み」の色になりますが、Test002, Test003, Test004 のリンクは、ピンク、空色、緑という風に、色指定ができます。リンクの文字を、普通の <font color="#">で色指定すると、リンクの色指定や、スタイルシートでの hover 色の指定は有効になりません。上のように、スタイルシートで、特定のリンクを色指定すると、文字に自由な色を付けることができ、しかも、hover 色が有効になります。
　
　　しかし、上の方法だと、Link や Visited の色指定はできません。それも好みの色にしようとすると、次のようにします：
　
　　２）
----------------------------------------
　
</HEAD>

<style type="text/css">
<!--

A:active {text-decoration: none; color: #ff0000}
A:hover {text-decoration: none; color: #0000ff}

.pink-text {text-decoration: none; color: #ffa0e0}
.sky-text {text-decoration: none; color: #c0c0ff}
.green-text {text-decoration: none; color: #007000}

-->
</style>

<BODY Link="#7040ee" Vlink="#009090">

　…………

<a href="Test001.html">Test001</a><br>
<a href="Test002.html" class="pink-text">Test002</a><br>
<a href="Test003.html" class="sky-text">Test003</a><br>
<a href="Test004.html" class="green-text">Test004</a><br>

　…………

</BODY>

　　このように、スタイルシートでは、リンク、Ｖリンクの色指定はせず、<BODY>タグのなかで、リンク、訪問済みリンクの色指定をすると、この指定の色にリンクや訪問済みリンクの色が指定されます。無論、この場合も、スタイルシートで色指定した文字は、リンクであっても、色は指定通りです。そして、hover は有効です。（実際にコピーして確認してみられると分かります。これは、通常のリンクの色指定と、スタイルシートでの色指定などの優先順位の違いを利用しています。ブラウザーにより、あるいは説明通りに表示されない可能性がありますが、スタイルシートの hover 指定が可能な場合、上の方法も可能なはずです）。
　
    • good
    • 0
    • 件
通報する
この回答へのお礼

本当にありがとうございました。
色の設定もできました。
ただ、ｔｅｓｔ１からｔｅｓｔ４までの記述があり、ホームページ作成サイト上に
出てきますよね。それは、なんのために出すのでしょうか？
これで、確認しみて必要なくなったら消す、というものか、または、これをコピーして張り付けて文字を打ち直して使う物か、と想像はしいています。
本当にＨＰ初心者なもので、１つやると、また１つ疑問が出て来るという状態です。

通報する
お礼日時：2001/11/21 07:51

No.3

  • 回答者： usawing
  • 回答日時：

下の方に補足致します。


私自身、ホームページビルダーを使っている訳ではないので、不鮮明な部分等あるかもしれませんが、ご了承下さい。

HTMLソースを開くと、あれこれ書いてあると思いますので、
</TITLE>の後に、
<STYLE TYPE="text/css">
<!--
A:link { color: blue;}
A:hover { color: red;}
-->
</STYLE>
を貼り付ければ、リンクを張っている部分が青に、カーソルをあわせた時が赤になるようになっています。
{color:○○○;}
○○○の部分にカラーネーム（redや、blueなど）または、カラーコード（#ff0000や、#0000ffなど）を入れることで色の指定が出来ますので、好きな色に指定し直してくださいませ。

#>NIGHT2000さん。
勝手にソースをコピーして書かせていただきました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
文字の色が変わるようになりました。

通報する
お礼日時：2001/11/21 07:52

No.2

下で回答した者です＾＾；


勢いあまって、リンクのアンダーラインまで操作してしまいました。

以下のソースで充分です。

<HTML>
<HEAD>
<TITLE>色替えテスト</TITLE>
<STYLE TYPE="text/css">
<!--
A:link { color: blue;}
A:hover { color: red;}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<A HREF="test1.html">test1</A><br>
<A HREF="test2.html">test2</A><br>
<A HREF="test3.html">test3</A><br>
<A HREF="test4.html">test4</A><br>

</BODY>
</HTML>
    • good
    • 0
    • 件
通報する
この回答へのお礼

すみません、少しやってみたら、できました。
ありがとうございました。

通報する
お礼日時：2001/11/16 20:59

No.1

こんな感じですね＾＾



重要なのは、<STYLE TYPE="text/css">と</STYLE>で囲まれた部分です。ここで、リンクにマウスカーソルがのったときの色の指定などを行っています。
カラーのblueとかredとかを変更すれば、いろいろ試せますよ＾＾

<HTML>
<HEAD>
<TITLE>色替えテスト</TITLE>
<STYLE TYPE="text/css">
<!--
A:link { color: blue; text-decoration: none; }
A:hover { color: red; text-decoration: underline; }
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<A HREF="test1.html">test1</A><br>
<A HREF="test2.html">test2</A><br>
<A HREF="test3.html">test3</A><br>
<A HREF="test4.html">test4</A><br>

</BODY>
</HTML>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
ところで、すみませんが、これをどこに書くのでしょう？
（ほんっとに、申し訳ありません、恥ずかしい限りです）
(1)ＨＴＭＬソースを開いてそこに、直接書き込む
(2)スクリプトを設定したいところをドラッグして＜挿入＞→＜スクリプト＞を開いて書き込む
この２つあたりがそうではないか？と見当つけてるんですが……？
まったく初心者なんですけど、仕事上ＨＰ作成しなければならず、しかも、
よせばいいのにスクリプトに興味を持ってしまいましって。近くに誰も分かる人がいないのです。

通報する
お礼日時：2001/11/16 20:16

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報