Blogger ホームページの要約とサムネイル表示 - バグ取りの日々
バグ取りの日々
Blogger ホームページの要約とサムネイル表示
投稿日 2018/01/24 更新日 2020/10/05
Bloggerを好みの表示にカスタマイズする。要約とサムネイル編です。
やりたいこと
ホーム(他ページも)でアイテムの表示を要約したい
テンプレートの要約の不満を改善したい
jsを使用して要約している（js不要にしたい）
要約なのに長い(要約をもっと短くしたい)
記事サムネイルを表示したい
サムネイル画像がない場合でもサムネイルしたい
やったこと
テンプレートを編集して、要約とサムネイルを表示した。以下に変更後のソースを示す。
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.snippet'>
      <div class='image thumb' style='float:left;padding:0 1em 0 1em;'>
        <b:if cond='data:post.thumbnailUrl'>
          <img style='width:100px;' expr:src='data:post.thumbnailUrl'/>
          <b:else/>
          <img style='width:100px;' src='サムネイルがない場合のサムネイルの位置'/>
        </b:if>
      </div>
      <data:post.snippet/>
    <b:else/>
      <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
      <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    </b:if>
  </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div style='float:right;padding-right:10px;margin-top:10px;font-size:0.8em;'>
      <a class='morer' expr:href='data:post.url'>Read More</a>
    </div>
  </b:if>
</b:if>
実際追加してるのは、上記中の以下のコードです。残りはテンプレートのもともとの処理です。
    <b:if cond='data:post.snippet'>
      <div class='image thumb' style='float:left;padding:0 1em 0 1em;'>
        <b:if cond='data:post.thumbnailUrl'>
          <img style='width:100px;' expr:src='data:post.thumbnailUrl'/>
          <b:else/>
          <img style='width:100px;' src='サムネイルがない場合のサムネイルの位置'/>
        </b:if>
      </div>
      <data:post.snippet/>
    <b:else/>

    </b:if>
結果
要約とサムネイル表示、標準のサムネイルまでできて、JavaScript不要！、ページのロード量も激減です。（サムネイル画像が小さくなって矩形になったのが気になるが…）大満足ですね。
それにしても、なんでBloggerは標準で要約設定がないのかホント不思議です。
参考リンク
Bloggerをカスタマイズした。【文章の抜粋（要約）表示とサムネイルの表示・サイズの変更】編
Blogger:投稿のサムネイルのURLが無い場合には、デフォルトの画像を表示 - レイアウト データ編
ラベル: Blogger
関連記事
コメント
新規
新しいコメントを書く
続きを読む
自己紹介
toshi
ページ
ホーム
プロフィール
お問い合わせ
プライバシーポリシー
サイトマップ
人気の投稿
Windows10のエクスプローラで遅い緑のバーの解決方法
ソースコードのライセンスの書き方
GoogleAdSenseの遅延読込みでページ表示速度を改善
Firefox Quantum コンテキストメニュー編集の代替え
ゆっくりを商用利用する場合のライセンス
Windows10の標準機能で音声を録音・録画する
【WSH】RunとExecの違い
Firefoxで突然、ほぼすべてのアドオンが使えなくなった
Firefox Quantum タブグループの代替
簡易なHTML特殊文字変換機（通常文字 <=> 特殊文字）
ラベル
JavaScript (105)
Blogger (53)
Firefox (33)
WSH (31)
etc...
| お問い合せ | ポリシー | サイトマップ |
© 2017 バグ取りの日々 | Powered by Blogger
