FCafe  コメント内URL短縮

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

  コメントに別サイトのURLを書く(書かれる)機会は少なくないと思われますが、例えばgoogleの検索結果頁のように文字数が多いURLですと、文字列がカラムからはみ出してしまい見苦しくなってしまう場合があります。 IE等 半角文字列を折り返してくれる(或いは折り返すよう指定可能な)ブラウザもありますが、大きな面積を占められてしまうのは同様です。

.comment_body a { display:block; height:1em; width:20em; overflow:hidden }

・・・などとCSSで指定してやる(コメント内の a タグはURLのみなので )のも一法でしょうが、
( というか、”つま”のつもりでしたが試してみたら結構イケました。 ^^; )
スクリプトで整形する方法を考えてみました。


【 設置方法 】 以下のソースをhead領域に貼り付けます。 <script type="text/javascript">
function Shlink(id) {
C = document.getElementById(id);
C.innerHTML=C.innerHTML.replace( />(http[-\w\/%&=:;.?]+)</gi, "><span title='$1'> URL </span><");
}
</script>

コメント部を以下のようにします (例)

<p class="△" id="c<%comment_no>"><%comment_body></p>
<script type="text/javascript">Shlink("c<%comment_no>")</script>
コメント本文に id を付け その後に(commentブロック内に)スクリプト関数を書きます。
前回の記事と同じ要領です。  「オートリンク」は on に設定されて下さい
また 前記事の関数と併用する時はこちらの関数を「後」に書いてください
( 冒頭にお示ししたCSSを用いる方法との併用も 良いかもしれません )

【 使用例 】 

■ 適用前 ( autolink on )

http://www.google.co.jp/search?q=%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE%E5%85%A5%E9%96%80&start=0&start=0&hl=ja&lr=lang_ja&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:ja-JP:official

.
■ 適用後

http://www.google.co.jp/search?q=%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE%E5%85%A5%E9%96%80&start=0&start=0&hl=ja&lr=lang_ja&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:ja-JP:official

Comment


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/169-06034759

Shown after Admisson
.

≫ 正規表現 コメント欄に画像 ≪

2005 / 07 / 04  Mon
Comment/TB   
Comment 0 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。