新デザインのカスタマイズに挑戦！4【サイド／文章省略篇】

少し間が空きましたが今回も引き続き新デザインのカスタマイズ法を紹介したいと思います。今回はサイドに表示される長いリンク名（２行）を１行にして最後に”…”を表示させてみます…

こんにちは。

さて今回は、サイドに表示される長いリンク名を短くする方法を紹介したいと思います。

どうも２行に亘って表示されているとデザイン的に好ましく思えないので、以前のデザインの時にも省略していました。

もちろん今回の新デザインでも取り入れようと同じ方法で試みたのですが、”…”が表示されなかったり、リンク名が変な所で切られたりと上手く行かず。

で、いろいろやってみて上手く表示できたので、その方法を教えちゃいますよﾔｯﾀ(ｂ´ω`ｄ)ｾﾞｨ♪

では早速、こちらをフリープラグインにコピペ

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> // 既に書かれていれば不要

<script>
$(function(){
    var $setText = $('#bookmarks ul li a,#favorites ul li a,#readers ul li a');
    var cutFigure = '15'; // 表示する文字数の設定
    var afterText = ' …'; // 省略した末尾に追加するテキスト
    $setText.each(function(){
        var textLength = $(this).text().length;
        var textTrim = $(this).text().substr(0,(cutFigure))
        if(cutFigure < textLength) {
            $(this).html(textTrim + afterText).css({visibility:'visible'});
        } else if(cutFigure >= textLength) {
            $(this).css({visibility:'visible'});
        }
    });
});
</script>