ここから本文です

FC2ブログで表の表示がうまくいきません

dio********さん

2011/10/3107:20:43

FC2ブログで表の表示がうまくいきません

表を表示させようとしたのですが、下の方に表示されてしまいます。
まだ制作途中なのですが、
万葉集の長歌を一行ずつ万葉仮名と読み下し文と書き下し文を対訳で載せようとしました。
表で作成し表示させようとしました。
DreamweaverCS5.5で作成し、
htmlのコードをコピペでFC2の「新しく記事を書く」の欄に貼り付け
プレビューさせてみました。
するとその時点で表示が下の方に行ってしまい
うまく表示させることができませんでした。
とりあえず300行の表だったのですが、
これが良くないのかと思い
冒頭の10行くらいだけを貼り付けプレビューさせましたが
まだ下の方に行ってしまいます。
何が悪いのでしょうか?
どうしたらいいでしょうか?

本当はエクセルで作ってある原稿を
FC2の「新しく記事を書く」の欄に貼り付け
そのまま使いたかったのですが
プレビューしてみると表の順番がでたらめになってしまい
どうしようもなくなったので
1から始め
DreamweaverCS5.5で表を作り
エクセルで作ってある原稿を
1行ずつ書き込んでいるところです。

効率的な方法を教えてもらえるのが一番なのですが、
とりあえず現段階の
表の表示が下に行くことの原因と対策を教えて下さい。

下にコードを書いておきます。
まだ下書きしか作ってないので公開はしてません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>

<body>
<table width="913" border="1">
<tr>
<td width="28">1</td>
<td width="133">緑子之 </td>
<td width="345">みどり子の </td>
<td width="379">生まれたての</td>
</tr>
<tr>
<td>2</td>
<td>若子蚊見庭</td>
<td>若子髪(わかごかみ)には </td>
<td>赤ちゃん髪のころには </td>
</tr>
<tr>
<td>3</td>
<td>垂乳為 </td>
<td>たらちし </td>
<td>“たらちし”(満ち足りた)</td>
</tr>
<tr>
<td>4</td>
<td>母所懐 </td>
<td>母に抱(むだ)かえ </td>
<td>母親に抱かれて</td>
</tr>
</table>

</body>
</html>

閲覧数:
3,611
回答数:
3
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

twi********さん

編集あり2011/11/209:35:16

●追記の追記です。
他のことを調べていたら偶然FC2ブログでのエクセルやワードからの表の差し込み方法、みたいなのを紹介してくれているブログがありましたので、既にそのブログは参照されているかもしれませんが、一応リンクを貼っておきます。

FC2ブログの高機能エディタでエクセルの表を入力する~David the smart ass~
http://smartass.blog10.fc2.com/blog-entry-2379.html

