HPにブログを埋め込む

2023/08/16 03:38

このQ&Aのポイント

HPにブログを埋め込む方法について質問があります。現在、インラインフレームを使用してブログを埋め込んでいますが、ヘッダーが表示されない問題やスクロールバーが隠れる問題が発生しています。より良い方法があれば教えてください。
HPのブログに関する質問です。現在、インラインフレームの方法でブログを埋め込んでいますが、ヘッダーが表示されないことやスクロールバーが隠れることがあります。もっと良い方法があれば教えてください。
HPのブログを埋め込む方法についての質問です。現在はインラインフレームを使用していますが、ヘッダーが表示されず、スクロールバーが隠れる問題があります。他の良い方法があれば教えてください。

ベストアンサー

HPにブログを埋め込む

2012/03/23 12:08

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%で埋め込んでいるのですが、もっといい方法はないでしょうか？また、別に、インラインフレームで埋め込まなければいけないわけではありませんので、ほかにもっと良い方法があるなら、教えていただきたく思います。ご協力お願いします。

noname#233614

HTML
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

askaaska
ベストアンサー率35% (1455/4149)

2012/03/23 13:32 回答No.1

一番楽なのはサイトを上下フレーム分割して上にメニュー＋ツイッター下に各ページのコンテンツっていう風にすることだと思う今のページのどこが気に入らないのでとかいってもらえるとそれを治す方法を考えられると思うんだけどそうでないならBlogのページはとりあえず今のままでいいんじゃないの？って思っちゃう

質問者

お礼 2012/03/23 16:42

フレーム分割もいろいろ試しているのですが、なかなか上手くいかないんですよね～、、ありがとうございました。

その他の回答 (1)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2012/03/23 15:41 回答No.2

何を持って良いとするかは個人の主観だと思いますが、ブログを改造できるなら、全ページをブログシステムで作って、日記の部分をいわゆるブログっぽいデザインにして、それ以外は独自のデザインにするとか、（どう説明したらいいんでしょうか。。。 Wordpressの場合は、http://wpdocs.sourceforge.jp/Giving_WordPress_Its_Own_Directory こういう方法を使って、インストールしたディレクトリと関係ないディレクトリから投稿データや、サイドバーなどを取得できます。） SSIで埋め込むとか、（SSI用に改変しないと、<head>が２重になったりとかの不具合も出ます。） JavaScript（Ajax）でブログの一部分を取得して表示するとか。（RSS表示ライブラリのようなもの。）いろいろあると思いますが、製作技術、製作コストと相談ではないでしょうか。

質問者

お礼 2012/03/23 16:43

なるほど・・・こんなものもあるのですか。。挑戦してみようと思います。ありがとうございました。

関連するQ&A

