はてなブログでカテゴリーなどの記事の概要を省略する

hatenaロゴ

はてなブログでは、記事を書くときに記事の概要が未入力だった場合、カテゴリーや月別アーカイブなどの記事の概要は、記事本文の冒頭から抜粋したものとなります。

その記事の概要が少し長かったので、JavaScript(jQuery)を使って指定文字数(100字)で省略(非表示に)してみました(三行におさめた)。

JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
if ($('.page-archive')[0]) {
    $('.entry-description').text(function() {
        var txt = $.trim($(this).text());
        var txt = txt.substr(0, 100);
        $(this).text(txt + '…');
    });
});
</script>

参考になるブログ・Webサイト
iwb.jp - jQueryでたった5行の記述で長いテキストを「…」で省略する
BLACKFLAG - jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法

ただし、この方法だと省略した部分が一瞬見えてしまう。CSSで記事概要全部をあらかじめ非表示にしておいて、JavaScriptで表示させることもできますがどうしたものか。
また、文字数で省略すると、全角と半角が混ざっている文章では文末が揃わない...。

そこで発想を変えて、JavaScriptにこだわらずにCSSでなんとかしてみることにしました。
CSSのコードは次のとおりです(デザイン→カスタマイズ→フッタに入力します)。
※ デザインCSS(デザイン→カスタマイズ→デザインCSS)に入力する場合は、<style>と</style>の記述は不要です。

CSS
<style>
.page-archive .archive-entries .entry-description {
    font-size: 16px;
    line-height: 1.8;
    height: 5.4em;
    overflow: hidden;
}
</style>

ポイントは、記事概要のテキストの高さを固定(height:5.4em)し、はみ出た部分を隠す(overflow:hidden)というもの。
-webkit-line-clamp」でテキストの末尾に「…」(三点リーダー)を表示させたかったのですが、モバイルで表示が崩れるのであきらめました。

参考になるブログ・Webサイト
かけちまるblog - 【CSSのみ】指定行数を超えたテキストを非表示にする方法
Lopan.jp - 3行めの末尾を三点リーダーで端折る

デザインテーマにもよりますが、カード型表示ではなく記事概要も表示する一覧表示であれば、このカスタマイズが使えるかもしれません。