• ベストアンサー

特定の文字にCSSを適用したい

ブログを書いております。 記事にコメントがあった時の「コメント(1)」といった表示を、コメントの有無で太字にしたりノーマル表示にしたいと思っています。 コメントが無いときは・・ コメント(0)をfont-weight:normal; とノーマル表示。 コメントが有るときは・・ コメント(1)をfont-weight:bold; とボールド表示させたいです。 Javascriptを使用して、特定の条件にのみCSSを適用するにはどうしたら良いでしょうか? 宜しくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.2

なんだ簡単じゃない。 <a>~</a> の間 <b:if cond='data:post.numComments == 1'> 1 <data:top.commentLabel/> <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if> これが何を意味しているのか考えればいいのよ。 Googleブログのアカウントもっていないからわからないけど 言葉から連想すると <b:if cond='data:post.numComments == 1'> コメントが1件のときの表示 <b:else/> コメントが1件以外のときの表示 </b:if> になっているわ。 たぶん <data:post.numComments/>はコメントの件数 <data:top.commentLabelPlural/>は「コメント」という文字かしらね。 ここまで判れば コメントが0件のときの表示 コメントが0件以外のときの表示 ができるでしょうから 何とかなるわね。

bombrea
質問者

お礼

回答ありがとうございます! 色々試した結果、<b>1 <data:top.commentLabel/></b>こうするだけで太字にできました! commentLabelは「コメント」という文字で、commentLabelPluralはコメントが複数の場合、を指すようです。 本当にありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

コメントの数を表す変数を $comment_num と仮定すると コメント(0) は <span style="comment_style">コメント($comment_num)</span> と記述されているのね。 これを <span style="comment_style"><span style="comment_style2_$comment_num">コメント($comment_num)</span></span> こうするのよ。 スタイルcomment_styleには太字にするを設定。 スタイルcomment_style_0には太字にしないを設定。 これで勝てるわ。

bombrea
質問者

お礼

回答ありがとうございます。 widgetでコードを確認してみたものの、数値をカウントするコードの箇所がいまいちどういう仕組みなのか分かりませんでした。 「コメント(0)」のコードを、ヴィジェットから抜き出します。ここで、コメントの数値がカウントされるようです。 以下です。 <span class='post-comment-link'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if> </span> それはそうと、 Javascriptで、「コメント(0)」という文字列を検索して、該当する文字列のみCSSでノーマル表示を指定する、という方法は出来ないのでしょうか? (太字表示をデフォルトに指定する事は出来るので。)

bombrea
質問者

補足

