面白そうだったんで、アタシも試してみたw
zzさんが「記事タイトルが長くたってしっかり１行に自動で表示させてくれるスクリプトを作ってみた」という記事を書いてて、なんか面白そうだったんで、ちょっと違うやり方でアタシも作ってみましたよ！
まぁ出来たからってなんだって話ですが、自分自身気になったので検証してみる。
高さからのアプローチ
zzさんは、タイトルが長くて２行表示なると、その高さを取得して１行の高さになるまでフォントサイズを小さくしていくっていうスクリプト。
なるほどね。
単純に計算式
あたしはというと、単純に全体横幅÷表示横幅×100でパーセントを出してあげて、それをアレしてソレしてみようと思う。
意外といい感じじゃね？
$(function(){
$('.skinArticleTitle').each(function(){
//とりま１行表示にする
$(this).css('whiteSpace','nowrap');
//タイトルの横幅取得
var titleWidth = $(this).width();
//タイトルの全体表示幅取得（アタシの環境ではここで取得出来た。700px）
var titleMaxWidth = $(this).parent().parent().innerWidth();
//文字の幅のパーセントを計算
var parsent = Math.floor(titleMaxWidth / titleWidth * 100);
//em用にもういっちょ100割って少数点表示してあげる
var fontEm_size = parsent / 100;
//元々のタイトルのフォントサイズを取得
var font_size = $(this).css('font-size');
//タイトルの横幅が全体表示幅より大きかったら
if(titleWidth>titleMaxWidth){
//タイトルのa要素の親要素としてspanタグを挿入
$(this).wrap('<span></span>');
//emの特性を生かして、親要素に元々のフォントサイズを指定してやる
$(this).parent().css('font-size',font_size);
//タイトルのフォントサイズをem形式で指定
$(this).css('font-size',fontEm_size+'em');
}
});
});
って感じですけど、分かりますかね？w
em指定の特性を生かす
皆さんフォントサイズってピクセル指定ですかね？一応アタシのとこはpx指定だもんでソレ前提なんですけど、em指定は親要素を基準とした割合という特性を生かして、基準ピクセルに対して、いくらデカいの？ねぇあんたのデカいの？って聞いた後に、どんなけデカいの？って調べてあげて、任意の親要素に基準値を放り込む。で、もしか表示横幅よりタイトルが大きかったら、割合で小さくしてあげるって感じですがどうでしょう？w
ちなみに、赤字部分を消せば、表示横幅に対して文字サイズがアジャストされますよw
こんな感じで↓
まぁ当然タイトルがあまりにも長すぎると小さくなり過ぎて読めなくなるんで、そこんとこはアレですが。。。
そして、このスクリプトはアタシの環境下だと上手く表示されてますが、他所さんちで使っても必ずしもちゃんと表示されるかは疑問です。ある程度の修正が必要かもね。
そして、環境によってはspanタグも要らないと思う。ちなみにアタシのとこではspanタグを追加しなくても動作しましたんで、もしかすると要らないかも？w だもんで、スクリプト的にはかなりシェイプアップ出来る可能性も十分あると思いますよ。
で、アタシんとこは、ボタン式でクリクリ出来るようにしてみましたw えぇクリクリするの好きなんだもんっ！w みんなもクリクリしちゃえばいいさ！ﾊｧﾊｧ
ま、そんなわけでzzさんに触発されて、アタシも遊んでみましたw
はっはっはw