qooqのスニペット、記事一覧トップページの抜粋文の装飾

<h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

そして、以下のコードを上のコードの真下においてください

<div class='snippet-body'>

<b:eval expr='snippet(data:post.body,{ length: 101, links: false, linebreaks: false, ellipsis: true })'/>

</div>

link:false  とはリンクがスニペット表示では機能しないこと、linebreaksは改行のことでそれを無効にすることです。これでスッキリ表示されるようになります。

ただし、どこかの記事でスニペット表記部分である記事内の序章の追記を挿入するまでの部分にて、太文字とか赤字などで装飾すると、それ以前の記事、つまり該当記事より下の記事のスニペットがすべて太文字になったり赤文字になったりと、前記事のスニペットの装飾がすべてのスニペットに反映されるなどのバグみたいなのが生じました。

なので、スニペット部分にはあまり装飾しないように心がければいいと思います。

大体、三行目の終わりに追記を挿入すれば、いいと思います。

そしてcssのコードは、

.snippet-body {font-size:80%;}に設定します。もちろん好みで設定できます。あとは、スニペットも消しながら、記事一覧のアイキャッチを中央寄せするために

@media(max-width: 319px) {

  .list-item-img {

    margin: 0 auto;

  }

}

@media (max-width: 319px){

.list-item {

    display: block;

}}

※ふじやんさんからメールで次のように教えていただきました。「原因わかりました。どうやら " (二重引用符)は 6文字(&quot;)でカウントされてしまうらしく、文中の target="_blank" の " のせいだったようです。F-light を使っていただくのは嬉しいですが…テーマを変えるとまた自分好みにするカスタマイズが面倒ですよ(笑)補足です。 全角のダブルクォーテーション ” の場合は1文字としてカウントされるようです。 なのでこの記事 『聖書中の「魂」と「霊」という原語から霊魂不滅説が間違いだとわかる』は100文字表示されてます」

ブロガーの巨匠ふじやんさんから引用

2026年版のスニペットコード

<div class='snippet-body'>

  <a expr:href='data:post.url' class='custom-snippet-link'>

    <span class='raw-content' style='display:none;'>

      <b:eval expr='snippet(data:post.body, {length: 250, links: false, linebreaks: false, ellipsis: false})' />

    </span>

    <span class='snippet-display'></span>

  </a>

  <script>

  //<![CDATA[

  (function() {

    var scripts = document.getElementsByTagName('script');

    var currentScript = scripts[scripts.length - 1];

    var link = currentScript.previousElementSibling;

    // 250文字分届いたテキストを取得

    var rawText = link.querySelector('.raw-content').textContent;

    // ゴミ掃除（改行・空白を1つに）

    var cleanText = rawText.replace(/[\r\n\t\s]+/g, ' ').trim();

    // 日英判定

    var isJapanese = /[ぁ-んァ-ヶー一-龠]/.test(cleanText);

    var limit = isJapanese ? 100 : 200;

    var display = link.querySelector('.snippet-display');

    if (cleanText.length > limit) {

display.innerText = cleanText.substring(0, limit) + '…';

    } else {

      display.innerText = cleanText;

    }

  })();

  //]]>

  </script>

</div>