すたすた式
Blogger QooQ
トップページ(ホームページ)が少し寂しかったので記事タイトル下にスニペット（記事本文の最初の部分）を表示させました。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>ではさみました。
<data:post.snippet/>
<a expr:href='data:post.url'></a>
class名は適宜変更してください。spanタグを使いましたがdivタグやpタグなどでもいいかもしれません。
ver.1.27リスト版だと1294行目あたりにある<p class='list-item-category'>の上に追加しました。
<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を追加する
ellipsis: false
<b:eval expr='snippet(data:post.snippet, {length: 100, ellipsis: false})'/>
文字数ではなく行数で指定する場合はCSSで表現できるかもしれません(未確認) : line-clampプロパティの効果的な実装方法、CSSで文末を3点リーダーで省略表示する | コリス
141文字以上を表示したいなら <data:post.longSnippet/> 。そのままを使うと1000文字。
<data:post.longSnippet/>
300文字の場合はこんな感じ
<b:eval expr='snippet(data:post.longSnippet, {length: 300})'/>
文字を切りだすための元データをdata:post.bodyにした場合、スニペット上で表現できるHTMLタグと使えるオプション？が増える。(文字数制限は不明)
data:post.body
<br>
<b:eval expr='snippet(data:post.body, {length: 100, linebreaks: false, links: false, ellipsis: true})' />
ＨTMLタグは<em> </em>とか<storong> </sttong>などが表現できる
<em> </em>
<storong> </sttong>
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