FC2ブログのスタイルシート編集について教えて下さい。
- FC2ブログでのスタイルシート編集について詳しく教えてください。
- FC2ブログのスタイルシートを編集して他URL上の画像を表示したいが上手く表示されない。
- プレビューでは表示されるが更新後に表示されない件について相談したい。
- ベストアンサー
FC2ブログのスタイルシート編集について教えて下さい。
FC2ブログのスタイルシート編集について教えて下さい。 ブログ画面上方中央に他URL上の画像を表示したいのですが上手く表示できません。 プレビューで確認した時は上手く表示されているのですが「更新」すると表示されていません。 /*****ヘッダ-------------------------------------------------------------------------------------------*/ div#header { width: 800px; height : 135px; background-color:#fafafa; font-size:90%; background : url(http://省略.JPG) no-repeat center top } 宜しくお願いします。
- ブログ
- 回答数1
- ありがとう数6
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
推測１：編集中のテンプレートと適用中のテンプレートが違う？ 「複製」したテンプレートを編集しており、「適用」をし忘れている。 （見た目のデザインが同じなので気づかない） 推測２：古いキャッシュを見ている？ ブラウザの履歴やキャッシュを削除してみる。 複数使っているなら全部削除してみる。特にIE。 （仕組みはわからないがそれで最新の状態が見えるようになる）。
関連するQ&A
- BLOGヘッダーのＪＰＥＧをＳＷＦに変更したいです
BLOGヘッダーのバックグラウンドの画像をJPEGでなくフラッシュのswfを配置するには どこをいじれば入いるか、HTMLに詳しい方いたら教えてください＞＜切実です。 div#header { float: left; width : 850px; height: 350px; background: url(xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg) no-repeat; background-color: #808080; margin: 0px; padding: 0px; text-align: left; } フラッシュは本文には <iframe width="850" height="350" src="http://blog-imgs-43.fc2.com/s/e/v/xxxxxxxxx/xxxxxxxxx.swf" frameborder="0" allowfullscreen></iframe> の形式でフラッシュを本文に貼るのは成功しています。 これをヘッダーに貼りたいのです。 よろしくお願いします！
- ベストアンサー
- CSS
- exciteブログでトップに画像を表示させたいのですが
exciteブログを使っていますが、ブログのタイトルのところに画像を載せたいです。 DIV#TOP { BACKGROUND : #6F8294 url(http://～～～～～（ここは省略させていただきます。）) : no-repeat ; border-bottom : 5px solid #c1d6f8 WIDTH : 700PX; HEIGHT : 200PX; } とCSSで設定したのですが画像が表示されません。 間違っているところを教えていただきたいです。 どうぞよろしくお願いします。
- ベストアンサー
- ブログ
- 外部スタイルシートは同じなのですが…
こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div> ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright © 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシートで設定した背景にLINKを貼りたい
#header_area{ height:80px; padding: 0 0 10px 0; background: url(images/header.png) no-repeat 100% 20px; } ヘッダー部分の右端にheader.png（468*60pix）の画像を配置してあります。 HTMLでこの画像にURLリンクを貼りたいのですが、 いろいろ試してみましたがうまくいきません。 画像にリンクを貼るにはどうしたらよいでしょうか？
- ベストアンサー
- ブログ
- ブラウザの問題でしょうか?(スタイルシート編集)
カテを変えて、再度質問させて頂きます。 説明等解かりにくい点がありましたらお許し下さい。 現在Netscape7.1(?・・・多分)で、"teacup"blogのスタイルシートを編集しているのですが、 画像の位置が思った所に表示されません。 【width: 780px; height : 200px;】・・・の範囲に画像を横方向にリピートさせ、 上下の位置を任意、またはbottomで使用したいのですが、 指定をしてもプレビューではtopに表示されてしまいます。 (以下の様に指定してみたのですが・・・) background-image: url(～/×××.gif); background-position : bottom; background-repeat: repeat-x; しかし、IE6.0(?・・・多分)でプレビューさせてみると、きちんと指定した位置になっています。 以前記事本文を書く領域の指定で、NetscapsとIEの差が出て失敗した事があるので、 両者のブラウザーには違いがある事は承知しています。 そこで質問なのですが、 1)Netscapeでは画像の細かい位置指定は、表示出来ないのでしょうか? また、この件とは別件なのですが、 2)【width: 780px; height : 200px;】と言う範囲の中で、 background-image: url(～/×××.gif); background-repeat: repeat-x; ・・・と言うライン状の物を上下に配置させる事は出来るのでしょうか? (画像の高さとしては範囲内に充分入る大きさです) 2)の件に関しては、色々と知恵を絞って指定したみたのですが出来ず、 背景にこのライン状の物を任意で位置指定をして、範囲内上部辺りに固定、 もう1本を上記の範囲内のbottomに固定・・・として、 範囲内の上下に配置されているように見せてみたのですが・・・。 (コレもIEでのみプレビュー成功でした) 初心者用サイトも見て回ったのですが、どう応用すれば解決できるのか解かりません。 ご回答頂けると助かります、よろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- FC2ブログ ロールオーバー
私はＦＣ２でブログをやっていてheaderの画像をロールオーバーを使いマウスが上に行ったときに違う画像が表示されるというのに挑戦し以下のものを使ってみたのですがFireFoxではちゃんとロールオーバーできたのですがＩＥやスレイプニルだとロールオーバーできません。何か心辺りのある方がいらっしゃいましたらご教授お願いします。 #header_body { width: 810px; /* 画像1枚分の横幅 */ height: 250px; /* 画像1枚分の高さ */ margin:10px 5px 10px; background-image: url("http://～"); /* 画像ファイル名 */ } #header_body:hover { background-position: top right; /* 背景画像の表示開始基準を右上に変更 */ }
- ベストアンサー
- ブログ
- スタイルシートでのデザイン
HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- CSS
- 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; } よろしくお願いします。
- 締切済み
- ブログ
- ｆｃ2ブログのｈ1タグの表示位置の変更の仕方
どなたかｆｃ2ブログのｈ1タグの表示位置の変更の仕方を教えてください。 今、ｆｃ2ブログで共有テンプレートの「ナビゲーター4（レスポンシブル対応）」を使って、アフィリエイト用のブログを作っています。それで問題が発生して困っています。へッダー（縦400ｐｘ横1000ｐｘ）は自分で作ったものを使ったのですが、このテンプレートはそもそもヘッダーの真ん中の位置にｈ1タグ（タイトル）が表示される作りになっていて新しいヘッダー画像の文字と重なってしまうので、ｈ1の位置を変更しようといろいろ試みました（HTMLやCSSをいじり、ヘッダーの左端の一番上に変更しようとした）。 しかし、思った場所には変更できませんでした。たぶん、CSSの該当箇所をいじればできるとおもうのですが、どうすればいいかがわかりません。どなたかご指導していただけないでしょうか？ ※HTML、CSSの関係個所を書いておきます。情報が足りなければ、後で情報追加します。 〇HTMLの該当部分 <body> <!--ヘッダーここから--> <header id="l-header"> <div id="l-header-inner"> <img id="bgimg" src="http://blog-imgs-110.fc2.com/b/e/n/benpitaisakukyousitu/201708291447134cf.png" alt="橋" width="100%" height="100%" /> <div class="l-header-inner2"> <h1 class="blog_name"><a href="<%url>"><%blog_name></a></h1> <h2 class="blog_introduction"><%introduction></h2> </div> <nav class="menu"> <nav class="menu-inner"> <ul> <!--category--> <li><a href="<%category_link>" title="<%category_name>"><strong><%category_name></strong></a></li> <!--/category--> </ul> </nav> </nav> </div> 〇CSSの該当部分 responsive PC設定 ２カラム @media screen and (min-width:960px) { #l-header { position: relative; width:100%; } #l-header-inner { width: 100％; margin: -10px 0px 0; min-height:50px; padding: 0; overflow: hidden; background-color:; } .l-header-inner2 { position: absolute; width: 100%; top: 20%; left:0; } .all-box { width:960px; margin: 0 auto; } .blog_name { width:95%; margin-top: 20px; padding: 0px 0 0px 15px; font-size: 30px; line-height: 1.7em; color: white; text-align: center; background-color: ; } .blog_name a { color: white; } .blog_introduction { width:95%; margin-top: 0px; padding: 0px 0 10px 20px; font-size: 16px; color: white; text-align: center; background-color: ; }
- ベストアンサー
- CSS
- Firefox2.0で背景が上段に集まってしまいます。
以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "ＭＳ Ｐゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer { clear: both width: 900px; background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・（ロールオーバーリンク） </div> <div id="header"> ・・・・・（MPEG画像） </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>
- 締切済み
- CSS
お礼
御礼が遅くなりました。 回答していただきましてありがとうございました。 試してみましたが、残念ながら上手くいきませんでした。 これからも色々試してみたいと思います。