インラインフレームの中が表示されません。
メモちょうにタグを手打ちでHPを作っています。インラインフレームをつくり、main.htmlで保存しました。そしてhpというフォルダに入れました。もう1つ、news.htmlを作成し、同じフォルダに保存しました。newsを表示させると、ちゃんと表示されていました。mainを表示させると、インラインフレームの枠自体は表示されていたのですが、中に表示させたいnewsの内容が「ページが表示できません。」となり表示できませんでした。ちなみにmainに打ち込みしたソースは下のものです。 <DIV style="top : 287px;left : 20px; position : absolute; z-index : 14; width : 365px; height : 161px; visibility : visible; " id="Layer3"> <IFRAME src="news" border="1" frameborder="1" width="385" height="157" scrolling="AUTO" ></IFRAME></DIV> 自分ではどこが間違っているか分かりません！助けてください！！！
- ベストアンサー
- ホームページ作成ソフト
インラインフレームの縦幅を、ブラウザ・画面・解像度に合わせて、自動的に調節させたいけど、IEとOperaで上手くいきません；；
現在ホームページを制作中で、初めてインラインフレームを使って制作しています。まず下記のように、インラインフレームのみで試してみたら、IE７・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。 <html> <head> </head> <body> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> 次に、インラインフレームの周りに、下記のように画像やリンクバナーなどを配置させました。 <html> <head> </head> <body> <div><img src="" width="50" height="600"></div> <div><img src="" width="150" height="600"></div> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> これも予定通り、IE７・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。次に、下記のようにそれぞれをフロートさせて配置させてみました。 <html> <head> </head> <body> <div style="float:left;"><img src="" width="50" height="600"></div> <div style="float:left;"><img src="" width="150" height="600"></div> <div style="float:left;"> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> すると、FireFox・GoogleChromeでは上手くいったのですが、IE7・Operaでインラインフレームの縦幅が100pxくらいに短くなってしまい、調節もできなくなってしまいました。それぞれを配置させるのにフロートは必要なので、どうすればよいか分からなくて困っています。何が原因で、どうすれば上手くいくか分かる方、どうかアドバイスをお願いします。
- 締切済み
- HTML
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
CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
livedoorブログでamazonへのリンク画像の横に文字を入力した
livedoorブログでamazonへのリンク画像の横に文字を入力したいのです。いろいろ調べてみてalign="left"を入れる方法を試してみたのですが、上手くいきません。リンク画像が下記の場合、どのように修正すれば画像の横に文字を入力する事ができますか？ <iframe src="・・・・・" scrolling="no" style="width: 120px; height: 198px;" frameborder="0"></iframe> よろしくお願いします。
- ベストアンサー
- ブログ
CSSでインラインフレームを非表示にしたい
初心者です。いろいろ試したのですがうまくいかないので教えてください。複数のインラインフレームのレイアウトを、スタイルシートで一括管理したいのですが、たとえば、 <iframe class="free" src="http://www.***" scrolling="no" frameborder="no"></iframe> <iframe class="only" src="http://www.***" scrolling="no" frameborder="no"></iframe> <iframe class="link" src="http://www.***" scrolling="no" frameborder="no"></iframe> と縦に並んでいるインラインフレームをｈｔｍｌは変更せずに、真ん中の「only」だけ隠すことはできませんか？スペースが空かずにfreeとlinkだけが並んでいる状態にしたいです。宜しくお願いします。 .free { width:450; height:760; border:none; margin: 0px; overflow: hidden; } .only { width:450; height:680; border:none; margin: 0px; overflow: hidden; } .link { width:450; height:680; border:none; margin: 0px; overflow: hidden; }
- ベストアンサー
- 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
インラインフレームの位置指定
インラインフレームをHPに作成したいのですが, 自分で検索したんですがインラインフレームの位置指定の方法がいまいちわからないので質問させて頂きます。 style="position:absolute;で指定したんですが、ブラウザのちょうど真ん中になかなかいきません。希望としましては、トップからは0の位置で、左右はど真ん中にしたいのですが、下記HTMLにどのようなタグを付け足せば可能でしょうか? <Iframe Src="☆.html" Width="400" Height="600" name="mintag"Scrolling="no"Frameborder="no">
- 締切済み
- HTML
ホームページを作っています、ページ内にiframeで他のページを表示さ
ホームページを作っています、ページ内にiframeで他のページを表示させています。 IEではこのiframeにスクロールバーが出て、縦に長いデータをスクロールして閲覧あせる事ができるのですが、Firefoxだとスクロールバーが出ません・・・どなたか表示させる方法をご存知でしたら教えてください。以下HTML記述 <iframe name="iframe4" id="iframe4" frameborder="0" scrolling="yes" src="topix.html" title="※※">※※</iframe> CSS記述 #iframe4{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 420px; height : 490px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; }
- ベストアンサー
- HTML
センタリングのＨＴＭＬの挿入場所
お世話になっております。前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Ｂａｃｋ"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> 　 <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> 　　 <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> 　　 <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト

HPにブログを埋め込む

HPにブログを埋め込む