スクロール式テーブル内での改行を反映させる方法

このQ&Aのポイント
  • アメブロのサイドバーでスクロール表示式の<table>タグを使いたいのですが、本文内が改行できず困っています。
  • 「フリースペース」「フリープラグイン」のどちらで試しても改行が反映されません。スクロール素材を使わずにスクロールが可能な方法を教えてください。
  • 質問者はアメブロでスクロール表示式のテーブルを使いたいが、本文内の改行が反映されない問題に困っている。フリースペースやフリープラグインを試したがうまくいかず、他の方法を教えてほしいということです。
回答を見る
  • ベストアンサー

スクロール式テーブル内での改行を反映させる方法

アメブロのサイドバーでスクロール表示式の<table>タグを使いたいのですが、本文内が改行できず困っています。 アメブロの「フリースペース」「フリープラグイン」のどちらで試しても改行が反映されません。 スクロール素材は以下のソースのものです。 <!--★始まり--> <table cellpadding="7" cellspacing="2" bgcolor="#225599" width="320" style="font-size:13px;"> <tr><th bgcolor="#bbbbbb"> タイトル </th></tr> <tr><td bgcolor="#ffffff"> <textarea rows="6" style="width:100%;border-style:none;scrollbar-base-color:#88f6c6;"> 本文 本文 本文 本文 </textarea> </td> </tr> <tr><td bgcolor="#bbbbbb" height="16"></td></tr> </td> </tr> </table> <!--終わり★--> 「フリースペース」の方で上記タグを入れると、 プレビュー欄に自動で<br />タグが挿入され その状態で本文が表示されてしまいます。 「フリープラグイン」の方では 文字と文字の間で改行ができるものの なんの文字もない部分で「行間を1行あける」という事ができません。 フリースペースでもプラグインでもどちらを使っても構わないのですが 改行を反映させる方法(タグなどの挿入)があるでしょうか? 上記の<table>タグを使わなくても スクロールができるような素材でしたら構わないのですが。 何かありましたら教えて下さい。

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

  • ベストアンサー
  • 756co
  • ベストアンサー率79% (162/203)
回答No.2

補足読みました。 こちらでは アメブロのフリープラグイン、フリースペースの両方で大丈夫でしたが…。 テキストエリア(<textarea>)は使わず ↓をそのまま使っていますか? <div style="width:100px;height:50px;overflow:scroll;"> 文章を入れる <br />も使えます。 </div> <div>~~~</div>の間に文章をそのまま書いて構わないですよ。

yyicmlote
質問者

お礼

>テーブルを使わず という事でtableタグを削除して (<textarea>)は使ってしまってました(汗) (<textarea>)を削除して<div style~を挿入したら動作しました!! ご丁寧にありがとうございましたm(__)m

その他の回答 (1)

  • 756co
  • ベストアンサー率79% (162/203)
回答No.1

テーブルを使わず、ブロック要素として上下の幅を指定し スクロールバーを表示する方法もあります。 例: <div style="width:100px;height:50px;overflow:scroll;"> 文章を入れる <br />も使えます。 </div> 横幅(width)や縦幅(height)は適宜調節してください。

yyicmlote
質問者

補足

参考になりましたm(__)m テーブルではなく、教えて頂いた<div>を入れてみたのですが アメブロのフリープラグイン独自の属性なのか? 本文内に<br />を入れると、やはりそのまま表示されてしまいます(汗) 他のブログ会社のフリープラグインやHPでしたら 上記タグで全然問題ないと思うのですが・・・。 アメブロでは無理なんでしょうかね(>_<)

