Bloggerの注目とブログと人気の投稿のウィジェットのスニペットの表示されない文字数を減らす 結城永人 - 2018年8月13日 (月) Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableのインデックスページ(トップ、アーカイブ、ラベルなど)の記事の抜粋などに使われるスニペットの文字数が実際に表示されるよりもソースコードに多く記載されている。 Three types of devices by coffeebeanworks / 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> 参考サイトpostSnippetOpé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テーマの場合 FeaturedPostBlogPopularPosts 注目とブログと人気の投稿の三つとも記事の抜群が付くので、どれもスニペットの文字数のカスタマイズの対象になる。 Sohoテーマの場合 FeaturedPost ブログと人気の投稿はタイトルしか表示されず、記事の抜粋が付く注目の投稿だけがスニペットの文字数のカスタマイズの対象になる。 Emporioテーマの場合 PopularPosts 注目とブログの投稿はタイトルしか表現されず、記事の抜粋が付く人気の投稿だけがスニペットの文字数のカスタマイズの対象になる。 Notableテーマの場合 FeaturedPostBlogPopularPosts 注目とブログと人気の投稿の三つとも記事の抜粋が付くので、どれもスニペットの文字数のカスタマイズの対象になる。 スニペットのカスタマイズの四項目 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 "<strong>" or data:chros contains "<b>" or data:chros contains "<em>" or data:chros contains "<i>"'> <data:post.snippets.short/> <b:else/> <b:eval expr='data:chros'/> </b:if> </b:with> ※テンプレートのxmlファイルがエラーにならないように「<」と「>」の一部を「&lt;」と「&gt;」にエスケープしてある。 演算子の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 "<strong>" or data:chros contains "<b>" or data:chros contains "<em>" or data:chros contains "<i>"'> <script> var crsc = document.currentScript; crsc.insertAdjacentHTML("beforebegin", `<data:chros/>`.replace(/(<([^>]+)>)/g, '')); </script> <b:else/> <b:eval expr='data:chros'/> </b:if> </b:with> ※テンプレートのxmlファイルがエラーにならないように「<」と「>」の一部を「&lt;」と「&gt;」にエスケープしてある。 規定数のスニペットの独自タグを使うプログラムの<data:post.snippets.short/>の部分をscriptタグの部分で置き換えた。 この方法だと不要なタグを取り除くだけなので、スニペットの文字数を減らさず、バグがあるときとないときで統一することができる。 スニペットに影響する記事の冒頭で太字や斜体のタグを使うことは多くないかも知れないし、投稿で注意して避けられるにせよ、テンプレートでバグを修正しておけばもしも使ってもブログのデザインが崩れることはなくなる。 関連ページImaginary|Bloggerのテンプレートの提供 コメント ふじやん さんの投稿… こんにちは。いつもお世話になっております。ウチのブログでもこのカスタマイズを施してみたところ、トップページの読み込みが予想以上に早くなり驚きました。PegeSpeed Insights のスコアもアップしています。無駄な文字数が読み込まれているということは把握してましたけど、文字数を減らすだけでまさかここまで改善できるとは思いませんでした。 2019年3月14日 15:35 結城永人 さんの投稿… こんにちは。ブログの表示速度が改善されて良かったです。Bloggerにかぎらず、公式テーマのテンプレートは万人向けで、自分には要らない部分も含まれがちです。細かく修正して行くと大きな成果が得られないともかぎりません。 2019年3月14日 17:59 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
アドセンスの個人のアメリカの税務情報/W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
コメント
こんにちは。いつもお世話になっております。
2019年3月14日 15:35ウチのブログでもこのカスタマイズを施してみたところ、トップページの読み込みが予想以上に早くなり驚きました。PegeSpeed Insights のスコアもアップしています。
無駄な文字数が読み込まれているということは把握してましたけど、文字数を減らすだけでまさかここまで改善できるとは思いませんでした。
こんにちは。ブログの表示速度が改善されて良かったです。
2019年3月14日 17:59Bloggerにかぎらず、公式テーマのテンプレートは万人向けで、自分には要らない部分も含まれがちです。
細かく修正して行くと大きな成果が得られないともかぎりません。