Bloggerの注目とブログと人気の投稿のウィジェットのスニペットの表示されない文字数を減らす

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableのインデックスページ（トップ、アーカイブ、ラベルなど）の記事の抜粋などに使われるスニペットの文字数が実際に表示されるよりもソースコードに多く記載されている。

Three types of devices by coffeebeanworks [CC0], via Pixabay

調べると必要なのはスマホとパソコンで百文字と二百五十文字程度――文字サイズによって前後するし、小さなサムネイル画像と横並びの文章のデザインの場合は八十文字と百七十文字前後まで減る――なのにテンプレートはデフォルトで千文字が記事の本文の冒頭から抜き取られる設定になっているんだ。

最も多く必要なパソコン版の文章だけのスニペットで表現される文字数からしても七百五十文字程度が無駄だと思うし、ブログの表示速度を下げて利便性も下げるから何とかできないかと悩んでいたけれどもスニペットのカスタマイズの方法が幸いにも見付かった。些細な日常に取り入れて今はもうさらに快適に運営できるようになった。

Bloggerは世界中で使われているブログサービスだし、例えばアラビア語などは英数字よりも小さくて日本語と比べると一行当たりの文字数は二倍以上の場合もあり得るし、公式テーマでは万国共通のデザインを想定してスニペットの文字数がデフォルトで千文字なのかも知れない。

スニペットを設定するpostSnippetのソースコード

<b:includable id='postSnippet'>
  <div expr:class='(data:snippetPrefix ?: "post") + "-snippet snippet-container r-snippet-container"'>
  <div class='snippet-item r-snippetized'>
    <b:eval expr='data:post.body snippet { length: 1000, links: false, linebreaks: true, ellipsis: true }'/>
  </div>
    <a class='snippet-fade r-snippet-fade hidden' expr:href='data:post.url'/>
  </div>
</b:includable>

参考：postSnippet　Opérateur d'extraits

Bloggerのテンプレートには記載されてなくて注目の投稿とブログの投稿と人気の投稿の三つのウィジェットのincludeの「name='postSnippet'」で呼び出されて機能している。

なのでスニペットをカスタマイズするためにはテーマのHTML編集かバックアップ／復元からpostSnippetのidのincludable：<b:includable id='postSnippet'>中略</b:includable>をそれぞれのウィジェットのwidgetタグに記載しておけば反映するようになる。

widgetタグの三つのtype

注目の投稿

FeaturedPost

ブログの投稿

Blog

人気の投稿

PopularPosts

Bloggerの独自タグのincludableのマークアップの注意点として他のincludableタグには入れない。独自タグのincludeで呼び出される内容を定義しているから他の内容を定義する部分と混ざらないように配置する。

テーマ毎のスニペットのデザイン

注目と人気の投稿は全ページで変わらず、ブログの投稿は記事ページではなくてインデックスページでスニペットが使われている。

Contempoテーマの場合

• FeaturedPost
• Blog
• PopularPosts

注目とブログと人気の投稿の三つとも記事の抜群が付くので、どれもスニペットの文字数のカスタマイズの対象になる。

Sohoテーマの場合

• FeaturedPost

ブログと人気の投稿はタイトルしか表示されず、記事の抜粋が付く注目の投稿だけがスニペットの文字数のカスタマイズの対象になる。

Emporioテーマの場合

• PopularPosts

注目とブログの投稿はタイトルしか表現されず、記事の抜粋が付く人気の投稿だけがスニペットの文字数のカスタマイズの対象になる。

Notableテーマの場合

• FeaturedPost
• Blog
• PopularPosts

注目とブログと人気の投稿の三つとも記事の抜粋が付くので、どれもスニペットの文字数のカスタマイズの対象になる。

スニペットのカスタマイズの四項目

length

取り込む文字数

• 50から1000（初期値）まで

links

リンクのaタグ

• true：付ける（初期値）
• false：付けない

linebreaks

改行のbrタグ

• true：付ける（初期値）
• false：付けない

ellipsis

省略記号の「…」

• true：出す（初期値）
• false：出さない

Bloggerのウィジェットのスニペットを設定するソースコードは四項目のデザインが変更できて「links」と「linebreaks」と「ellipsis」はtrueとfalse（真と偽）の二者択一で有無を指定するけど、とにかく「length」がブログに実際に表示する文字数ではないためにソースコードとずれてしまうんだ。

取り込む文字数がデフォルトで千文字なので、全角の日本語ならばスマホとパソコンで百文字と二百五十文字程度でぴったりになる。他に良く使われるのは半角の英数字で、それぞれに二百文字と五百文字程度で、良いと思う。テンプレートの文字サイズによってスニペットに、何文字、入るかは変わるし、ブログで使用頻度の高い言語と考え合わせて設定すればソースコードに表示されずに残ってしまう無駄を適切になくせる。

日本語のブログではかりにスニペットにパソコン版の二百五文字で設定するのがぴったりだとすると英数字が増えても不足しないように二倍の五百文字程度まで減らして構わないだろう。英数字を多用しなければもうちょっと減らしてぴったりの二百五字文字に近付けても表示される文字数が不足してスニペットのスペースが余り過ぎるのを避けられる。

何れにしてもスニペットの文字数は減らし過ぎるとデザインが崩れるから注意しなくてはならない。

関連：Imaginary｜Bloggerのテンプレートの提供