関連するQ&A

  • テーブル内で改行を防ぐには

    td要素内に記述したテキストは通常、自動改行されますが、数字の場合自動改行されません。そのため横スクロールする必要があったり、サイトデザインがくずれたりします。 自動改行をされるようにするにはどうしたら良いでしょうか。 例えば、下記のようなソースです。 <table><tr><td> 012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</td></tr></table>

    • ベストアンサー
    • HTML
  • tableをcssで表記したい

    下記のhtmlのスタイル部分をcssで表記したいのですが、 どのようにすればよいのでしょうか? tableの種類が一つの場合はできるのですが・・・ <table width="100" border="1" cellpadding="1" cellspacing="1" bgcolor="#AAAAAA"> <tr> <td width="30" bgcolor="#FFFFFF">a</td> <td ">b</td> </tr> </table> <br> <table width="50" border="2" cellpadding="2" cellspacing="2" bgcolor="#BBBBBB"> <tr> <td width="25" bgcolor="#CCCCCC">c</td> <td>d</td> </tr> </table>

  • テーブル内のスクロール

    初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか?どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • tableで横スクロールバーが・・

    tableの高さがブラウザの表示範囲を超えると 少しだけ右の方に空白ができ、 横スクロールバーが出てきて醜い状態になってしまいます。 タグは、大まかにこのような感じで、 外部スタイルシートを適用させていて、 tableには枠線をつけています。 <body scroll="auto"> <table style="width:720px;" class="枠線、パディング、マージン等"> <tr> <td colspan="2" style="background-image:url("***.jpg(720x150pxの画像)"); width:720px;height:150px;"> <a href="リンク">リンク</a> </td> </tr> <td colspan="1" width="100%"> <!メニュー部分> </td> <td colspan="1"> <!本文部分> </td> </tr> <tr> <td> <!著作権表示> </td> </tr> </table> </body> 本文が少なければ、tableの高さがブラウザの表示範囲の中に収まるので 横スクロールバーは出ませんが、 収まらないときには横スクロールバーが出てしまいます。 横スクロールバーを出さないようにするにはどうすればよいのでしょうか? 分かりにくい箇所があればご指摘をお願いします。 回答をお待ちします。

    • ベストアンサー
    • CSS
  • TEXTAREAの改行をデータへ反映

    よろしくお願いします。 フォーム上で入力した値をCSVに反映させるようなものを作っているのですが、TEXTAREAで改行した値がCSVデータ上で改行されなくて困っています。 <TABLE>  ・  ・  ・ <TR> <TD>コメント:</TD> <TD><TEXTAREA NAME="COMMENT" rows="2" cols="40"></TEXTAREA></TD> </TR> </TABLE> 入力した値: ---------- あああ※ いいい※ ううう        ※位置で改行 ---------- CSVデータ内: ~,あああいいいううう webサーバー・・・HP-UX web・・・IE 開発端末・・・windows2000(Tera Term 使用) 以上。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • tableタグについて(ウェブリブログ)

    ウェブリブログの記事内にテーブルタグで『表』は表示出来たのですが、公開ページを見ると表と同じだけの行数が上部にスペースとしてあきます。 記事作成ページでは改行はしてませんし、空白行もありません。 タグは↓です。 <table bgcolor="#000000"border=1> <tr><td>●●</td><td>■■</td><td>▲▲</td></tr> <tr><td>●●</td><td>■■</td><td>▲▲</td></tr> <tr><td>●●</td><td>■■</td><td>▲▲</td></tr> <tr><td>●●</td><td>■■</td><td>▲▲</td></tr> </table> 単純な表ですが別な表示方法があるのでしょうか? できればタグが知りたいです。

  • テーブルの枠の中にテーブルを設置

    TOPページに下記のような大きな4等分の枠なしテーブルを作り、中にテーブルを埋め込みたいと思っています。 <TABLE border="0" width="700" height="500"> <TR> <TD>●1</TD> <td>●2</td></TR> <TR> <TD align="left" valign="bottom">◎1</TD> <td align="center" valign="middle"> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="8" cellspacing="0" bgcolor="greenyellow"><tr><td align="center"> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="4" cellspacing="0" bgcolor="#ccff99"><tr><td align="center"><font color="mediumseagreen">★ ★ ★</font> おしらせ <font color="mediumseagreen">★ ★ ★</font></td></tr> <tr><td bgcolor="white"> <textarea cols="28" rows="5"> ここに文字 </textarea> </td></tr></table> <br> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="3" cellspacing="0" bgcolor="white"><tr><td bgcolor="white"> 最終更新 ≫ </td></tr></table> </td></tr></table> </TR> </TABLE> (HEADの間にスタイルシートを挿入します。) このように書くとテーブルを入れた場所の親テーブルが大きく広がってしまいます。 広がらずにテーブルを形成する方法をご教授下さい。 初心者で申し訳ございません。

    • ベストアンサー
    • HTML
  • テーブル内でdivを使った時に改行しないようにする

    テーブル内でdivを使った時に改行しないようにするには? <table border=1 cellspacing=1 cellpadding=1> <tr><td>a<DIV style="font-size:50%;">50%です</DIV></td><td>b</td></tr> <tr><td>c</td><td>d</td></tr> </table> このような事をすると、「a」と「50%です」の間が開業されてしまいます。 文字を小さくしつつ改行しないようにする方法を教えてください。

    • ベストアンサー
    • HTML
  • tableの中にtableを作りスクロールさせたい。

    tableの中にtableを作りスクロールさせたい。 tableの中にtableを作りスクロールさせたいのですが、書きサンプルで思うようになりません。 table一つなら上手くいくのですが、どこが悪いでしょうか。 <html lang="ja"> <head> <title></title> </head> <body> <table border="1" width="100%"><tr><td></td></tr> <tr> <td > <div style="height:40%;width:100%;overflow-y:scroll;"> <table border=1 width="100%" bgcolor="#9999ff"> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> <tr><td>表示したいテーブル</td></tr> </table> </div> </td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • テーブル内のテーブルの高さを揃えたい。

    CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?

    • ベストアンサー
    • HTML