• 締切済み

まとめブログにあるようなスクロール型のフレーム

kaban200xの回答

  • kaban200x
  • ベストアンサー率81% (18/22)
回答No.1

難しくやればいくらでも難しくできますが 一番単純なのがtableタグを使って分割する方法です。

関連するQ&A

  • ブログでのスクロール枠の設置の仕方

    <div style="margin:0px;padding:0px;" align="left"><div style="margin:0px;padding:0px;line-height:1.3;width:200px;background-color:#FFFFFF;"><div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 2px solid #66CCCC;font-family:'MS Pゴシック',Osaka,sans-serif;text-align:left;font-size:100%;height:5em;scrollbar-arrow-color:#66CCCC;scrollbar-3dlight-color:#66CCCC;scrollbar-darkshadow-color:#66CCCC;scrollbar-face-color:#FFFFFF;scrollbar-track-color:#FFFFFF;scrollbar-track-color:#FFFFFF;scrollbar-shadow-color:#FFFFFF;">文章挿入</div></div></div> スクロール枠です。 これをブログにはめ込んでるんですが、この枠をもう一つ横並びに貼り付けたいのですが、段落ちしてしまいます。 改行はしてないので、それでの段落ちではないです。 お分かりになる方、よろしくお願いします。 ライブドアブログです。

  • フレームページのスクロールバーを装飾する。

    フレームページのスクロールバーを装飾する。 忍者で二分割のサイトを作っている者です。 ページ全体のスクロールバーを装飾する事は出来ましたが、フレームページのスクロールバーを装飾する事が出来ません。 同時に、フレームページのスクロールを上下だけにしたいと思っています。 私の予想では、 <HEAD> <style type="text/css"> <!-- body{ overflow-x:hidden; } --> </style> </HEAD> <BODY> <STYLE TYPE="text/css"> <!-- Body{ scrollbar-3dlight-color:#2f4f4f; scrollbar-arrow-color:#2f4f4f; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#2f4f4f; scrollbar-track-color:#ffffff; }--> </STYLE> </BODY> ↑このHTMLでスクロールを上下だけにし、スクロールバーを装飾できるのですのですが、肝心の入れる場所が分かりません。 ↓サイトのHTML <table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%"> <tbody> <p> <tr> <td style="border-bottom: black 1px solid; border-left: black 1px solid; border-top: black 1px solid; border-right: black 1px solid" class="t" height="40%" valign="middle" width="40%" nowrap="nowrap" align="center"> <h1><br /> <tt>L・L・B</tt></h1> <!--ここからメニュー変更箇所> <td height="40%" width="60%" nowrap="nowrap" align="right"><img alt="" src="?http://*****/yanekko01.gif"? /></td> </tr> <tr> <td height="60%" valign="top" width="40%" nowrap="nowrap" align="center"> <div class="copyright">since-2010.4.10<br /> <br /> <br /> <br /> <img alt="" src="?http://*****/simpleVC_img/nitizyou3.gif"? /></div> </td> <td style="border-bottom: black 1px solid; border-left: black 1px solid; border-top: black 1px solid; border-right: black 1px solid" height="60%" valign="top" width="60%" align="center"><iframe height="100%" src="i.html" frameborder="0" width="100%" name="a" scrolling="yes" align="middle"></iframe><br /> <br /> &nbsp;</td> </tr> </p> </tbody> </table> 少しHTMLを省略しましたが、こんな感じです。 何処に入れればいいのかを教えて下さい!

    • ベストアンサー
    • HTML
  • ブログでのサイドメニュー(プラグイン)を編集しています。

    ブログでのサイドメニュー(プラグイン)を編集しています。 スクロールボックスを作っているのですが、"scrollbar-base-color"や"scrollbar-face-color"だとか項目がいろいろ設定できますが、これはいちいち値を指定しなければなりませんか? おまかせというか、ブログのテンプレートに任せる設定で構わないんですが…。 ですのでscrollbarを全部消してしまおうかと思っています。 「<div style="overflow: auto; font-size:11px; width:180px; height:50px; border: 1px #6699FF dotted;> </div>」 といった風に…。 設定したとき、表示に問題はありませんが、これは文法としては可でしょうか?

    • ベストアンサー
    • HTML
  • FC2ブログのプラグインのタグについて教えて下さい

    *スクロールバー付きのBOX* とゆうのを使わせてもらってるんですが、 文字が真ん中によってしまうのを 左よりにしたいんですが、 どうすればいいのでしょうか?。 <pre>でやってみたんですが、表示がおかしくなってしまってだめでした。 最初のタグは以下の通りです。 <div style="height:150px; overflow:auto; border:1px solid #000000; background-color:#FFFFFF; color:#000000; padding:3px; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#000000; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-highlight-color:#000000; scrollbar-shadow-color:#000000; scrollbar-track-color:#FFFFFF;">*ここにテキストや画像を入れて下さい。BOXの高さを超えないとスクロールバーは表示されません。またお洒落すクロースバーはIEのみです。*</div>

  • スクロールバーの色変更(長文)

    スクロールバーの色を設定したいのですが、下のように書くとうまく設定できません。 どこがおかしいのでしょうか? よろしくおねがいいたします。 <html> <head> <style type="text/css"> <!-- body { scrollbar-3dlight-color:#808080; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff;} body { background-image:url("top/newtop.jpg"); background-repeat:no-repeat; background-attachment:fixed; background-position:50% 20%; background-color:#ffffff; } div { text-arign:center; padding:10px; border-width:thin; border-style:dotted; background-color:transparent; } #kousinrireki{ position:static; margin-top:20px; margin-right:80%; margin-bottom:70%; margin-left:0%; } #reserve { text-arign:center; padding:0px; border-width:thin; border-style:none; background-color:transparent;     color:maroon; } --> </style> </head> <BODY TEXT="#708090"> <font size=-2> <body> <div id="kousinrireki"> ※リニューアル♪<BR> </div> <div id="reserve"> Fumio All rights reserved<BR> </div> </body> </html>

    • ベストアンサー
    • HTML
  • ブログのカスタマイズについて

    初心者のブロガーです。FC2のブログを利用しています。 以前は文字だけの記事が主でしたが、CSSを織り交ぜながらやっていきたいと考えています。 それで先週からCSS設定のサイトをいくつか訪問して勉強させていただきましたが、自分のブログに反映できません。 具体的には、ブログデザインの設定⇒スタイルシートの編集⇒必要なタグを記述<STYLE TYPE="text/css"> <!-- .boxtop { /* 更新記事のスクロールボックス */ width: 65%; height: 50px; overflow: scroll; scrollbar-face-color: #ff8c00; scrollbar-track-color: #fff8dc; scrollbar-arrow-color: #ffffff; scrollbar-highlight-color: #fff8dc; scrollbar-shadow-color: #d2691e; scrollbar-3dlight-color: #ffebcd; scrollbar-darkshadow-color: #8b0000; }--> </STYLE>⇒更新⇒新しくブログを書く⇒<div class="boxtop">ボックス内に記事を書く</div>記事は問題ないですが、スタイルシートで設定したボックスが表示されません。どうしたらいいのでしょうか?

  • スクロールについて

    <textarea rows="5" cols="45" style="border-style:solid; padding:4px;background:#FAEBD7; scrollbar-base-color:#FF0000; scrollbar-face-color: #FF0000; scrollbar-track-color:#444444; scrollbar-3dlight-color: #CCCCCC; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #CCCCCC; scrollbar-darkshadow-color: #666666; scrollbar-arrow-color: #660000;"> ここに文字を書く </textarea> ここに文字を書くの部分にyoutubeなどの嵌め込み動画を載せるにはどうすれば良いでしょうか。 例えば、 <iframe width="425" height="349" src="http://www.youtube.com/embed/kXYiU_JCYtU" frameborder="0" allowfullscreen></iframe> これをコッピーペーストして貼り付けても、スクロール内では、動画に変換されません。 どなたか、よろしくお願いします。

    • ベストアンサー
    • CSS
  • FC2のプラグインを左詰めにしたい

    <div style="height:150px; overflow:auto; border:1px solid #000000; background-color:#FFFFFF; color:#000000; padding:3px; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#000000; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-highlight-color:#000000; scrollbar-shadow-color:#000000; scrollbar-track-color:#FFFFFF;">*ここにテキストや画像を入れて下さい。BOXの高さを超えないとスクロールバーは表示されません。またお洒落すクロースバーはIEのみです。*</div> 上記のプラグイン(スクロールバー付のBOX)を導入したいのですが、 表示がセンター表示になってしまうのですが、 これを左詰表示にしたいのですが、 タグをどう変更すればよいのか教えてくださいm(__)m。

  • インラインフレーム内に画像表示

    インラインフレームの中に デジカメで撮影した画像を 表示させることはできますか? できれば、方法を教えてください。 ホームページビルダー6.5を使用していますが。 インラインフレームは HTMLサイトから <table><tbody><tr> <TD width="318"> <div style="border:1px solid #000;background:#fff;padding:2px"><TEXTAREA rows="14" cols="50" style="scrollbar-arrow-color:#000;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#000;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#000;color:#000;border-width:0;font-size:13px"> ○○○ ○○○ </TEXTAREA></div> </TD> </tr></tbody></table> を拝借して取り付けました。

    • ベストアンサー
    • HTML
  • スクロールするテーブルに背景画像を固定させたいのです

    HTMLでテーブルを作り、スクロールできる仕様にしました。そこに背景画像を入れたのですが、スクロールの際に一緒に背景画像もスクロールしてしまいます。 文字などだけをスクロール可能にして、背景画像を固定にする方法を知っている方は教えてください。 私のソースは下記です。よろしくお願いします。 <html> <TABLE border="0" width="695" background="top-6.GIF"> <TR><TD width="72" height="34"></TD><TD width="623" height="34"><font color="red"><b><center>お知らせ</center></b></font></TD></TR> </TABLE> </DIV> </DIV> <!--本体部分--> <DIV style="overflow-y:scroll;direction:ltr;width:695;height:114px"> <DIV style="direction:ltr"> <TABLE border="0" width="695" background="top-7.GIF" style="background-attachment: fixed"> <TR><TD width="72">A</TD><TD width="623">B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> <TR><TD>E</TD><TD>F</TD></TR> <TR><TD>G</TD><TD>H</TD></TR> <TR><TD>I</TD><TD>J</TD></TR> <TR><TD>K</TD><TD>L</TD></TR> <TR><TD>M</TD><TD>N</TD></TR> <TR><TD>O</TD><TD>P</TD></TR> </TABLE> <DIV style="overflow-y:scroll;direction:ltr;width:695; scrollbar-base-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF"> <DIV style="direction:ltr"> </DIV> </DIV> </html>