• 締切済み
  • すぐに回答を!

gooブログのタイトル文字のCSSの設定について

初めまして。 gooブログアドバンスでカスタムフリーを利用しているのですが、CSSのコーディングについて教えて頂きたい事があります。 "ブログのデザイン" 全体の設定として、リンク文字は白、マウスを乗せた時に文字の色が赤で太さとサイズを若干大きくなるように設定した上で、ブログのタイトル(CSS上では".bTitle")の文字(これもリンク文字です)については、もとの色を赤にして、マウスを乗せた時に、サイズ、太さはそのままで色だけ黒になるようにしたいと思い以下のようにコーディングしました。 A:link { color: #ffffff; } A:hover { color: #ff0000; font-weight: 600; font-size: 120%; } .bTitle { text-decoration: none; font-family: Century Gothic; font-size: 170%; font-weight: 800; color: #ff0000; } .bTitle A:hover{ color: #000000; } このようにしたのですが、ブログのタイトル部にマウスを乗せても黒になりません。.bTitleに A:linkやA:visitedなどもコーディングしてみたのですが、希望通りにはなりませんでした。どのようにコーディングすれば宜しいでしょうか。因みにHTMLの部分のタグは触っておりません。どうかご助力お願い致します。 ※もし必要とされるなら、全体のCSSも記載致します。

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数102
  • ありがとう数3

みんなの回答

  • 回答No.2

テンプレートのHTMLの方が <a href="{$blogurl}" class="bTitleLink"><span class="bTitle">{$blogtitle}</span></a> となっているようでしたら、 CSSのセレクタを A.bTitle:hover にしても駄目かも知れません。 その場合は、セレクタを A.bTitleLink:hover にしてみてください。 【現】 .bTitle A:hover{ color: #000000; }  ↓ 【案】 A.bTitleLink:hover { color: #000000; }

参考URL:
http://blog.goo.ne.jp/info/blog_use20.html

共感・感謝の気持ちを伝えよう!

質問者からのお礼

mid_kazwoさん、ご多忙な中、ご回答どうもありがとうございました。 早速、HTMLのソースを確認した上で、教えていただいたように記述してみたのですが、変化が無かったようで。。。 私の知識不足でしょうか。。。 それとも、私が質問をした「タイトルのみを変更する」ということが、そもそも不可能なことなのでしょうか。

関連するQ&A

  • GOOブログのタイトル・文字位置について

    GOOでブログをやってます。 無料でカスタムできるテンプレートを使用してます。 タイトルの位置がどういうわけか、自然とタイトル画像の ど真ん中に来てしまいます。 これを左斜め上に、表示させたいのですが これは、どうしたらいいのでしょうか? 今こんな ↓ 感じであります。 /* ブログのタイトル */ .bTitle { color: #FFFFFF; font-size: x-large; font-family: VERDANA,ARIAL,SANS-SERIF,Helvetica,'MS Pゴシック',Osaka; font-weight: bold; text-shadow: #fff 2px 2px 3px; text-align: left; } ↑ leftになってるのに、ど真ん中にタイトル文字が表示されてしまいます。 もしよければ少しアドバイスをいただきたいです。 よろしくお願いします。

  • タイトルの背景に自作の写真

    CSSなど解らないまま取り掛かってしまい、不都合がでて困っています。  gooブログ カスタムブルーを編集しています。 いろいろ試したんですが、どうしても始めのタイトル文字が消えません また、タイトルのリンクもできません よろしくお願いいたします このようになっています /* ブログのタイトル部上 */ .headerLight { height:180px; background-image: url(http://blogimg.goo.ne.jp/user_image/49/cd/**166970926a7f506a0f00565c521498.jpg); background-repeat:no-repeat ; background-position: ; background-color: ; } /* ブログのタイトル */ .bTitle { color: ; font-size: ; font-weight: ; font-family: ; } /* ブログタイトルのリンク(&lt;a href="#" class="etTitleLink"&gt;で使用) */ .bTitleLink { text-decoration: none; } /* ブログの概要 */ .bDesc { color: #990099; font-size: 16px; }

  • CSSの正しい記述の仕方

    CSSの記述の仕方なんですが、下記のような書き方は正しいのでしょうか? .f14 {font-size: 14px;} .bold {font-weight: bold;} .red {color: #FF0000;} <p class="f14 bold red">あいうえお<div> HTMLには構成要素、CSSにはデザイン要素のみを記述と考えると正しくない気がしますが、 何度も使うような場合は、この方がCSSが短くなるので使っています。 どうなんでしょうか? 気にしすぎでしょうか。

    • ベストアンサー
    • HTML
  • 回答No.1
noname#17189

最後のとこ、 .bTitle A:hover{ color: #000000; じゃなくて A.bTitle:hover{ と変えてみて下さい。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

お返事遅くなってしまい申し訳ございません。(先日、お礼を投稿したのですが、私の不手際で入っていなかったようです。。) 忙しい中ご回答していただきありがとうございます。 以前、pulselazerさんが仰った A.bTitle:hover{ ともコーディングしてみたのですが、変化がなかったみたいで。。。 一体何なのでしょう。。。

関連するQ&A

  • HPの文字の色が変わりません

    gooの簡単ホームページで、文字の色変更が出来ません。 フォントのサイズは、変更出来るのですが。 カラーチャートは、gooに在る物を使用したのですが、変更出来ません。 <font size=6 color=red>○○○</font>と入力すると、○○○はredですから 赤になりますよね? #FF0000 とかREDで入力しても変更されません。 どうすれば良いか教えて下さい。

    • ベストアンサー
    • HTML
  • 触れたときに文字の色を変える方法

    こんばんは。 リンクを貼った文字を最初は赤にし、触れたときに桃色にしようと思っています。 <head></head>の中に <style type="text/css"> <!-- a:hover{color:pink;} --></style> とし、 <A href="アドレス"><font size=2 color=red>文字</font></A> のようにリンクを貼りました。 しかし、赤のままで触れても桃色になりません。 フォントで囲むのをやめると、文字は青で触れたら黄色になりました。 どうすれば私のしたいようにできるでしょうか? ご指導よろしくお願いいたします。

  • CSS、おかしいですか?

    CSSですが、本を見てやっています。 下記のように記述したのですが、書かなくてもよい記述とか、おかしいところ、ありますでしょうか? <style type=text/css> body{font-size:10pt} td {font-size:10pt; line-height:12pt} tr {font-size:10pt line-height:12pt} dive {font-size:10pt;line-height:12pt} a:link {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:visited {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:active {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} a:hover {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} </style>

    • 締切済み
    • CSS
  • 文字色が反映されない

    ホームページ作成でフォントの色を変えるのにcssで .under { color: #FE5936; border-bottom: 2px solid #e5e5e5"; font-weight: bolder; display:inline; } .green { color: #006C36; font-weight: bolder; } .red { color: #FF0000; font-weight: bolder; } .orange { color: #FF8000; font-weight: bolder; } と、設定してHTMLで<span class="○○">AAA</span>として文字の色を変えています。 いくつかHPがあって今までもそのように設定していたのですが、今更新の作業をしていて、更新作業中のサイトだけ<span>の設定が反映されているところと反映されていないところ(されていないところが大半)になってしまっていて困っています。 上記のunderは反映されるのですが、<span class="red">AAA</span>など、under以外反映されず、bodyで設定したcolorになっています。redをunderにすると反映されたりするので、redの設定がまちがってるのかと、cssの部分を打ち直したりしても変わらずです。{}で閉じてあるし、タグも</span>で閉じてあるし、display:inline;は直接関係ないと思うのですが。。。 同じCSSを使っている他のサイトでもこんなことがなかったので、どうしたらいいのか途方にくれています。 fontタグでやればできないことはないけど、cssで解決したいので、何か考えられる原因があれば教えてください。

  • FirefoxでのCSS

    Internet Explorerでは問題なく、文字の拡大表示の影響を受けないのですが、Firefoxだと、文字がでかくなったり、余白部分がずれたりします。 ヘッダーに以下を入れ、 <STYLE TYPE="text/css"> <!-- .12pt { font-size: 12px; font-weight: 200; line-height: 15px} --> </STYLE> テーブルやフォント等に <font color="#ff0000" class="12pt"> を入れています。 //////////////////////////////////////////////////////////// 問題のページは以下です。 (1)Firefoxでは文字が大きくなり、画像がずれ込む http://fuumiing.com/offer.html (2)Firefox文字自体が大きくなってしまうページ http://fuumiing.com/profile.html /////////////////////////////////////////////// 基本的に全てのFirefoxでは全てのページで 文字が大きくなります。 ・原因、もしくは ・良い解決法を ご教授下さい。

    • ベストアンサー
    • HTML
  • cssでの文字サイズ指定について

    html初心者です。 昔はHTMLソースを見れば、「font size=」と書かれていたので、すぐに文字サイズ部分がどうなっているかわかったのですが、cssの中身を見ないと、わからないんですよね?? cssで文字サイズや行間が絶対値指定で固定されているため、ユーザがサイズを変更できない。 という記載を見かけました。 このように記載されているサイトでは、Ctrlキーを押しながらマウスのスクロールを動かしても、文字サイズが変更できないのでしょうか。 cssで固定されているかされていないかを見極める方法、またcssの中身を見て確認する方法など教えてください。

    • ベストアンサー
    • HTML
  • ▲▲HTML・CSSの BODY{} について▲▲

    CSSの BODY { ○○ } の中に記入する事について質問します。 例えば。 BODY { font-size : 12px; font-family : MS UI Gothic; font-color : #FF0000 } と指定した場合、普通に<BODY>内に入力したものは、 上記で指定したものになりますか? もう1つは上記の指定以外に .font { font-size : 10px; font-family : MS UI Gothic; font-color : #000000 } 上記のものも指定したと想定し<BODY>内に あいうえおかきくけこさしすせそ <font span="font1">あいうえおかきくけそさしすせそ</span> と入力した場合<font span="font1">と指定した以外の場所は、 BODY { font-size : 12px; font-family : MS UI Gothic; font-color : #FF0000 } で指定したものになりますか? 長くてスイマセン。おわかりになる方教えてください☆

    • ベストアンサー
    • HTML
  • CSSでa要素全体をリンク出来るようにしたいのですが

    CSSでa要素全体をリンク出来るようにしたいのですが、 Firefoxなら出来るもののIE8、Sleipnirでは文字の上しかリンクされません。(文字の上にマウスを当てると全体の色は変わったりするのですが。) 5時間くらい迷ってるので少しでも分かる方、いらっしゃいましたら 何でもお願いします。。 色々検索してソースに付け加えたりしてるので適切ではないものが多々あるかと思いますが、とにかくCSSソースをそのまま載せます。 div#link ul { list-style: none outside; overflow : hidden; padding: 0; margin: 0; letter-spacing:7px; font-weight: bold; } div#link li a { display: block; width: 100%; overflow : hidden; padding: 5px; padding-left: 20px; padding-right: 0px; font-size: 14px; color: #0000ff; } div#link li a:hover { display: block; overflow : hidden; background-color: #ffff33; color: #000; } HTMLは <div id="link"> <ul> <li><a href=".html">あいうえお</a></li></ul></div>です。 なにとぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 表の文字の色やサイズの一括設定がうまくいきません

    一列の表を作って、それぞれのセルをボタンに見立てて、リンクをはろうとしています。 それぞれのセルにフォントのサイズ、種類、色を指定するとうまくいくのですが、一括設定しようとするといまくいきません。 <style type=text/css> td {font-size:20px;font-face="HGSゴシック体"; color:#000000;} </style> これで、サイズだけは変わるのですが、フォントの種類と色がかわりません。いろいろ調べたのですが、いろいろな設定を一括してする例がのっているサイトがあまり見つからず、どこが間違っているのかわからずにいます。 また、下記のようにリンクをはった場合、 <tr><td><a href="index.html">Top</a></td></tr> 同じような設定の仕方で、文字の色やサイズを変えることができますか。 よろしくお願い致します。

  • cssにおけるフォントの大きさの制御と外部ファイルについて

    現在多くの方々に見ていただけるようなホームページをと思って自分のページを制作しているのですが、フォントの大きさのことで困っています。 通常のIEではデフォルトでフォントを表示すると非常に大きな文字になるので-1のフォントを使用しています。しかしNNだと(特にお年寄りには)見づらいページになってしまうような感があります。 そこでスタイルシートでIEでもNNでもMacでもWinでも10ptの文字にして、文字にふれたときに下線がつくなどの処理をしました。 <style type="text/css"> <!-- a:link {font-size: 10pt; text-decoration:none; color:#000000; } a:visited {font-size: 10pt; text-decoration:none; color:#000000; } a:active {font-size: 10pt; text-decoration:none; color:#000000; } a:hover {font-size: 10pt; text-decoration:none; color:#FF0000; } --> </style> しかし、全く見られないなど(おそらくブラウザのバージョンにも依存するのだと思いますが)の意見もあり、困っています。 個人的には一番いい形で見てほしいし、多くの人にも見てもらいたいのでどうすればいいだろうと悩んでいます。 そこでご存じの方に教えていただきたいのですが (1)あまり負担にならない程度にそれぞれのマシンごとの識別させたい、もしくは、対応できないブラウザの場合は、通常のデフォルトサイズのフォントで見てもらうようにする方法はないでしょうか? (2)cssやjavascriptなどは外部ファイルとしてhtmlファイルからリンクさせることが可能かと思いますが、実際の場合、htmlに埋め込む場合とリンクする場合で何か変わってくることはあるのでしょうか?(ひょっとして、複数のファイルにスタイルやスクリプトを適応させることができるというぐらいのメリットなのでしょうか?) お手数おかけしますがよろしくお願いいたします。

    • ベストアンサー
    • HTML