- 締切済み
CSSが反映されなくて困っています。
アメブロでカスタマイズをしています。 いろいろ追加したり修正したりしていましたら、 何もしていないコメント欄の文字すべてが 急に大きくなってしまいました。 ネットで調べたＣＳＳ /*コメントタイトル*/ #comment_module .title{ font-size:12px; } /*コメントラベル*/ #comment_module .label{ font-size:12px; } /*名前*/ .comment_footer span.comment_author{ font-size: 12px; } /*日付*/ .comment_footer span.comment_date{ font-size: 12px; } /* コメント */ #comment_module .each_comment{ font-size:12px; } を入れてみましたが、変わりません・・。 キャッシュも削除しましたし、とじかっこも抜けていないと思います。 教えてください。よろしくお願い致します。
- knyacki08
- お礼率0% (0/2)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- noris02
- ベストアンサー率74% (56/75)
アメブロ自体を使っていなく、私自身も初心者ですが 以前、他のブログサイトでCSSをいじり、反映されなくなった事を思い出しました。 そのとき 確認したこと 1 id classが 反映されているか。 例： /* コメント */ #comment_module .each_comment{ font-size:12px; background-color:#cccccc; ←背景をかえてみる。 } これで 背景色が変わらなければ もちろん font-size:12px;も うまくいかないわけで。 #comment_module .each_comment{ ・・・ } は 無意味なくくりとなってきます。 ｈｔｍｌが↓ <!-- comment --> <div id="comment_module"> ・・・ <div class="each_comment"> <p class="label">■コメントタイトル■</p> <p class="comment_body">■コメント■</p> <div class="comment_footer"> <span class="comment_author">■コメント者名■</span> <span class="comment_date">■コメント日時■</span> </div><!-- //.comment_footer --> </div><!-- //.each_comment" --> ・・・ </div><!-- //#comment_module --> となってるみたいなので、ここの font-size ですよね。 背景が変わらない場合は 他のタグ<div> <span><p>で font-size等指定してないでしょうか？ 私の場合は <body>タグで優先的に指定をしていた為、細かいところが 無視された結果でした。 なんやかんや ですが、 cssの優先順位等の記述については http://park19.wakwak.com/~zashiki/css-make/cascade.html
- metametamu
- ベストアンサー率51% (153/295)
IEならブラウザ側のフォントサイズの大きさは変えていませんか？
補足
ありがとうございます。 ＩＥですが・・・ブラウザ側は何もいじっていません・・。 記事自体のサイズは変更できたのですが、 コメント欄だけできないので・・。
関連するQ&A
- MT コメントフォームのテキストエリアの『横幅』を変更したい
ブログテンプレートをデフォルトを元に編集しています。 エントリーテンプレートを編集しているときに気づいたのですが、コメントフォームのテキストエリアの横幅の値を変えても、ある幅までにしか縮みません。もしかしたら編集する場所が間違っているかもしれませんが、お助け願います。 ついでに編集したあとのコメントフォームの例です。 <label for="comment-author">名前:</label> <input id="comment-author" name="author" size="20" /> <p id="comments-open-text"> <label for="comment-text">コメント: <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label> <textarea id="comment-text" name="text" rows="5" cols="40"></textarea> </p>
- ベストアンサー
- ブログ
- CSSを動的出力部分で対応させたい
以下のようなソースで、動的に出力されるコンテンツのレイアウトに対応したいと思っています。 "Cat_StyleP_img_1"、"name_"、"comment_"のクラス指定したDIVエリアは動的に出力される部分です。 --CSS-- div.mainframe_ { float: right; display: inline; overflow: hidden; } div.container_ div.contents_, div.container_ div.mainframe_ { width: 700px; } div.CategoryStyleP_ { width:100%; overflow: hidden; padding-bottom: 20px; } div.CategoryStyleP_Line_ { width: 102%; overflow: hidden; padding: 10px 0 10px 10px; margin-bottom: 10px; } div.CategoryStyleP_Item_ { float: left; display: inline; width: 340px; margin-right: 10px; padding: 10px 0; overflow: hidden; background: #fff; } div.CategoryStyleP_Item_ .Cat_StyleP_img_ { float: left; display: inline; width: 140px; } div.CategoryStyleP_Item_ .Cat_StyleP_main_ { float: left; display: inline; width: 180px; padding-right: 10px; } div.CategoryStyleP_Item_ h3.name_ { padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #cfcfcf; font-size: 14px; font-weight: bold; } div.CategoryStyleP_Item_ div.comment_ img { margin: 0 0 10px 0; } --html-- <body > <div class="container_"> <div class="contents_"> <div class="mainframe_"> <div class="CategoryStyleP_"> <div class="CategoryStyleP_Line_ heightLineParent"> <div class="CategoryStyleP_Item_"> <div class="Cat_StyleP_img_"> <a href="#"><img src="img/usr/cat-sample.png" alt="動的出力画像1"></a> </div> <div class="Cat_StyleP_main_"> <h3 class="name_"> <a class="category_name_" href="#">タイトルA</a> </h3> <div class="comment_">コメントです。ここにはコメントが入ります。コメント、コメント。 </div> </div> </div> <div class="CategoryStyleP_Item_"> <div class="Cat_StyleP_img_"> <a href="#"><img src="img/usr/cat-sample.png" alt="動的出力画像2"></a> </div> <div class="Cat_StyleP_main_"> <h3 class="name_"> <a class="category_name_" href="#">タイトルB</a> </h3> <div class="comment_">コメントです。ここにはコメントが入ります。コメント、コメント。 コメント、コメント。</div> <span class="comment_">コメント、コメント。</span><span class="comment_">コメント、コメント。</span><span class="comment_">コメント、コメント。</span></div> </div> </div> </div> </div> </div> </div> </body> このレイアウトで出力する画像が無かった場合、"Cat_StyleP_img_1"のDIV自体が出力されない 仕様なのですが、画像の出力がない場合に、その他2つ（"name_"、"comment_"）の要素を横に広げて、 画像の出力が無かった場合の空きスペースが埋まるようにしたいのですが、何か良い方法はありませんでしょうか？ JavaScriptではなくCSSで何とか対応したいと考えています。 お助け下さい、何卒宜しくお願いします。
- 締切済み
- CSS
- CSSが反映されない… 初心者です。
<html> <head> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- .f1{ font-family: "book antique"; font-size: 10px; } --> </head> <body> <span class="f1">本文</span> </body> </html> という簡単な指定をしてみたのですが、実際には何も書かれていない真っ白な画面になり、スタイルシートが反映されないです。 ブラウザが悪いのかと思いFirefoxとIEで試したのですが、やはり真っ白な画面になってしまいます…。 他のサイトのCSSを含んだソースをコピーして試したところ、問題なく反映できるのでブラウザのせいではないと思うのですが、自分で書いた書き方では反映されないので、やはり書き方に問題があるのでしょうか？ geocitiesを利用しております。 よろしくお願いします。
- ベストアンサー
- HTML
- 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に書き換わってしまいました。 不勉強でお恥ずかしい限りですが、詳しい方いらっしゃいましたらどうかご教授ください。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- CSS backgroundが反映されません
CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }
- ベストアンサー
- CSS
- アメブロ コメント欄 ゲストの背景変更について
アメブロのコメント欄 ゲストの背景の変更について質問です。 ＣＳＳには↓ /*ゲストコメント背景 */ #comment_module .each_comment{/*コメントタイトル部分*/ margin: 0; padding-bottom:10px;/*コメントとコメントの間*/ background: url(画像１);/*上画像のURL*/ background-repeat : no-repeat; background-position: center top; color:#ff6600;/*←ゲストコメント文字色変更の場合*/ } #comment_module .comment_body{/*コメント文章部分*/ margin: 0; padding:5px 30px 10px;/*コメント分の上と左右と下の余裕*/ background: url(画像);/*中画像のURL*/ background-repeat : repeat-y; background-position: center top; } #comment_module .comment_footer{/*コメントフッター部分*/ margin:0; padding: 5px 0 90px; background: url(画像３);/*下画像のURL*/ background-repeat : no-repeat; background-position: center bottom; } フリープラグインには <SCRIPT LANGUAGE="JavaScript"> <!-- /* 0902a exlink */ function exAc() { var myUrl="http://ameblo.jp/ＩＤ/"; var myLimit=500,e=0,k=1,i,nC="admin_comment",oC="each_comment"; var Ent = document.getElementById ("main"); var myLinks = Ent.getElementsByTagName("a"); for(i = 0; i < myLinks.length; i++){ var myLink = myLinks[i]; if(myLink.href == myUrl){ var Com = myLink.parentNode.parentNode.parentNode; if(Com.className == oC ){ Com.className = (Com.className).replace(oC,nC);}} k++;if (k > myLimit) {break;}}} function enThickbox() {exAc(); try {initializeUpload(false, false);} catch(e) {} try {checkpw();} catch(e) {}} window.onload = function(){enThickbox();} // --> </SCRIPT> を貼っても なぜかゲスト欄の背景だけが変わらず困ってます＾＾； 管理人のは変わるんですけどね＾＾； わかるかた教えてください＞＜
- 締切済み
- ブログ
- CSSが反映されません。
当方html＋cssの練習中の者です。 いままでは、WindowsXPのメモ帳でhtmlとcssを手打ちして、chromeとIE8で開いて確認していました。 そして今週、Windows7に乗り換え、練習で作成したhtmlを開いたところ、 デフォルトスタイルシートの状態で表示されました。 ・ htmlとcssは同じフォルダに収めてあります。 ・ ファイル名は、「○○.html」と、「style.css」で、エンコードはどちらもUTF-8です。 ・ ブラウザはIE10で、設定は何もいじってない、デフォルトの状態です。 ・ chromeでも試しましたが、同じくCSSは反映されません。 ＝＝＝＝＝＝＝＝＝＝＝＝↓htmlです↓＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8> <title>あきまん - プロの画力向上法まとめ</title> <Link rel="stylesheet" href="style.css"/> </head> <body> <header> <h1>プロの画力向上法まとめ</h1> </header> <article> <h1>あきまん</h1> <h3>方法論：量 長期戦 <br>出自：東京デザイナー学院中退 → アニメーター → 株式会社カプコン入社 → イラストレーター</h3> <h2>どうすれば絵が上手くなりますか？</h2> <p> 本心にうまくなりたかったら <br>～以下省略～</p> </article> <footer> <small>Copyright © WATASHI no NAMAE, all right reserved.</small> </footer> </body> </html> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＝＝＝＝＝＝＝＝＝＝＝＝↓CSS↓＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ body {font-family: 'メイリオ', 'hiragino kaku Gothic pro', sans-serif; background-color: lightgray} h1 {font-size: 38px} h2 {font-size: 29px} h3 {font-size: 21px} p {line-height: 1.15} ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 手打ちなのでミスがあるかとも思って インターネットでhtmlやcssの解説をしているサイトからコピー＆ペーストしたりしましたが、 結果は同じでした。 仕事でhtml使わなきゃいけないので、こんな最初の段階で止まってるわけにいきません。 ご回答をよろしくお願いします。
- ベストアンサー
- CSS
- 至急 ヤプログ カスタマイズ サイドバーについて
現在サイドバーをカスタマイズしているところなのですが、画像のようにずれてしまい思うようになりません。 (1)サイドバー自体をスペースの空いている左よりにしたい。 (2)PR・プロフィールなどのタイトルもそれに合わせたい。 カスタマイズ初心者なためあまりタグの意味を理解しておらず、どこの数値を変更してよいかわかりません。 タグは以下です。 /*-------------------------------------- クラス ---------------------------------------*/ .side_title { margin-bottom: 0px; padding: 10px 100 10px 10; background: url() no-repeat left; font-size: 15px; text-transform: capitalize; text-align: center; color: #FFF; font-weight: bold; } #conts .title { margin: 0 0 10px 15px; padding: 14px 0 13px 10px; background: url(画像) no-repeat; font-size: 15px; font-weight: bold; color: #662C6B; } /* トラックバック・コメント・検索レイアウト */ #trackbacks, #comments, #comment_input, #comment_pending, #comment_error, #no_search_results, #no_search, #dynamic_pages_error { margin: 0 40px 0; } /* サイドナビ */ .side { margin-bottom: 10px; line-height: 1.2; } /* サイドナビリスト */ .side_text { margin: 0px 0px 0; padding: 3px 230px 15px 20px; } .side_feed { } .sidebox { background: url(画像) repeat-y; } サイドバーのタグはここだと思うのですが、もし違うようでしたらご指摘頂きたいです。
- 締切済み
- ブログ
- Bloggerのデザイン・カスタマイズについて。
先日からBloggerを使い始めました。カスタマイズも楽しく、気に入って使わせていただいておりますが、検索してもわからなかった些細なカスタマイズについてご質問させてください。 1） 投稿とフッターの間 通常、投稿すると以下のように表示されます。 昨日は美術館に行きました。 来週は動物園に行きます。 --------------------------- 時刻 10:25 3 コメント この場合、「動物園に行きます」と横線の間に、10～14pxほどの縦の余白（padding-top、padding-bottom）があると読みやすくなるんじゃないかと思うのですが、投稿の最後に毎回改行したりタグを付けるのではなく、テンプレートを編集することによって（投稿部分か投稿のフッター部分を編集して）自動的にそうすることは可能でしょうか。 2） blockquote内のフォントサイズ blockquoteで囲った引用内でフォントサイズを変更したいのですが、blockquote内では「-1」といった指定は出来ないのでしょうか。＜span style="font-size: 10px;"＞などで、ピクセル指定や％指定は出来るようなので、「-1」指定が絶対に必要というわけではないのですが、出来るかどうか興味があったので質問させていただきました。 どうぞご回答よろしくお願いいたします。
- ベストアンサー
- ブログ
- コメント欄全体を枠で囲み各記事ごとにコメント番号をつける方法
FC2ブログのテンプレート工房 http://10plate.blog44.fc2.com/ 上記サイトのライトフレームを使っているのですが 各記事ごとにコメントに番号をつけ、 コメント欄全体を枠で囲む 簡潔なカスタマイズ方法をお教えください ＨＴＭＬ部 <!--comment_area--> <a name="comment_list"></a> <!--comment--> <div class="comment_outline"> <div class="comment_title"><a name="comment<%comment_no>" id="comment<%comment_no>"><%comment_title></a></div> <div class="comment_body"> <div class="comment_text"><%comment_body></div> <div class="comment_navi"> [ <%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute> ] <SCRIPT LANGUAGE="JavaScript"> v = "<%comment_url>"; iffunc(v); function iffunc(b) { if (b) { document.write("<a href='<%comment_url>' target='_blank'>"+"<%comment_mail>"+"</a> <a href='<%comment_url>' target='_blank'><%comment_name></a>"); } else { document.write("<%comment_mail> <%comment_name>"); } } </SCRIPT> [ <a href="<%comment_edit_link>" title="コメントを編集">編集</a> ] </div><!--/comment_navi--> </div><!--/commnet_body--> </div><!--/comment_outline--> <!--comment--> シート部 .comment_outline { border:#000000 2px solid; background-color:#FFFFFF; text-align:left; margin-bottom:20px; } .comment_title { font-size:10pt; color:#ffffff; font-weight:bold; background-color:#000000; text-align:left; border-bottom:#666666 1px solid; padding:5px 20px; } .comment_body { font-size:10pt; color:#000000; border-top:#cccccc 1px solid; } .comment_text { text-align:left; margin:10px 20px; } .comment_navi { text-align:right; margin:0px 10px 3px; } 現状の上記のHTMLでは各コメントが2pixの枠で囲まれ 「タイトル」 本文 （右寄せ）投稿日時投稿者[編集] となります。 これを改変して 各コメントでなくコメント欄全体を枠で囲み （左寄せ）コメント番号Titled by「タイトル」投稿者投稿日時[編集] 本文 と変更したいです 知識不足ゆえの質問ではございますが お分かりの方がいらっしゃったらお答えしていただけると幸いです どうかよろしくお願いましす
- 締切済み
- HTML
補足
ありがとうございます。 やっぱり変わりませんでした・・。 書いて頂いたほかのタグも探してみましたが・・使用していないです。