補足になりますが、ブログはBloggerを使っております。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 特定の文字のみcssを適用するには?

    いつもお知恵拝借しておりますm(_ _)m さて、最近cssをかじり始めたところなのですが、ページ中の特定の文字(例えば「愛」)という文字のみにフォントスタイルを適用することは可能でしょうか? 現在は、「HTMLソース」の画面で「愛」という部分を「<font color="#cc0000">愛</font>」という風に置換させています。 これをcssで記述することが出来るかどうか?という質問です。 xp+ホームページビルダー10です。何とぞよろしくお願いします。

  • IEでCSSが適用されません。

    現在作成中のページがあるのですが、IEで作成状況をF12で確認すると、 全くCSSが反映されず、グチャグチャに表示されてしまいます。 FireFoxでは、問題なく表示されるのですが・・ div, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote { font-size:100%; font-weight:normal; list-style-image:none; list-style-type:none; margin:0; padding:0; } dl { font-size:100%; font-weight:normal; list-style-image:none; list-style-type:none; margin:0; padding:0; } dt, dd { margin-bottom:2px; margin-top:2px; } 上記をCSSに組み込んで、リストタグの中黒を消すようにしているのですが、IEでは中黒が表示されたままです。 どうすれば良いのでしょうか。 教えて下さい!!

  • 特定のページにのみ特定のCSSを適用させる方法

    グーグルブログ(blogger)を利用しています。 特定のタグでページをリスト表示した時のみ、特定のCSSを、あらかじめ指定しておいたdiv部にのみ適用させる。といったJavascriptのコードを教えてください。 *ちなみに、タグでページをリスト化したときのURLは以下です。(exampleは例です) http://example.blogspot.com/search/label/example/ どうぞ宜しくお願いいたします。

  • 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
  • jQueryで特定のcssプロパティの値を書き換えたい

    jQueryで特定のcssプロパティの値を書き換えたい html上にインラインで記述しているスタイルのうち、特定のプロパティの値のみをjQueryで書き換えることはできますでしょうか。 具体的には↓ <span style="font-size: 16px;font-weight: bold;">テキスト1</span> <span style="color: #f00; font-size: 16px;">テキスト2</span>を <span style="font-size: 18px;font-weight: bold;">テキスト1</span> <span style=""color: #f00; font-size: 18px;">テキスト2</span>に style属性のfont-size: 16px;をfont-size: 18px;にしたい。 他は変えずそのままにしたい。 $(function() { $('span').filter(function() { return ($(this).css("font-size","16px")); }).css("font-size","18px") }); http://okwave.jp/qa/q5310183.html 似たような質問が上記でされていて、真似て書いてみたのですが、これだとfont-sizeが16pxでないものも全て18pxに書き換わってしまいました。 不勉強でお恥ずかしい限りですが、詳しい方いらっしゃいましたらどうかご教授ください。 よろしくお願いいたします。

  • CSSを一部無効にしたい

    CSSを一部無効にしたい 今HTML4.01 Transitionalを使用してページを作成しているのですが、 外部cssで、以下のような全体にかかるスタイルを適用しています。 * { border:0 none silver; font-style:normal; font-weight:normal; } このなかのborder: 0 none silver だけを その外部のcssをいじることなく、html上で無効にしたいのです。 HTMLの方でstyleを使うことで上書きすることは可能なのですが、無効にするだけのやり方が分からず、質問させていただきました。よろしくお願いします。 (カテゴリを間違えていたため再投稿させて頂きました)

    • ベストアンサー
    • HTML
  • CSS:スタイルシートでテキストリンク

    教えてください!! 外部ファイルのスタイルシート(CSS)を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 IE6.0では問題なく起動していますが、NS7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか? ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のCSSの記述】 .menu { font-family: "MS Pゴシック", Osaka; font-size: 12px; font-style: normal; line-height: 14px; color: #FFFFFF; text-decoration: none; } .menu a:link { color: #FFFFFF; text-decoration: none; } .menu a:visited { color: #FFFFFF; text-decoration: none; } .menu a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; } .menu a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; }

  • CSSでBODYに入れた値が引き継げない

    CSSファイルを外部ファイルとしてHTMLへ読み込ませています。CSSファイルにはBODYへフォントの指定をしましたが、フォントの指定だけが引き継げません。どなたか原因のわかる方教えてください。お願いします。 一応設定したCSSを記載します。 body{ font-family: "MS Pゴシック", "Osaka"; font-size: 80%; line-height: 140%; font-weight:normal; font-style:normal; background-color: #FFFFFF; }

    • ベストアンサー
    • HTML
  • CSSの正しい記述の仕方

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

    • ベストアンサー
    • HTML
  • CSSについて

    h3 { font-size: 120%; font-weight: bold; line-height: 1.0em; } という記述がスタイルシート内にあるのですが、 それを使って文字を書くと文字の下が大きく間が開いてしまいます。 何かつけ足せば間が開かなくなるのでしょうか? 例えば、 <H3>あいうえお</H3>かきくけこ というソースにすると、 ------------------------- あいうえお  (大きめの文字で太字)        (間が開いてしまう)  かきくけこ  (通常サイズの文字) --------------------------

    • ベストアンサー
    • HTML