2010年07月04日

ブログやHPに長いURLを貼った時のレイアウト崩れを回避する

私もこのブログを書いていると、いろいろ参照させていただいたリンク先のURLを貼ったりすることがありますが、HPを作成されている方の場合も同様、URLが長かったりする場合、安易にそのURLを貼ったりすると、画面全体のレイアウトが崩れてしまうことが多々あります。

私の場合は面倒なので、<a href></a>で、リンクを張ってその中にURLを貼り付けてしまいますが、URLを貼ってもうまくいく方法はないか?と見ていたら、ありました。

IE用と、Gecko系用と二通りの対策が必要になりますが、でもどうやらこれですっきりしそうですね。

<IE用>
IEの方では、"word-break" というCSSプロパティが利用可能で、

word-break:break-all;

と設定すればOKなようです。

<Gecko用>
こちらは、それようのJavaScriptをサーバーにUPするという方法で
"url_breaker_plus.user.js"


<その他>
上記の方法以外にJavaScriptライブラリ、wordBreak.js を使用し、さらにその内容を一部
書き換えることで、すべてに利用できるようになる方法もあるようです。

そしてさらに最近ではTwitterで利用されるようになったショートURLのサービス。そんなサービスを利用してURLを短くして貼り付けるってのも一つの方法かもしれません。
Twitterではすっかりおなじみとなった、bit.ly はその代表ですね。

bit.ly

他にもたくさん似た様なサービスをしているところもあるようです。

TinyURL

他にもたくさんあるはずです。こういったショートURLというサービス注目されるようになったのはTwitterかもしれませんが、実のところ結構前からこうしたサービスはございました。
私もちょこっと使ってたことがありますが、結局面倒なんでやめちゃったんですけどね...


<参照>
半角英数文字列の改行/ネオンテトラ
長いURLを強制改行(折り返し)するJavascript/ウップス!!なかわけ

posted by クリック at 14:25| 東京 ☁| Comment(0) | TrackBack(0) | インターネット | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック