[QooQ]トップページ(ホームページ)の記事タイトル下にスニペットをつけました

更新  
公開
当サイトはアフィリエイト広告を使用しています

Blogger QooQ



この記事は最後の更新から3年以上が経過しています
アイキャッチ

トップページ(ホームページ)が少し寂しかったので記事タイトル下にスニペット(記事本文の最初の部分)を表示させました。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>などが表現できる

参考サイト



検索

お知らせ

カテゴリー

Random Picks

すたすた式

Enjoy!👍

QooQ