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

結城永人 - 2018年8月13日 (月)

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

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

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

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」がブログに実際に表示する文字数ではないためにソースコードとずれてしまうんだ。

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

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

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

スニペットの修正用のソースコード

スニペットの文章の取り込みで記事の太字と斜体の開始タグだけが残ってスニペットのその後のデザインが崩れる不具合が生じることがある。

調べてスニペットの文字数をカスタマイズする場合は規定数の独自タグを使うとそうしたバグは起きない。

長い規定数／千文字以内のスニペットの独自タグ: <data:post.snippets.long/>
短い規定数／百四十字以内のスニペットの独自タグ: <data:post.snippets.short/>

デフォルトの文字数を減らすには短い規定数のものを使えば大丈夫だけど、しかしデザインとして百四十字以内のスニペットで短過ぎればプログラムで修正することもできる。

ソースコード①不要なタグがあれば規定数のスニペットを使う

<b:with value='data:post.body snippet { length:1000, links: false, linebreaks: false, ellipsis: true }' var='chros'>
<b:if cond='data:chros contains "&lt;strong&gt;" or data:chros contains "&lt;b&gt;" or data:chros contains "&lt;em&gt;" or data:chros contains "&lt;i&gt;"'>
  <data:post.snippets.short/>
<b:else/>
  <b:eval expr='data:chros'/>
</b:if>
</b:with>

※テンプレートのxmlファイルがエラーにならないように「<」と「>」の一部を「<」と「>」にエスケープしてある。

演算子のsnippetの次の大括弧内がスニペットのカスタマイズの四つの項目で、値を変更したりして通常と同様に使える。

不具合の原因となるのが太字のstrongとb、斜体のemとiという四つのタグなので、スニペットに取り込まれる記事の冒頭に含まれていれば太字や斜体のタグを自動的に除外できる規定数のスニペットの独自タグの<data:post.snippets.short/>を使って百四十字以内で表示するようにする。

文字数を減らさず、不具合の原因のタグだけ取り除くには独自タグでのデータの書き換えが無理らしく、JavaScriptを追加しなくてはならない。

ソースコード②不要なタグがあればスニペットから取り除く

<b:with value='data:post.body snippet { length: 1000, links: false, linebreaks: false, ellipsis: true }' var='chros'>
<b:if cond='data:chros contains "&lt;strong&gt;" or data:chros contains "&lt;b&gt;" or data:chros contains "&lt;em&gt;" or data:chros contains "&lt;i&gt;"'>
  <script>
  var crsc = document.currentScript;
  crsc.insertAdjacentHTML("beforebegin", `<data:chros/>`.replace(/(&lt;([^&gt;]+)&gt;)/g, ''));
  </script>
<b:else/>
  <b:eval expr='data:chros'/>
</b:if>
</b:with>

※テンプレートのxmlファイルがエラーにならないように「<」と「>」の一部を「<」と「>」にエスケープしてある。

規定数のスニペットの独自タグを使うプログラムの<data:post.snippets.short/>の部分をscriptタグの部分で置き換えた。

この方法だと不要なタグを取り除くだけなので、スニペットの文字数を減らさず、バグがあるときとないときで統一することができる。

スニペットに影響する記事の冒頭で太字や斜体のタグを使うことは多くないかも知れないし、投稿で注意して避けられるにせよ、テンプレートでバグを修正しておけばもしも使ってもブログのデザインが崩れることはなくなる。

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

ふじやん2019年3月14日 15:35
こんにちは。いつもお世話になっております。
ウチのブログでもこのカスタマイズを施してみたところ、トップページの読み込みが予想以上に早くなり驚きました。PegeSpeed Insights のスコアもアップしています。
無駄な文字数が読み込まれているということは把握してましたけど、文字数を減らすだけでまさかここまで改善できるとは思いませんでした。
返信削除
返信

コメントを追加