/*--------------------------------------追記の追記は以上です。


●ちょっと思い出したことがあったので追記しておきます。
FC2のプレビュー機能は、実際に「保存」ボタンをおしてアップしたレイアウトの感じとやや異なって見えることもわりとあります。
ですので、いくつかの方法を試される以前に、下書き、としてその表の記事を保存し、過去記事の管理、から下書きの記事のタイトルをクリックすれば実際に公開されることを前提としたレイアウトで見えますので、そのあたりもご確認してみるとよろしいかもしれません。
(もちろん、下書きのタイトルをクリックしてもそれが見えるのはブログの管理者の方(つまりご質問者の方)だけですのでその点はご安心くださいませ。)
/*--------------------------------------追記は以上です。


実際にその表(テーブル)を見たわけではないので推測ですが・・・。

テープルのwith属性がピクセル指定になっていますが、その値がテンプレートの本文表示サイズより大きい値になっている可能性があります。
具体的には
<table width="913" border="1">
↑この部分です。
試しにこれを、ピクセル指定ではなくてパーセント指定にされてプレビューしてみてはいかがでしょうか?
<table width="100%" border="1">
↑こんな感じです。
ただ、パーセント指定ですと、ブログテンプレートの本分表示領域の横幅に対してのパーセンテージですので、表の項目によっては行数が複数行になってしまう場合もあると思いますが・・・。

あと、テープル(表)全体をパーセンテージ指定(例:<table width="100%" border="1">)にするとしますと、下のほうにあるセル(TD)の幅指定もピクセル指定ではなくパーセンテージ指定にしないとNGだと思います。
例えば、ご質問の↓ソースを例からおおよそのパーセンテージを割り出し、無難なパーセンテージを割り当てますと
<td width="28">1</td>
<td width="133">緑子之 </td>
<td width="345">みどり子の </td>
<td width="379">生まれたての</td>
↑これが
↓こんな感じで、合計が100になるようにすればよろしいかと。
<td width="5%">1</td>
<td width="15%">緑子之 </td>
<td width="35%">みどり子の </td>
<td width="45%">生まれたての</td>


テーブルはどうしても本文の表示領域によって全体の幅やセル(TD)の幅が制限されてしまうので、エクセルで作ったような見栄えにはならないと確率が高いと思います。
(例え、本文表示領域をブラウザの表示領域にしても、閲覧される方のディスプレイの解像度によって思惑どおりにはならないとも思いますので)

あと、蛇足ですが、FCのブログですと文字コードはEUC-JPだと思いますので文字化けの可能性を低めるためにも
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
↑ここを
↓このようにしておいたほうが無難かと思われます。
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />

質問した人からのコメント

2011/11/7 21:21:38

みなさん親身のご指導本当にありがとうございます。感動と感謝をしております。
ただ私の方の理解と認識がはかばかしくない為解決しておりません。
期限切れになりましたので最初に回答されたtwics360さんにBAを付けておきます。
下記ブログにその後の経過などを載せたいと思います。
http://blogs.yahoo.co.jp/uuatanabetakahiko/28015737.html

このQ&Aで解決しましたか?質問する

閉じる

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

bam********さん

編集あり2011/11/600:24:40

seesaaブログですが、原理は一緒だと思います。

『ブログに表を載せる方法』
http://ebilog2009.seesaa.net/article/233617451.html

以上、ふまえた上で

<table width="913" border="1"> 〜 </table>をコピーして…

『改行削除くん』
http://ebilog2009.seesaa.net/article/233731604.html
タグ内の改行を削除できるので、そのまま記事にペースト。

ちなみに簡単な表の作成なら、
『ブログ掲載用 改行なしテーブル生成くんα』
http://ebilog2009.seesaa.net/article/233699211.html

タグ内の改行なしで4列10行までの表を
ブラウザ上で生成できます。
そのまま記事にペーストすればOK。

おためしあれ。

sit********さん

編集あり2011/11/219:11:52

>diogenes412323さん

>htmlのコードをコピペでFC2の「新しく記事を書く」の欄に貼り付け

その「上のほうに空白ができている」ページのソースを見てみましょう。
</td>の後ろに<br>(もしくは<br />)がついていませんか?
table内では<td>~</td>の間意外に書いたテキストやタグ、全角空白はすべてtableの外にはじき出されます。

上記の場合、
<table width="913" border="1"><tr><td width="28">1</td><td width="133">緑子之 </td>
のように、<br>が入らないよう改行せずにタグを記述するか、
あるいは、<br>が入っても大丈夫なようにtdの中で改行するか。
<table width="913" border="1"><tr><td width="28">1
</td><td width="133">緑子之
</td><td width="345">みどり子の
</td>
あるいは、「本文編集」時のアイコンの中にある「設定」をクリックし、「自動改行」を「HTMLタグ以外は無視」を選択。
(ただし、これをすると、記事中の<table>以外の場所の文章でも、改行したい場所に<br>をつける必要があります。)

あ~、分かっていると思いますが、「記事欄に貼り付ける」タグは<table>~</table>までです。
<!doctype~>や<html>、<body>などは不要です。

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

[PR]お得情報

ふるさと納税サイト≪さとふる≫
実質2000円で好きなお礼品を選べる
毎日人気ランキング更新中!

その他のキャンペーン

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる