BLOGヘッダーの画像をJPEGからSWFに変更したい！
- BLOGヘッダーのバックグラウンドの画像をJPEGからフラッシュのSWFに変更したいです。
- 具体的には、div#headerのbackground属性の値をSWFファイルに変更する方法を教えていただきたいです。
- また、フラッシュは本文には貼り付けることができていますが、ヘッダーに貼り付ける方法も教えてください。
- ベストアンサー
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> の形式でフラッシュを本文に貼るのは成功しています。 これをヘッダーに貼りたいのです。 よろしくお願いします！
- kudumikun9
- お礼率47% (8/17)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
普通のブログではヘッダー画像をswfに、というのは出来ません。 wordpressとかで直にhtmlがいじれれば別ですが。 書いておられる div#header {～ はCSSのソースです。 CSS上にフラッシュ（swfファイル）を設置して動かす事はできません。 swfは、あくまでもhtml上に設置する必要があります。 もしくは、jsファイル（Javascript）を解するか。 いずれにせよ、普通のブログ（アメブロとかの、無料でレンタルのタイプ）は、 セキュリティ的な問題でhtmlやjsファイルを直に編集できないようになっています。 本文には設置できた、と言う方法も、 ブログとは別のサーバに置いたswfファイルをインラインフレームで表示しているだけなので、厳密に言えば「ブログに設置できた」とは言えないですかね。 まぁ、youtubeの動画を貼り付けるようなモノと基本的にはまったく同じなので、別に問題ないといえばないですけど。
関連するQ&A
- HPにブログを埋め込む
HPにブログを埋め込む サイトを運営しています。 その中の「Blog」についてなのですが、インラインフレームによって、ブログを埋め込んでいます。 <iframe src="ブログのURL" frameborder="5" style="height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe> とすると、ヘッダー（メニューバーとツイッター）が表示されないので、 ヘッダーを読み込むタグをインラインフレームのあとにしてみると、今度はヘッダーにより、スクロールバーが隠れるのです。 そのため、今は <iframe src="ブログのURL" frameborder="5" style="height:77%;width:100%;position:absolute;top:100px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe> として、100pxから初め、77%で埋め込んでいるのですが、もっといい方法はないでしょうか？ また、別に、インラインフレームで埋め込まなければいけないわけではありませんので、ほかにもっと良い方法があるなら、教えていただきたく思います。 ご協力お願いします。
- ベストアンサー
- HTML
- ヘッダーとサイドバーの色の変更の仕方
現在ヘッダーやサイドバーの色が黒なのですが、ＣＳＳのどの部分を変えることで変更可能ですか？黒はリラクゼーションには不向きなので#660033の色に変更したいのです。 どうか助けてください。 /* その他、拡張があれば記述 */ .skinHeaderFrame { text-align:center; } #navi { list-style:none; margin:0 auto; padding:0; width:605px; } #navi li { display:inline-block; padding:0 15px; *display:inline; *zoom:1; } #navi li a { padding:5px; display:block; } #navi1 a:hover, #navi2 a:hover, #navi3 a:hover, #navi4 a:hover, #navi5 a:hover { background:#996666; color:#FAF3F1; text-decoration:none; } #header { margin:20px 0 40px 0; text-align:center; width:100%; height:301px; background:url(http://www.gird.jp/ameblo/p2/images/header_bg_line.jpg); } .skinHeaderArea2 { margin:0 auto; width:980px; height:301px; position:relative; background:url(http://www.gird.jp/ameblo/p2/images/header_bg.jpg); } .skinBlogHeadingGroupArea { width:340px; position:absolute; top:50px; left:50px; } #gallery { width:450px; height:210px; position:absolute; top:46px; right:55px; background:#000; } #gallery img { position:absolute; top:0; left:0; } .skinArticle { background:none; border:none; padding:0; } .skinArticleHeader { text-align:center; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; margin:0; padding:10px 0; } .detailOn img { margin:0; } .skinSubA .skinMenuHeader { color:#faf3f1; padding:23px 0 0 30px !important; width:270px; height:41px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_header.jpg) no-repeat center top; } .skinSubB .skinMenuHeader { color:#faf3f1; padding:23px 0 0 25px !important; width:155px; height:37px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_header2.jpg) no-repeat center top; } .skinSubA .skinMenu2 { width:300px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_footer.jpg) no-repeat center bottom; padding-bottom:32px !important; } .skinSubB .skinMenu2 { width:180px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_footer2.jpg) no-repeat center bottom; padding-bottom:19px !important; } .skinSubA .skinMenuBody{ margin:0; width:260px; padding:20px 20px 0; background:url(http://www.gird.jp/ameblo/p2/images/side_body.jpg); } .skinSubB .skinMenuBody{ margin:0; width:140px; padding:20px 20px 0; background:url(http://www.gird.jp/ameblo/p2/images/side_body2.jpg); } #footer { position:relative; width:100%; height:65px; background:url(http://www.gird.jp/ameblo/p2/images/footer_bg.jpg); } #myad { width:251px; height:31px; display:block; background:url(http://www.gird.jp/ameblo/p2/images/myad_btn.png); position: absolute; left:50%; top:20px; margin:0 0 0 -125px; text-indent:-9999px; } #myad:hover { background-position:left bottom; }
- 締切済み
- CSS
- livedoorブログのヘッダの変更のしかた・・・
livedoorブログのヘッダの変更のしかた・・・ livedoorブログをはじめて、カスタマイズをしようと思って、livedoorブログカスタマイズのしかたなどが載ってるサイトをいろいろ探してみたのですが、サイトに書いてある、CSSと、はじめのlivedoorブログのカスタマイズの変更で見たCSSが全然違います。 ヘッダ画像の変更などは サイトに書いてあるのは body{ margin:0; padding:0; color:#d7d3c4; background:#000 url(http://image02.wiki.livedoor.jp/img/usr/gothic/header.jpg) no-repeat center 20px; font-size:80%; } こんなのや他にもいろいろありますが、livedoorのカスタマイズではじめのCSSを開いてタイトルエリアを見ても div.blog-title-outer { background: #dedede url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7/877e770f.jpg) no-repeat right top;/* 背景画像：右上 */ text-align: left; margin-bottom: 10px; padding-right: 10px; } div.blog-title-outer-2 { background: url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7/877e770f.jpg) no-repeat;/* 背景画像：左上 */ padding: 10px 0 0 10px; } div.blog-title-outer-3 { background: #63abec url() no-repeat;/* 背景画像：左上 */ } h1#blog-title { background: url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7/877e770f.jpg) no-repeat right top;/* 背景画像：右上 */ margin: 0; padding: 35px 30px 0; font-size: 150%; font-weight: bold; } div.blog-description-outer { background: url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7/877e770f.jpg) no-repeat bottom left;/* 背景画像：左下 */ } p#blog-description { background: url() no-repeat bottom right;/* 背景画像：右下 */ margin: 0; padding: 10px 30px 35px; line-height: 135%; } こんなので背景画像右下や左下・・・ これすべてにアップロードした画像のURLをいれてもちゃんと背景になりません。 どうすればいいのでしょうか？
- 締切済み
- ブログ
- IE6でfloatされない。
IE6でfloatされない。 横幅950pxのコンテンツの中に divで3つのboxを作って横一列に並べているのですが ie7,8, firefoxでは意図した通りに表示されますがie6ではdiv id="c"（下記ソース）がfloatされません、どなたか解決策をご指導お願いします。 <div id="a"><img src="img/left.png" width="403" height="240" alt="スペース左" title="" /></div> <div id="b"><iframe name="iframe3" id="iframe3" frameborder="0" scrolling="no" src="home.html" title="******">*******</iframe></div> <div id="c"><img src="img/right.png" width="403" height="240" alt="スペース右" title="" /></div> css記述は下記の通りです #a{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #b{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 144px; height : 240px; float : left; display : inline; } #c{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #iframe3{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 144px; height : 240px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; } 宜しくお願いします。
- 締切済み
- HTML
- 甲子園フォーム規制？
<iframe width="420" height="315" src="http://www.youtube.com/embed/CgYcrfia-eQ" frameborder="0" allowfullscreen></iframe> わかりますか？
- 締切済み
- 野球
- CSSのレイアウトについて
CSSのレイアウトをダウンロードしました。 初心者ながら調べてやっていたのですが、2点ほど分からない点があります。 ・ヘッダー、フッター含め全ての幅を画面いっぱいにしたい。 widthを100%にしてみたのですが、レイアウトが崩れるだけで画面幅いっぱいにはなりませんでした。 ・3カラムの真ん中を固定幅900pxにしたい。 ご存知の方いらっしゃいましたらご教示ください。よろしくお願いします。 以下がCSSのソースです。 * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { width: 922px; } #header { color: #333; width: 900px; float: left; padding: 10px; height: 200px; background: #E7DBD5; } #navigation { float: left; width: 900px; color: #333; padding: 10px; margin: 0px 0px 0px 0px; background: #BD9C8C; } #leftcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #content { float: left; color: #333; background: #F2F2E6; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 460px; display: inline; } #rightcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #footer { width: 900px; height: 200px; clear: both; color: #333; background: #BD9C8C; padding: 10px; }
- 締切済み
- 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; } よろしくお願いします。
- 締切済み
- ブログ
- 指定したborderの一部が表示されない
以下のようにboxを作りその中にフロートさせた2つ(div class="b"とdiv id="c"を作り、 div class="b"の方にdiv class="nwesbox"を作り、その中にiframeを入れました。 問題はdiv class="nwesbox"に上下左右に表示指定したborderの線の右側のみブラウザ（ie7)で表示されません？ div id="c"を取り除くと表示されます、nwesboxやiframeの幅を変更したりしてみましたが 解決できなく困っています、どなたか教えていただけますでしょうか？ 宜しくお願いします。 以下html記述-----↓ <div class="box"> <div class="b"> <div class="nwesbox"><iframe id="iframe" frameborder="0" scrolling="yes" src="whats.html" title="お知らせ">お知らせ</iframe></div> </div> <div id="c"> <p>*****</p> </div> 以下CSS記述------↓ .box{ width : 898px; margin-left : 0px; margin-top : 0px; padding-left : 0px; margin-bottom : 0px; } .b{ width : 575px; margin-left : 0px; margin-top : 10px; background-color : #ffffff; padding-left : 10px; float : left; margin-right : 0px; } .nwesbox{ width : 575px; height : 233px; background-color : #ffffff; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #0080ff #0080ff #0080ff #0080ff; } #iframe{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 573px; height : 228px; padding-top : 0px; overflow : auto; margin-top : 0px; } ↓---iframe内に読み出してる先のテーブルに指定した内容（テーブル幅）--- #what{ width : 545px; background-color : #ffffff; margin-top : 0px; }
- 締切済み
- HTML
- ＣＳＳのフッター部分について
ＣＳＳ初心者です 今回外部ＣＳＳで作成したのですが途中まではうまくいきました しかし最後のフッターを入れるとレイアウトが崩れるのです。 今回の形状はページに上から「ページ(ホームページタイトル)」「ヘッダー(サブタイトル)」「同域上に左右に分けて「submanu」「main」」として最後にfootで「コピーライトなどを書いて」閉めたいのです 作ったCSSは以下の通り(どこが悪いのでしょう(foot入れるまで理想に近づいていたのですが)) *{ margin: 0px; padding: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #66FFFF; width: 720px; margin: 0px; } div#head { width: 720px; padding: 5px 5px 0px 0px; margin: 0px; background: #FF00FF; } div#main { margin: 0px; border-left: 1px solid #FF; padding: 20px 0px; background: #00CCFF; width: 560px; height: 5000px; float: left; } div#submenu { width: 160px; height: 5000px; margin: 0px; padding: 20px 0px; float: left; background: #00FF33; } div#foot{ clear:both; text-align:center; font-size:10px; background:#FFFFFF; width:720px; height:20px; }
- 締切済み
- CSS
- テキストを画像の右にしたいのですが・・
ブログパーツで下記のものを使用しています。 <div style="text-align:left;padding-top:10px; padding-bottom:5px"> <iframe src="http://chiccuri.sakura.ne.jp/blog_parts/kisotaisya.html" width="168" height="250" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" hspace="0" vspace="0"></iframe><p style="font-size:13px; margin-top:2px;"></p></div> このパーツの右に文章を回りこみさせたいのですが、どこにどのようなタグを挿入すればいいのでしょうか？ <div style="text-align:left;float:left;padding-top:10px; padding-bottom:5px"> ではうまくいきませんでした。 初心者ですが、よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
ありがとうございました！ できました！