トップページ(ホームページ)が少し寂しかったので記事タイトル下にスニペット(記事本文の最初の部分)を表示させました。QooQ リスト版での使用を想定していますが。QooQ 通常版でも可能です。
HTMLを編集します。必ずバックアップを取ってから作業してください。
追加するコード
<span class='snippet'><a expr:href='data:post.url'><data:post.snippet/></a></span>
スニペットを表示させるためのデータタグ<data:post.snippet/>
をクリックできるように<a expr:href='data:post.url'></a>
ではさみました。
class名は適宜変更してください。spanタグを使いましたがdivタグやpタグなどでもいいかもしれません。
追加する場所
ver.1.27リスト版だと1294行目あたりにある<p class='list-item-category'>
の上に追加しました。
<h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<!-- ここに追加 -->
<p class='list-item-category'>
追加したもの
<h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<span class='snippet'><a expr:href='data:post.url'><data:post.snippet/></a></span>
<p class='list-item-category'>
QooQ 通常版でも<p class='list-item-category'>
の上でいいと思います。
スマートフォン
スマートフォンのときはスニペットがいらないという場合、CSSで非表示にする。
CSS例
@media ( max-width : 768px ) {.snippet {display: none;}}
補足
文字数がちょうどいいと思ったので<data:post.snippet/>
を使いました。(表示される文字数は140文字)
表示したい文字数を指定(1 - 140)したいなら<data:post.snippet/>
を
<b:eval expr='snippet(data:post.snippet, {length: 100})'/>
と置き換えるのが一番簡単かも。(上記は100文字の例)
また、文末の省略記号(...)を非表示にしたかったらellipsis: false
を追加する
<b:eval expr='snippet(data:post.snippet, {length: 100, ellipsis: false})'/>
文字数ではなく行数で指定する場合はCSSで表現できるかもしれません(未確認) : line-clampプロパティの効果的な実装方法、CSSで文末を3点リーダーで省略表示する | コリス
覚書 (widget version 1)
141文字以上を表示したいなら <data:post.longSnippet/>
。そのままを使うと1000文字。
300文字の場合はこんな感じ
<b:eval expr='snippet(data:post.longSnippet, {length: 300})'/>
文字を切りだすための元データをdata:post.body
にした場合、スニペット上で表現できるHTMLタグと使えるオプション?が増える。(文字数制限は不明)
- length 切り出す文字数
- linebreaks 改行
<br>
の有効、無効を指定(true / false) - links 本文中リンクの有効、無効を指定(true / false)
- ellipsis 省略記号(...)の有効、無効を指定(true / false)
<b:eval expr='snippet(data:post.body, {length: 100, linebreaks: false, links: false, ellipsis: true})' />
HTMLタグは<em> </em>
とか<storong> </sttong>
などが表現できる
コメントなし: