Ads by Google

--/--/-- | スポンサー広告 | 

改行されない〜HTML、プラグインに関するメモ

2005/10/15 | HTML/CSS | 

FC2ブログのプラグイン機能は、一部のリスト内文字列の区切りが、デフォルトのhtmlでは空白を含まない半角記号「:」になっています。例えば「名前:タイトル」といった具合です。

最近のコメント部分
<%rcomment_name>:<%rcomment_etitle>
最近のトラックバック部分
<%rtrackback_blog_name>:<%rtrackback_title>

連続する半角英数字が改行されない

通常はまず問題ないので気にする事でも無いですが(^^;)。稀に半角英数字が連続する場合に、文字が折り返さない、右に突き抜けてレイアウトが崩れる、といった事が起こり得ます。

• 半角文字列の折り返し（ブラウザ表示比較）

文献らしき物も発見したが、読もうとしたら目眩がしたので、気になる方はGoogle等で詳細を調べてみて下さい。そして私に簡潔に教え...。

現実的に考えられる状況は、英数字名のブログから英数字タイトルのトラックバックを受けた時などでしょうか。その様な事が原因で突然レイアウトが崩れていた場合（主にfloatでサイドバーが落ちる等、レイアウトそのものが崩れるのは基本的にIE6）、右端で折り返すはずの文字列がモロに突き抜けていたり、URL等の特殊な半角英数字・半角文字列であれば直ぐに判ります。

しかし、サイト名等で僅かなハミ出しだったりすると、崩れた原因に気付きにくいケースもありそうです（あった..笑)。予め対処しておいた方が良いでしょう。

考えられる回避策

回避策はFC2ブログであれば、プラグインのHTML、もしくはテンプレートのHTML,CSSを編集。考えられる選択肢は、

1. htmlタグbrで強制改行。<%rtrackback_blog_name><br /><%rtrackback_title>
2. はみ出し部分をCSS（overflow:hidden)で切り落とす。（IE6は親ボックスの幅が広がるバグがあるので、widthで直接的に幅を指定しないと効かない)
3. CSSにword-break:break-allを指定し、IEだけ右端で改行。（ボックス幅の広がりを防げるが、単語区切りにならず英数字が読み辛い)
4. CSSにword-break:keep-allを指定し、IEだけ右端で改行。（単語区切りのみで改行。区切りが無いと全角でも改行されない)
5. 区切り記号を全角にする。（稀に折り返さないケースもある)
6. 半角記号を空白(スペース)で挟む。

ボックス幅が広がるIE6のバグによるレイアウト崩れは、IE独自のword-break:break-all;をCSSに指定する事で一応は防げそうですが、これがkeep-allで和文の場合は、句読点や記号が偶然都合の良い位置にくる必要がある(^^;)。何れにしても全角文字には適用させたくないですし、他のブラウザでは無意味なのでアウト。

現実的には最後の二つの案、区切り記号を弄る方法がベターでしょうか。それにCSSのoverflow:hiddenを併用というのも良さそうです。通常の折り返す半角英数字はそのまま表示出来るし、widthを明示すれば、折り返さない半角英数字をIE6でも切り落としてくれるはず。ただし...

折り返すには半角スペースが無難

基本的に日本語はどこでも折り返すと思いますが、先程の半角文字列の折り返しを見る限り、区切り記号が全角の場合は改行されないケースが稀にあるようです。それとは逆に、連続する半角文字でもハイフン"-"などの一部の半角記号で折り返す場合もあります（Opera、Safari、IEなど。ただしFirefoxは記号でも折り返さない）。

という訳で、半角スペースを入れる策が最も無難だと思います（ただし実体参照 による半角スペースは駄目です）。

もっとイイ方法もあるかも知れませんが、気になる方はGoogle等で詳細をお調べになって下さい。そして私に是非教え.....(*´ρ`*)あぅ

<<  2005/10/15  >>  | HTML/CSS | Comment 0 | Trackback  3