人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

歌詞翻訳ページのHtmlレイアウト挿入

2013年 04月 21日
エキサイトの文書作成枠にHtmlを記述する際は、完全にHtml準拠の表示結果になる保証がなく、予想外の表示になる可能性も考慮が必要です。

今回、「table」による「表」の表示をテストしたところ、Html記述内の改行が、そのまま外に流出してしまう事が判りました。 これが「table」の表記誤りの結果の標準的な結果なのか、エキサイトのシステム上での特異な結果なのか、私には未だ判りませんが、実用上での確認をしておきます。

以下に「誤記的な」記入例のサンプルを表示します。 文字挿入ポイントを示す数字は赤になっていますが、実際のソースでは黒の標準です。
歌詞翻訳ページのHtmlレイアウト挿入_b0174191_18225696.png
これが実際のブログ画面上の表示は以下の様になります。
++++++++++++++++++++++++++++++++++++
124678101213
3
曲名 SSSSSSSSSSS
作者 PPPPP QQQ 2012
5
9
AAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAA
11
BBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBB

BBBBBBBBBBBBBBBB
14
++++++++++++++++++++++++++++++++++++

上から判ることは「改行」は「td」「/td」間、つまりデータセル内の内容に関しては意図どおりに働きますが、Html内のそれ以外の場所では「改行」や「文字」がテーブルの手前やテーブルの後に流出してしまうという事です。

● 「曲名」「作者」の手前の半角は無視されるので、位置合わせには「全角空白」を用いる必要があります。
● 歌詞と歌詞訳の部分の「td valign="top"」は、歌詞と歌詞訳の行位置をそろえる上で重要です。 この指定がないとセルはデフォルトの中揃いをするので、合わせる際に苦労します。
● 歌詞セルの幅が足りない場合を考え、これを修正します。 歌詞と歌詞訳のセル幅の指定をなくし「nowrap」で自動改行をさせない様にし、歌詞の左側余白、歌詞訳の両側の余白とを列幅指定で追加。
● 実際に使用する背景色を指定。

以上の点に踏まえたコードです。 折り返し禁止の確認のため、少し一行を長めにしています。歌詞翻訳ページのHtmlレイアウト挿入_b0174191_21405011.png
実際の表示は以下の様になります。
++++++++++++++++++++++++++++++++++++

  曲名 SSSSSSSSSSS
  作者 PPPPP QQQ 2012

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAA


BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBB

BBBBBBBBBBBBBBBB

++++++++++++++++++++++++++++++++++++
網かけした部分を入れ替えるだけで、一般の歌詞に対応できると考えています。

+

追記

日本語の曲の場合や訳詞を省いた場合など、「AAA~」の左枠のみの使用となります。 この場合には、左に偏った表示となり不安定なので、「table bgcolor="#F4F4F4"」の部分に付け足して「table bgcolor="#F4F4F4" align="center"」とすれば、左枠のみ使用、左右枠を使用、のどちらの場合も位置が中央になり安定します。



by Ataron | 2013-04-21 16:25 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。