- ベストアンサー
FC2ブログで引用に背景色をつける
タイトルの通りなんですが、FC2ブログにある【引用】を使うと四角で囲まれるんですがその中の背景色を変えたいと思っています。いろいろなサイトでやり方が書いてあったのでやってみたのですがどれをやっても色が変わりません。 スタイルシートに以下を貼り付けました。色コードをかえたりもしましたが何をやっても変わりません。 何が悪いのかもわからず・・・。 初心者です。よろしくお願いします。 blockquote{ margin:15px 20px; padding:10px; border:1px solid #:CCCCCC; background:#EAFFD5; }
- kewpie0106
- お礼率70% (45/64)
- ブログ
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- FC2ブログ テンプレートのCSS編集について
こちらのテンプレート http://labyrinth2014.blog.fc2.com/ 記事が長くなると、右サイドメニューの背景が 下部のフッターから離れてしまいます。 この背景は画像になっていますが、記事の長短に関わらず、 フッターまで伸ばすには（繋がるように）どうしたらよいでしょうか。 /* 全体の幅 -------------------------------------------------*/ #container{ text-align: left; width: 950px; padding: 0px; border-right:1px solid #ddd; border-left:1px solid #ddd; margin:0 auto; line-height: 110%; background-color: #fff; } /* 右カラムの幅 -------------------------------------------------*/ #right{ float : left; width : 280px; overflow: hidden; background-color: #eee; background-image : url(http://blog-imgs-35.fc2.com/w/e/b/weboook/gray3.png); background-repeat:repeat; } /* メインの幅 -----------------------------------------------*/ #main { float : left; width : 670px; margin:0px; padding: 0px; overflow: hidden; } ・ ・ ・ 中略 ・ ・ ・ /* サイド右側*/ .sidetitle{ color: #333; font-size:16px; font-weight : bold; text-align: left; background: url(http://blog-imgs-35.fc2.com/w/e/b/weboook/whiteline.png) repeat; padding: 5px 5px 6px 8px; margin : 0px 0px 0px 0px; } .sideblock{ font-size:12px; line-height: 150%; padding: 10px 5px 10px 5px; margin-bottom:15px; } .side ul { padding: 0px; margin : 0px; } .side li { list-style-type : none; display:block; text-align: left; font-size: 12px; color:#333333; line-height: 130%; } .side li a { padding:6px 5px 5px 10px; display:block; border-bottom:1px solid #ddd; } .side li a:hover{ background-image : url(http://blog-imgs-35.fc2.com/w/e/b/weboook/bgGray.png); background-repeat:repeat; text-decoration:none; padding:7px 4px 4px 11px; } よろしくお願いします。
- 締切済み
- ブログ
- ブログのテンプレートに関する質問です。FC2で 166_simple_
ブログのテンプレートに関する質問です。FC2で 166_simple_3cと呼ばれるテンプレートを使用していまして、ブログのトップに画像背景を設定したいと思いました。 いろいろ調べてこちらのリンクにたどり着きましたが、http://blog298.blog25.fc2.com/blog-entry-492.html cssを書いてある通りに編集してもうまくいきませんでした。 リンク先での説明によると以下の#headBlockより下の部分を設定すると画像が見えるように なるようですが、できませんでした。どこかおかしなところがありますでしょうか。 以下スタイルシートをコピーしてきました。 /*head要素 */ #headBlockBase { padding: 0px 4px 0px 4px; } #headBlock { background : #123456 url("ここに画像のURLが入っています"); } width: 100%; margin: 0px; padding-top: 10px; } html>div #headBlock { width:100%;margin: 0px; } h1 { font-size: 24px;margin: 0px;padding:5px 0px; } html>h1 { font-size: 24px;margin: 0px;padding:5px 0px;
- ベストアンサー
- ブログ
- floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- ベストアンサー
- HTML
- FC2のテンプレ
http://stupid69.blog5.fc2.com/blog-entry-52.html ↑のテンプレの右側を使いたいと思ってます。 画像枠をポラロイド風にしたいと思い、前使ってたジュゲムでは、 .pict { background-color: #f7f7f4; border-width: 2px; margin: 5px 10px 5px 5px; padding: 10px 10px 50px 10px; border-style: solid; border-color: #e2e2db #c4c4ac #c4c4ac #e2e2db; background-image:url (); background-repeat:no-repeat; background-position:95% 95%; } ↑これで反映されましたが、Fc2では反映されません。 何が間違ってるのでしょうか？
- ベストアンサー
- ブログ
- 画像に背景色と境界線を付けたい。
いつもお世話になります。 画像の周りに背景色その外側に線を引きたく思っています。 (1) <div style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > <img src="**.jpg" alt="**"> </div> と、すれば可能ですが (2) <img src="**.jpg" alt="**" style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > とすると境界線は表示されても背景色が表示されません。 (1)のように<div>タグを用いなくて、(2)のように<img>タグのみで(1)のようなことはできないものでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- fc2ブログのスタイルシートについて
h1～h6タグの文字の大きさ＆改行（しない）を変更したいのですが、 fc2ブログのスタイルシートのどこに書き込めばいいのか分からない状態です。 色々調べてみたのですが、どうしても分からないので、分かる方がいましたら、教えて下さい。 よろしくお願いします。 ソースは、こちらになります。 （文字数が足りないので数ヵ所省きました）↓ body{ font-family: "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic","Arial","Osaka"; margin:0px; margin-left:auto; margin-rught:auto; padding:0px; background-color: #FFFFFF; color:#666666; text-align:center; letter-spacing:1px; word-break: break-all; } #container{ width:840px; margin-right:auto; margin-left:auto; padding:0px 0px; background-color: #FFFFFF; border-left:1px solid #DECE21; border-right:1px solid #DECE21; } /* ### 共通のタグ ### */ blockquote{ font-family: "MS UI Gothic","Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; margin:15px 0px; padding:10px; background-color:; border:1px dashed #996600; font-size:12px; line-height:150%; width:90%; voice-family:"\"}\""; voice-family:inherit; width:90%; } html>body blockquote{ width:90%; } blockquote p{ margin:0px 0px; padding:0px; line-height:150%; } h1.blogtitle{ position:absolute; width:820px; font-family: "Century Gothic","MS UI Gothic","ＭＳ Ｐゴシック", "Arial","Osaka"; padding:0px; margin:0px; top:3px; left:20px; color:#333333; font-size:24px; font-weight:normal; z-index:1; } h1.blogtitle_back{ position:absolute; width:818px; font-family: "Century Gothic","MS UI Gothic","ＭＳ Ｐゴシック", "Arial","Osaka"; padding:0px; margin:0px 0px 0px 1px; top:4px; left:21px; color : #CCCCCC; font-size:24px; font-weight:normal; z-index:0; } /* ### メイン部（左側） ### */ #main{ width:590px; float:left; margin:0px; padding:0px; } #contents{ margin:0px 20px 0px 20px; padding:0px; text-align:left; width:590px; voice-family:"\"}\""; voice-family:inherit; width:550px; } html>body #contents{ width:550px; } /* ### エントリー（記事） ### */ .e_title{ font-family: "MS UI Gothic", "Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; height:20px; text-indent:60px; margin: 0px 0px 0px 0px; padding: 10px 0px 0px 0px; color:#967B3F; font-size:14px; font-weight:bold; letter-spacing:1px; } .e_date{ font-family: "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic", "Arial","Osaka"; margin:0px 0px 30px 60px; text-align:left; color:#999999; font-size:10px; line-height:150%; letter-spacing:1px; } .e_body{ font-family: "MS UI Gothic","Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; margin:0px 0px 15px 0px; margin-bottom:25px; padding:0px ; color:#444444; font-size:12px; line-height:155%; letter-spacing:1px; } .e_body img, .e_body a img{ margin:2px; border:0px; } .e_body_w{ margin:0px; padding:5px 15px 5px 15px; background-attachment: scroll; background-image: url(http://blog-imgs-41.fc2.com/a/w/i/awitchsally/aws_np03_point.gif); background-repeat: no-repeat; background-position: 0% 0%; border:1px solid #E9F3E9; } .e_more{ margin:30px 0px 15px 0px; padding:0px; text-align:left; color:#333333; font-size:10px; font-weight:bold; letter-spacing:1px; } .e_state{ font-family: "Verdana","ＭＳ Ｐゴシック","MS UI Gothic", "Arial","Osaka"; margin:5px 0px; text-align:left; color#967B3F; font-size:10px; letter-spacing:1px; line-height:150%; font-weight:bold; }
- ベストアンサー
- HTML
- HTML 微妙なずれを修正したいです。
http://matsudamakoto.web.fc2.com/index.html 上記URLの ナビゲーションと画像が微妙にcenterからずれてしまっているように感じます。 これらをうまくcenterに表示する方法を教えていただけませんか？ cssのソースを提示させていただきます。 よろしくお願いいたします。 body { font-size:14px; line-height:150% } h1 { color:black; border-left:10px solid #cccccc; border-right:10px solid #cccccc; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; font-size:16px; padding:10px 0 10px 0; text-align:center; } p { text-align:left; border-left:10px solid #cccccc; border-right:10px solid #cccccc; padding:0 0 0 20px; } #menu { list-style-type:none; text-align:center; } #menu li { display:inline; border-right:5px solid #cccccc; padding:0 20px 0 20px; } .main { width: 100%; } .main div { width: 50%; margin: 0 auto; }
- ベストアンサー
- ホームページ作成ソフト
- Blockquoteの背景の画像のwidthを調節したい [スタイルシート]
こんにちは。ブログのテンプレートを作っています。 そこで、blockquoteの背景に画像を使用しているのですが、この画像のwidthをbcockquoteのwidthに応じて変更させることは可能でしょうか？ 現在のCSSの設定は以下のようになっています。 blockquote{ background: #EEE url(img/blockquote.png) no-repeat bottom left; /*border: 1px solid #E0E0E0;*/ padding: 10px 10px 30px 10px; margin: 1em 1em 1em 3em; width:400px; } 使用している画像(blockquote.png)のwidthが250pxで、photoshopで直接加工してしまってもいいのですが、何とかしてweb側で400pxに引き伸ばす事ができたらなぁ、と思っています。 <img>タグのように簡単にないものでしょうか？ご存知の方おられましたらどうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- gooブログ 本文と背景の間に余白を入れたいのですが、できません。
gooのブログを使用しています。 スキンはシンプルなものを使用してCSSで編集しています。 ブログのスタイルは、全体の背景色は白ですが、 さらに文章の後ろに読みやすいようにベージュの背景色つけています。 しかし、その背景と本文（左側）がきちきちで、もう少し右にずらして 余白を作りたいと思っています。 CSSの編集画面で、このようにしていますが、全く反映されません。 paddingとmarginどちらかよく分からないのですが、どちらでやってみても無理でした。私のやり方が間違っているのでしょうか。 よろしくお願いします。 /* エントリー本文 */ .etBody { font-size: 10pt; line-height:130%; word-break:break-all; padding: 0px 0px 0px 50px; } /* エントリー本文背景 */ .entryBg{ padding: 10px; background-color:#EEE5DE; margin: 0px 20px 30px 0px; }
- ベストアンサー
- ブログ
- ブログのタイトル文字色について。
fc2でブログを始めました。 色々検討して、公式テンプレートの「life」というものを選択しました。 ただ、タイトルの背景画像だけ変更しようと思い、色々苦労した結果、変更できました。 しかし、タイトルの文字色が灰色のため、今のままではタイトルがひどく見づらいのです。 そこでタイトルの文字色を変更しようとしましたが、どうにもそれに該当する部分が分かりません。 以下にスタイルシートを貼りますので、どなたかご教授下さい。 body { font-family: Verdana ,sans-serif,Osaka; background: #eee; background-image: url(http://templates.blog.fc2.com/template/life/bacck6.gif); background-position: 0 0; background-attachment: scroll; background-repeat: repeat; font-size: 83%; line-height: 1.6; margin:0; color:#232323; } a:link { color:#bbb; text-decoration: none; } a:active { color: #999; text-decoration: none } a:visited { color: #777; text-decoration: none } a:hover { color: #d00; text-decoration: underline; } /* h1 を大きくとって、背景画像を見せてます。 */ /* 出来る人は div 要素なんか使って、テンプレ弄った方がいろいろいいかも */ h1 { background: #070; /* 背景を差し込む場合は高さ 150px ぐらい推奨 */ background-image: url(http://blog-imgs-59.fc2.com/n/a/m/namakedaruma/201304221809488f4.jpg); background-position: 0 0; background-attachment: scroll; background-repeat: repeat; margin: 0; font-size: 150%; /* 文字の位置を変える場合、上下合わせて 6em 取るといいかも */ padding: 3em 3em; /* 位置を真ん中にしない場合は以下で文字位置設定 */ /* padding: 3em 0.7em 3em 0.7em; */ border-left: 1px solid #000; border-right: 1px solid #000; } h1 a:link { color: #fff; text-decoration: none; } /* h2 要素は現時点で、横向きカレンダーで被せてるんで擬似背景設定になってます */ h2 { background: #000; background-image: url(http://templates.blog.fc2.com/template/life/back2.gif); background-position: 0 0; background-attachment: scroll; background-repeat: repeat; margin: 0; padding: 0.5em; text-align: center; font-size: 100%; font-style: normal; border-left: 1px solid #000; border-right: 1px solid #000; color: #fff; border-top: 2px solid #000; border-bottom: 2px solid #000; } /* h2 要素に被る横カレンダー設定 */ .yokocal { position: absolute; left: 10%; top: 16em; border: 1px solid #000; background: #777; padding: 0.3em; text-align: center; margin: 0; font-size:75%; } /* 背景色透過で、h1 要素最下部に表示する場合や、横カレンダーを表示させない場合は、 以下の設定の方がしっくりきます。*/ /* 背景画像によって、文字色の変更 */ /* この場合は h2 要素が見えるようになります */ /* h2 要素の上下のパディング 0.5em が大きくて気になる場合は減らす */ /* 参考までに h2 要素の上下パディングを 0 にした場合、 以下で記述の right 属性の top のプロパティを 14.5em から 13.4em へ変更 */ /* .yokocal { position: absolute; left: 10%; top: 13em; padding: 0.3em; text-align: center; margin: 0; font-size:75%; } */ /* 横カレンダーの日付はリストを inline で横に並べてるので、不具合ある人もいるかも。*/ .yokocal li { color: #000; display: inline; margin: 0 0.1em; } .yokocal a{ font-weight: bold; } .yokocal a:link { color: #fff; text-decoration: underline; } .yokocal a:visited { color: #999; text-decoration: underline; } .yokocal a:hover { color: #f00; text-decoration: none; } /* レイアウト設定 */ /* レイアウト構成は left の中に right を左側に入れ込んでるという感じ。 そのために、left 属性では左に大きくパディングを取ってます。 ので、left でも実際は、右側に表示されることになります。*/ /* 記事表示部分 */ .left { margin: 0; margin-left:1px; padding: 0 0 0 18.7em; border: 1px solid #000; background: #fff; } /* メニュー部分 */ .right { background: #ffe; background-image: url(http://templates.blog.fc2.com/template/life/back3.gif); background-position: 0 0; background-attachment: scroll; background-repeat: repeat; width: 15.5em; border-right: 1px solid #000; border-left: 1px solid #000; border-bottom: 1px solid #000; position: absolute; padding: 1.7em 0.7em; top: 14.5em; left: 0; color: #232323; /* left 属性のボーダーを使うためその分の余白 */ margin-left: 1px; } .right p{ margin: 0.3em; font-size: 80%; } .right a:link { color:#333; text-decoration: none; } .right a:active { color: #999; text-decoration: none } .right a:visited { color: #666; text-decoration: none } .right a:hover { color: #d00; text-decoration: underline; } /* メニューの見出し*/ .right h3 { font-size: 80%; font-family: Verdana ,sans-serif,Osaka; font-weight: normal; color: #000; letter-spacing: 0.1em; margin: 1.7em 0 0 0; padding: 0.2em 0.2em 0.2em 0.7em; background: #ffd; bo
- ベストアンサー
- ブログ
- ネットに繋がらない状況でエレコム製品について質問があります。ご利用の端末タイプや製品名、型番、接続方法、発生時期などの情報を詳しく記載しました。
- YouTubeの動画は観ることができるが、ネット（Googleなどで検索）ができない状況です。本体のPowerランプは緑色で点灯しており、2.4・5GHzランプは白点滅しています。
- エレコム株式会社の製品を使用している際にネットに接続できない状況が発生しています。具体的な端末タイプや製品名、型番、接続方法、発生時期などの詳細情報をお伝えいただきました。
お礼
ありがとうございました。 解決しました。