「最近の記事」の文章を折り返さないようにする方法

質問

Fc2ブログを運営しているのですが、
「最近の記事」プラグインで表示される文章(記事タイトル)が
長くなってしまうと端で折り返してしまいますよね。

・(07/31)今日の記事
・(07/30)昨日の記事ではこんなことを書き
　ました
・(07/29)一昨日の記事

こんな感じです。

それだとどうしても表示が乱雑になってしまうので
長い文章を端で折り返さず、「...」で終わるようにする方法を探しています。

・(07/31)今日の記事
・(07/30)昨日の記事ではこんなことを...
・(07/29)一昨日の記事

このようなイメージです。

以前に似た方法を目にしたことがあるのですが、
確か他ブログだったと記憶しています。
HTMLの編集だと思いますので、弄る点は共通なのかもしれませんが...

もしご存じの方いらっしゃいましたらどうかご教授のほどお願いします。
最近の記事プラグインのHTMLコピペが必要であれば、いつでも追記させていただきます。

回答No.3

fake-tang · ベストアンサー

ソースが
<ul>
<li><a href="./記事へのリンク">(07/31)今日の記事</a></li>
<li><a href="./記事へのリンク">(07/30)昨日の記事ではこんなことを書きました</a></li>
<li><a href="./記事へのリンク">(07/29)一昨日の記事</a></li>
</ul>
であると仮定して、Javascriptで
var cut_length=20;//←この文字数を超えたらトリミングします
var tags=this.document.getElementsByTagName('li') ;
for (i=0 ; i<tags.length ; i++) {
var li=tags[i].getElementsByTagName('a') ;
var TEXT=li[0].innerHTML ;
if (cut_length<TEXT.length) {
li[0].innerHTML=TEXT.substring(0,cut_length)+"..." ;
}
}
こんなかんじ。（動作確認：IE6のみ）
Javascriptのお約束に従って記述し、設置場所は</body>直前。

お礼

ご教授のとおり記述致しましたらしっかりとトリミングされていました。

英数字なども日本語と同様に一文字と認識されるため
多少のズレはありますが、十分利用できそうです。
おかげで助かりました...

無事思うどおりにできましたのでこれにて閉めさせていただきます。
わざわざ書いていただいて本当にありがとうございました！

回答No.2

Muller3

FC2で使える独自タグに、文字をトリミングするものがあればいいのですが、なければ、Javascriptを使う方法があります。

JavaScript で文字をトリミングする（改善版）
http://www.koikikukan.com/archives/2006/12/07-015553.php

お礼

コメントありがとうございます。

小粋空間様の手法、大変参考になりました。
今回はfake-tang様の方法で行いましたが、より精度が高いようですので
また挑戦してみたいと思います。

本当にありがとうございました。

回答No.1

marie_blue

リストを取得→各タイトルの文字数が一定のデータ量以上であれば、定めた場所で区切って以降を...と書き換えて出力する、
という流れになると思います。
これはタグやCSSでどうにかできるものではなくて、ブログから出力されるデータを加工して再出力する感じになるのでプラグインでしか無理なのではないかと思います＞＜

私は別ブログ（レンタルではありません）でそういった機能のあるプラグインを利用していて、それが上記のような動作をするものでした。
FC2で同じ働きをするプラグインがあるかはわかりませんが、探すヒントになればと思って投稿しました＾＾；見つかるといいですね。

お礼

コメントありがとうございます。
おかげさまでfake-tang様の記述法にて無事表示されました。

非レンタルブログというとMTやWordPressですかね。
そちらのほうが優良なプラグインが豊富とあって表現力の向上が望めるため
ぜひとも利用してみたいのですが、今はただの日記ブログですので...
ただ、いつかは体験してみたいと思っています。

この度はアドバイス下さいまして本当にありがとうございました＾＾