Bloggerの記事／追加ページの投稿画像にWebPのrwを自動的に付けるプログラム

Bloggerで取得した画像URLに画像パラメーターのrwを追加すると画像データを軽量化したWebP画像に変換することができる。特にjpg／jpeg画像の場合に効果が大きいようだけれどもブログの画像の表示速度を高めることに繋がる。記事／追加ページの投稿画像に画像パラメーターのrwを自動的に付けるプログラムを開発したので、無料で提供する。追記：2023年9月から投稿のWebP画像の提供がBloggerの設定から可能になったので、本稿のプログラムはその他のキャッシュ期限のe#などを追加するとかデバイス毎のレスポンシブ配信を追加するなんて機能が必要なときに使うことを勧める。JavaScriptで記事の本文の全ての表示を止めてから投稿画像に画像パラメーターを自動的に付けて出すことになる。便利だけど、その分、投稿画像を含めた記事の本文の全ての表示速度は遅れる、ほんの僅かだとしても投稿時に画像パラメーターを手動で付けておくよりも決して速くならないことに注意して欲しい。そしてHTMLだけで記事の本文の全てを表示しないことはGoogle検索などの読み込みを劣らせるかも知れないので、SEO（検索エンジン最適化）対策でアクセスアップを望むならば大丈夫かどうかと様子を見ながら使うべきだと思う。

参考サイト

JavaScript SEO の基本を理解する

もう一つサイト広告のアドセンスの自動広告を使う場合にアドセンスの管理画面のプレビューに反映しないみたいだ。サイト広告が設定されていればブログで実際に表示されるけれどもアドセンスの管理画面で数や位置を決めるときはサイト広告のプレビューが出ないと分からないからWebPのrwの自動化のプログラムを外す必要がある。一時的に止めるならばソースコードの振り分けのためのcond属性の「data:view.featuredImage」（二つある）の先頭に半角感嘆符（!）を付けて「!data:view.featuredImage」にするのが簡単だ。通常と反対に画像なしのページでプログラムが記載されるから何も起こらなくて動作しないに等しくなる。本稿のプログラムを使う人は制作者の結城永人の著作権の表記もソースコードに併せて載せておくMITライセンスでカスタマイズも再配布も許可するから消さないで欲しい。僕が提供している非公式テーマのImaginaryを使っている場合は著作権の表記が含まれているから今回の分を繰り返す必要はない。カスタマイズは全てBloggerの管理画面のテーマのHTML編集、またはバックアップと元に戻すからテンプレートのソースコードを書き換える。追記：2024年の序盤からBloggerの投稿画像のURLが「blogger.googleusercontent.com/b/」で始まるものに統一されて古いものも大部分が自動的に変更されたため、それに合わせてプログラムを改変した。

投稿画像にWebPのrwを付けるソースコード
画像URLに画像パラメーターのrwを記載する
その他のキャッシュ期限のe#などを追加する場合
デバイス毎のレスポンシブ配信を追加する場合
遅延読み込みのloading-lazyと併用する場合
本文に記載されたscriptタグを実行するソースコード
プログラムの動作確認用のソースコード
Bloggerの投稿画像のプログラムの組み込み方
テンプレートのバージョンによる相違点について
Contempoなどのlayout-versionが3の公式テーマ
Simpleなどのlayout-versionが2の公式テーマ

投稿画像にWebPのrwを付けるソースコードブログのポップアップに「=s1600-rw」と表示されている

BloggerのテンプレートのHTMLを編集してJavaScriptを追加する。画像URLに画像パラメーターのrwを記載するWebPのrwにかぎらず、どんな画像パラメーターでも自動的に付けられる一般的な方法だ。HTML

<div class='post-body'>
  <b:tag cond='data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag>
</div>

※太字が追加部分。投稿画像の画像パラメーターはブラウザに読み込まれる前に付けなくては意味がないので、一旦、noscriptタグで、画像ありの記事／追加ページ（テンプレートによってcond属性の条件を追加しなくては記事／追加ページに振り分けられない）の本文を止める。画像のない記事／追加ページは従来通りの仕方で滞りなく表示される。そして記事の本文を止めて出すと親要素の表示領域の高さがなくなるためコメントやラベルなどの後続のコンテンツが上下してしまうから高さを確保しておくのが良いと思う。JavaScript

/* Copyright: Nagahito Yuki 2022 | https://www.nagahitoyuki.com/2022/01/automatic-webp-rw-program-for-post-and-page-images-on-blogger.html | License: The MIT License */
const psbd = Blog1.querySelector("div.post-body"), blct = psbd.querySelector("noscript.blog-content"), npsbd = psbd.cloneNode(false), nl = document.createElement("div");
nl.style.height = "100vh"; psbd.insertBefore(nl, blct); npsbd.insertAdjacentHTML("afterbegin", blct.textContent);
const blimgs = npsbd.querySelectorAll("img");
if (blimgs[0]) {
Promise.all([...blimgs].map(blimg =&gt; {
const bisrc = blimg.src, chj = "/\.jpg|jpeg/i.test(bisrc)", aroi = blimg.dataset.originalWidth / blimg.dataset.originalHeight;
if (/blogger\.googleusercontent\.com\/img\/b\//.test(bisrc)) {
if (chj) {
const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc);
blimg.src = pmoi[1] + pmoi[2] + "-rw" + pmoi[3]; }}
if (blimg.height) {
if (!blimg.width &amp;&amp; aroi) blimg.width = blimg.height * aroi; } else if (blimg.width) {
if (aroi) blimg.height = blimg.width / aroi; }})).then(() =&gt; {
psbd.parentNode.replaceChild(npsbd, psbd); }); } else {
psbd.parentNode.replaceChild(npsbd, psbd); }

※冒頭のコメント（/* ... */）はソースコードの著作権の表記。Bloggerの画像URLの「blogger.googleusercontent.com/b/」で始まるものを対象にしている。以前は別のもののもあったけれども2024年の序盤から統一されている。投稿画像がBloggerから取り込まれたもので、その他のものでなければ基本的に対応できる。重要：古い画像URLの「blogger.googleusercontent.com/a/」から始まるもの（新しいものとドメインは同じで、最後のディレクトリが「a」のもの）が残っている。以前のプログラムでは対応したけれども現在のプログラムでは除外されるから画像パラメーターは変更されない。＊

以前のプログラムのソースコード

/* Copyright: Nagahito Yuki 2022 | https://www.nagahitoyuki.com/2022/01/automatic-webp-rw-program-for-post-and-page-images-on-blogger.html | License: The MIT License */
const psbd = Blog1.querySelector("div.post-body"), blct = psbd.querySelector("noscript.blog-content"), npsbd = psbd.cloneNode(false), nl = document.createElement("div");
nl.style.height = "100vh"; psbd.insertBefore(nl, blct); npsbd.insertAdjacentHTML("afterbegin", blct.textContent);
const blimgs = npsbd.querySelectorAll("img");
if (blimgs[0]) {
Promise.all([...blimgs].map(blimg =&gt; {
const bisrc = blimg.src, aroi = blimg.dataset.originalWidth / blimg.dataset.originalHeight;
if (/blogger\.googleusercontent\.com\/img\/a\//.test(bisrc)) {
blimg.src = /=.*$/.test(bisrc) ? bisrc + "-rw" : bisrc + "=rw"; } else {
if (/\.jpg|jpeg/i.test(bisrc)) {
const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc);
blimg.src = pmoi[1] + pmoi[2] + "-rw" + pmoi[3]; }}
if (blimg.height) {さ
if (!blimg.width &amp;&amp; aroi) blimg.width = blimg.height * aroi; } else if (blimg.width) {
if (aroi) blimg.height = blimg.width / aroi; }})).then(() =&gt; {
psbd.parentNode.replaceChild(npsbd, psbd); }); } else {
psbd.parentNode.replaceChild(npsbd, psbd); }

※冒頭のコメント（/* ... */）はソースコードの著作権の表記。

BloggerのrwによるWebPへの変換の挙動で、元の画像ファイルがjpg／jpegだといつも三割くらい軽量化されるもののpngやgifだと恩恵が少ない。特にpngだと逆に重くなることさえもあるので――およそBloggerからの取り込みの時点で、十分に軽量化されたものはさらにWebPに変換しても仕様がないみたいな感じがする――除外した方が良いと思う。今回のプログラムでは画像のファイル形式がjpg／jpegの場合に限定して「rw」を付けるようにしている。Bloggerの画像パラメーターは色んなものがある（Google/Blogger Image URL Parameters）。ソースコードの三ヵ所のrwが画像URLに入るので、それらを置き換えたり、さらに半角ハイフン（-）で繋いで増やしても構わない。記事の本文を挿入したときに画像の読み込みが遅れて高さがないために画像以外の文章などが上下してしまう。避けるために画像の高さを確保している。

関連ページ

Bloggerの投稿画像の軽量化のWebpPのrwの自動化のJavaScriptプログラムの説明付きソースコード

投稿画像のURLのサイズ属性についてBloggerの投稿からの画像の取り込みで、小か中か大か特大ならば画像のimgタグに縦幅のhigh属性か横幅のwidth属性（長い方）が付くけれども元のサイズだと付かない。しかし全ての画像に表示可能な最大サイズの縦幅のdata-original-height属性とdata-original-width属性が付くので、その縦横比から画像にheight属性かwidth属性があればもう片方を追加したり、どちらもなけれ画面幅に対する高さを割り出している。なのでそうした属性を投稿の編集から消さないでおくと画像が出るときに先に出ていたその他のコンテンツが押し下げられるような状態にはならない。画像に縦横のheightとwidthの二つの属性が付いているとブラウザが画像の表示領域を直ぐに分かって高速表示に繋がるともいわれる。Bloggerの投稿画像は元のサイズで取り込まれた場合、heightとwidthの属性はどちらも付かないので、手動で付けたりしてなければ出だしが潰れてしまうし、表示速度に有利でもない。WebPのプログラムの基本のソースコードでは何もしてないけど、しかしdata-original-height属性とdata-original-width属性の縦横比を差し替えて使うこともできる。その場合は「if (aroi) blimg.height = blimg.width / aroi; }」の後に「else {blimg.height = blimg.dataset.originalHeight; blimg.width = blimg.dataset.originalWidth;}」を追加する。ただし画面の表示領域が最大サイズで記事の本文からはみ出してしまうかも知れないので、CSSの「.post-body img {max-width:100%}」などで記事／追加ページの画像をどのくらいの大きさまで表示するかを予め指定しておく必要がある。画像URLに入る「rw」の内容

blimg.src = pmoi[0].replace(pmoi[1], pmoi[1] + "-rw")

Bloggerの画像URLには投稿画像がどんなサイズで取り込まれてもサイズの画像パラメーターが付くからその後に続くように半角ハイフン（-）で繋いで「-rw」というふうに追加する。画像URLにrwの画像パラメーターがあれば付けないブログに手動でrwを付けた投稿画像があると自動化のプログラムで二つ付くことになる。調べたら画像は同じものが表示されるので、支障はないけれども画像URLが少しでも変わるのを避ける方法を載せておく。

if (/blogger\.googleusercontent\.com\/img\/b\//.test(bisrc)) {
if (chj) {
const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc);
blimg.src = pmoi[1] + pmoi[2] + (/rw/.test(pmoi[2]) ? "" : "-rw") + pmoi[3]; }}

※太字が追加部分。投稿画像に事前にrwが付いていたらさらに付けないので、画像URLの文字列でrwが重複することはなくなる。その他のキャッシュ期限などを追加する場合ブログのポップアップに「=s1600-rw-e100」と表示されている

ブログの表示速度の高速化で投稿画像にrwと同じくらい使いたいのはe#なんだ。キャッシュ期限の画像パラメーターで、ブラウザが保存する期間を指定することができる。日数で百日ならばe100と添字（#）を付けて記載すると次回以降の期間内の閲覧では画像をサーバーと痛心せず、保存済みのものを使うから非常に速く表示するようになる。一回目の閲覧の画像表示をWebPのrwで、高速化して二回目以降の閲覧の画像表示をキャッシュ期限内のe#でもっと高速化するのが良いと思う。基本のソースコードのJavaScriptを編集する。JavaScript

if (/blogger\.googleusercontent\.com\/img\/b\//.test(bisrc)) {
if (chj) {
const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc);
blimg.src = pmoi[1] + pmoi[2] + "-rw-e100" + pmoi[3]; }}

※太字が追加部分。例えば画像URLのrwに-e100を追加して「-rw-e100」するとWebPに百日のキャッシュ期限に変換できる。キャッシュ期限の日数を変えたいときは添字の数のe100の100のところを書き換える。デバイス毎のレスポンシブ配信を追加する場合画像のimgタグにsrcset属性を付けるとデバイス毎のレスポンシブ配信デバイス毎のレスポンシブ配信が可能になり、画面幅と解像度に相応しい画像を選択して表示することができる。JavaScript

const bisrc = blimg.src, chj = "/\.jpg|jpeg/i.test(bisrc)", aroi = blimg.dataset.originalWidth / blimg.dataset.originalHeight, sssw = aroi &lt; 1 ? Math.trunc(640 / aroi) : 640, lssw = aroi&lt; 1 ? Math.trunc(1280 / aroi) : 1280;
if (/blogger\.googleusercontent\.com\/img\/b\//.test(bisrc)) {
if (chj) {
const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc);
blimg.src = pmoi[1] + pmoi[2] + "-rw" + pmoi[3]; } else {
blimg.src = bisrc; }
const rwpm = chj ? "-rw-e100" : "-e100", wobp = /^(.+\/)(.*)(\/.*)$/.exec(blimg.src);
blimg.srcset = wobp[1] + "w" + sssw + rwpm + wobp[3] + " " + sssw + "w, " + wobp[1] + "w" + lssw + rwpm + wobp[3] + " " + lssw + "w"; }

※太字が追加部分。サンプルではスマホとパソコン（高解像度スマホを含む）の二つのデバイスで画像を出し分けて横幅が640pxと1280pxの画像を振り分けている。前者が「Math.trunc(640 / aroi) : 640」、後者が「Math.trunc(1280 / aroi) : 1280」の二つずつある同じ数値に対応しているので、変更するとレスポンシブ配信の横幅をカスタマイズできる。二つずつある数値の前の方は縦長の画像の場合の横幅の算出のためで、縦幅を640pxと1280pxとするようにプログラムされているので、横長の画像の場合よりも短くなる。縦幅が反対に長いから画像全体の大きさは変わらない。画像パラメーターの編集部分

rwpm = chj ? "-rw-e100" : "-e100"

半角の二重引用符（""）で囲まれた部分がレスポンシブ配信の画像パラメーターで、前者がJPG／JPEG、後者がそれ以外のファイル形式のものになる。初期値として前者だけ軽量化の「rw」を付けてどちらにも百日のキャッシュ期限の「e100」を入れている。必要に応じて書き換えたり、削除したり、他のものを追加して構わない。画像のレスポンシブ配信を行うと基本のマークアップは殆ど使われなくなる（srcset属性に対応してないブラウザが使うけれども今は多くのブラウザが対応済みだ）から余り気にしなくて良い。殆どの場合、実際に使われる画像のサイズはレスポンシブ配信に切り替わる。そして画像の取り込みで元のサイズ以外はサイズの属性によって固有の大きさで表示される。元のサイズはサイズの属性が付かないからレスポンシブ配信のサイズで表示される。画像URLにサイズの属性がないとレスポンシブ配信で、全部、同じサイズになるから特定の画像を固有の大きさで表示したい場合は投稿のHTMLビューで当該の画像URLにwidth属性やheight属性を付けるかCSSでwidthやheightを指定すると大丈夫だプログラムではJPG／JPEG以外のGIFとPNGの画像もレスポンシブ配信の対象になる。除外する場合はelse {blimg.src = bisrc;を削除する。その前後に半角大括弧の閉じ（}）と開き（{）があるのを消さないように注意する。遅延読み込みのloading-lazyと併用する場合ブログの表示速度を画像に関して上げるための有力な方法として画面外のものを遅延読み込みするloading-lazyがある。WebPのrwのプログラムと同じ仕方で記事／追加ページに組み込めるので、一緒に使うと非常に効果的だと考える。HTMLは同じで、JavaScriptだけ加工して増やす。JavaScript

/* Copyright: Nagahito Yuki 2022 | https://www.nagahitoyuki.com/2022/01/automatic-webp-rw-program-for-post-and-page-images-on-blogger.html | License: The MIT License */
const psbd = Blog1.querySelector("div.post-body"), blct = psbd.querySelector("noscript.blog-content"), npsbd = psbd.cloneNode(false), nl = document.createElement("div");
nl.style.height = "100vh"; psbd.insertBefore(nl, blct); npsbd.insertAdjacentHTML("afterbegin", blct.textContent);
const blimgs = npsbd.querySelectorAll("img");
if (blimgs[0]) {
Promise.all([...blimgs].map(blimg =&gt; {
const bisrc = blimg.src, aroi = blimg.dataset.originalWidth / blimg.dataset.originalHeight;
if (/blogger\.googleusercontent\.com\/img\/b\//.test(bisrc)) {
if (chj) {
const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc);
blimg.dataset.src = pmoi[1] + pmoi[2] + "-rw" + pmoi[3]; } else {
blimg.dataset.src = bisrc; }}
if (blimg.height) {
if (!blimg.width &amp;&amp; aroi) blimg.width = blimg.height * aroi; } else if (blimg.width) {
if (aroi) blimg.height = blimg.width / aroi; } else if (aroi &amp;&amp; !blimg.style.aspectRatio) {
blimg.style.aspectRatio = aroi; }
if (!blimg.alt) blimg.alt = "<data:messages.image/>";
blimg.src = ""; return blimg; })).then(results =&gt; {
psbd.parentNode.replaceChild(npsbd, psbd); results.forEach(result =&gt; {
if (result.getBoundingClientRect().top &gt;= window.innerHeight) result.loading = "lazy";
result.src = result.dataset.src; delete result.dataset.src; }); }); } else {
psbd.parentNode.replaceChild(npsbd, psbd); }

※冒頭のコメント（/* ... */）はソースコードの著作権の表記。記事／追加ページの投稿画像にWebPのrwの画像パラメーターと遅延読み込みのloading-lazyを自動的に付けるプログラムになる。画像パラメーターはpmoi[1], pmoi[1] + "-rw")の「-rw」のところでカスタマイズできるし、loading-lazyのプログラムもYouTube動画を含めたり、初回画面の画像を優先的に読み込んで早めに表示するdecoding-asyncを追加できたりもする。レスポンシブ配信を追加するときは少し変わるから注意を要する。JavaScript

const bisrc = blimg.src, aroi = blimg.dataset.originalWidth / blimg.dataset.originalHeight, sssw = aroi &lt; 1 ? Math.trunc(640 / aroi) : 640, lssw = aroi&lt; 1 ? Math.trunc(1280 / aroi) : 1280;
if (/blogger\.googleusercontent\.com\/img\/b\//.test(bisrc)) {
if (chj) {
const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc);
blimg.dataset.src = pmoi[1] + pmoi[2] + "-rw" + pmoi[3]; } else {
blimg.dataset.src = bisrc; }
const rwpm = chj ? "-rw-e100" : "-e100", wobp = /^(.+\/)(.*)(\/.*)$/.exec(blimg.dataset.src);
blimg.dataset.srcset = wobp[1] + "w" + sssw + rwpm + wobp[3] + " " + sssw + "w, " + wobp[1] + "w" + lssw + rwpm + wobp[3] + " " + lssw + "w"; }

※太字が追加部分。画像パラメーターのカスタマイズは通常と同じで。rwpm = chj ? "-rw-e100" : "-e100"の半角二重引用符（""）の中で、前者がJPG／JPEG、後者がその他のファイル形式のものとして行える。YouTube動画を含める場合はさらにソースコードを追加する。JavaScript

blimg.dataset.src = bisrc; }} else {
blimg.dataset.src = bisrc; }
if (blimg.height) {

※太字が追加部分。動画に画像編集が影響しないようにソースコードを切り離している。本文に記載されたscriptタグを実行するソースコード投稿のHTMLモードで、記事／追加ページの本文にJavaScriptが置かれる場合がある。自作のコードだけではなくてTwitterやInstagramなどのWebサービスの埋め込みコードなどにも含まれている。noscriptタグで止められるとそのままでは実行できないから修正用のプログラムを追加しなくてはならない。JavaScript

const pbscs = npsbd.querySelectorAll("script");
if (pbscs[0]) {
pbscs.forEach(pbsc =&gt; {
const npbsc = document.createElement("script");
for (const name of pbsc.getAttributeNames()) {
if (!name) {
break; } else {
const value = pbsc.getAttribute(name) ? pbsc.getAttribute(name) : true;
npbsc.setAttribute(name, value); }}
if (pbsc.textContent) npbsc.textContent = pbsc.textContent;
npsbd.replaceChild(npbsc, pbsc); }); }

画像軽量化の基本のソースコードに続けて同じscriptタグの中に入れておく。ブログの投稿の一つでも本文にscriptタグを載せていたら追加しないと実行されない。TwitterやInstagramなど埋め込みコードの場合はファイルの読み込みが通常よりも遅れるので、コンテンツが表示されるのにもっと時間がかかってしまうけれどもブログの初回画面が余計に遅らされることは逆になくなるので、全体として大きな差はないかも知れない。プログラムの動作確認用のソースコード投稿画像にパラメーターが付いているかどうかは最終的に表示された投稿画像のURLで確認することができる。とはいえ、元の画像と二重に読み込まれるとたとえ投稿画像が表示されても実際は表示速度が下がってしまう。ちゃんと動作しているかどうかを確認するだのソースコードを載せておく。JavaScript

/* 画像パラメーターを付けるだけの場合 */
blimg.style.aspectRatio = aroi; } alert("投稿画像のパラメーターは\u300c" + /\/(.*)\/.+$/.exec(blimg.src)[1] + "\u300dになっています\u3002"); })).then(() =&gt; {

/* 遅延読み込みと併用する場合 */
blimg.src = ""; alert("投稿画像のパラメーターは\u300c" + /\/(.*)\/.+$/.exec(sbisrc)[1] + "\u300dになっています\u3002"); return blimg; })).then(results =&gt; {

※太字が追加部分。投稿の画像を上から（横並びがあれば左を先に）一つずつ調べてパ画像URLのパラメーターの部分だけをポップアップで表示する。Bloggerで最初から付いたサイズやプログラムで追加したWebPのrwやキャッシュ期限のe*が付いたかどうかが分かる。暗くて見辛いけれども背景に何もない状態でポップアップが出たら元の画像が読み込まれる前に適切に変更されたことになる。サイトのパフォーマンスをチェックするPageSpeed InsightsではWebPを追加すると「次世代フォーマットでの画像の配信」、キャッシュ期限を百日以上にすると「静的なアセットでの効率的なキャッシュポリシーの使用」が合格するようになる。ただしPageSpeed Insightsはブラウザが元の投稿画像を読み込み始めた後にrwや百日以上のe*を付けても合格になってしまうからその結果だけではプログラムの動作確認として十分ではない。Bloggerの投稿画像のプログラムの組み込み方記事／追加ページの投稿データの独自タグは全て同じで、そして追加するJavaScriptの内容も殆ど同じだ。大きく変わるのは独自タグの親要素や周りの状況で、それに合わせて追加するJavaScriptの内容も少し変わり得る。公式と非公式の全てのテーマでプログラムを組み込む際の共通の手順をサンプルのソースコードに従って挙げる。

投稿の本文の独自タグ：<data:post.body/>に「blog-content」のクラスのnoscriptタグを付ける（サンプルでは画像ありの記事／追加ページでしかnoscriptタグを付けないように加工されている）。

本文のnoscriptタグだけを含む親要素（他のコンテンツは含めても表示されなくなる）に「post-body」のクラスを付ける。

JavaScriptの冒頭のpsbdの取得先の「div.post-body」を本文のnoscriptタグの親要素のタグとクラス、blctの取得先の「noscript.blog-content」をnoscriptタグとクラスに合わせる（サンプルでは合っているからそのままで構わない）。

JavaScriptのソースコードを適切に読み込まれるところ（BloggerのHTMLの基本構造）、最も遅れずに本文を表示させるならばnoscriptタグを含む親要素の直後に置く。

テンプレートで記事／追加ページのの本文の独自タグがインデックスページ（トップやアーカイブやラベル）と共用になっていると遅延読み込みのソースコードがそのままでは不具合が生じるから記事／追加ページのみで使うように書き換える必要がある。最も簡単なのはHTMLのソースコードの独自タグのtagのcond属性にバージョン毎の振り分け項目を追加する。テンプレートのバージョンによる相違点について現在、Bloggerのテンプレートはバージョンが二つに分かれていて公式テーマだとContempoなどのバージョン３とSimpleなどのパージョン２のテンプレートがある、それ以外の非公式テーマも、大抵、どちらかに含まれる。テンプレートのバージョンはレイアウトバージョンで、ソースコードの冒頭のhtmlタグで確認することができる。

レイアウトバージョン３

b:layoutsVersion='3'

レイアウトバージョン２

b:version='2'

使える独自タグなど、ソースコードがそれぞれの組で似ているので、レイアウトバージョンが同じものは公式でも非公式でもカスタマイズの参考になる。バージョン３での記事／追加ページと画像ありの条件で振り分けHTML：b:tag

<div class='post-body'>
  <b:tag cond='data:view.isSingleItem and data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag>
</div>

※太字が追加部分。HTML：script

<b:if cond='data:view.isSingleItem and data:view.featuredImage'>
<script>
  遅延読み込み用ソースコード
</script>
</b:if>

※太字が追加部分。バージョン２での記事／追加ページと画像ありの条件で振り分けHTML：b:tag

<div class='post-body'>
  <b:tag cond='data:blog.pageType == "item" or data:blog.pageType == "static_page" and data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag>
</div>

※太字が追加部分。HTML：script

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page" and data:view.featuredImage'>
<script>
  遅延読み込み用ソースコード
</script>
</b:if>

※太字が追加部分。遅延読み込みのHTMLが記事／追加ページだけでテンプレートのソースコードに記載されるようになる。遅延読み込みのプログラムの組み込みの例として公式テーマを二つのバージョンに分けて紹介する。Contempoなどのバージョン３の公式テーマ

Contempo

Soho

Emporio

Notable

Essential

全て共通のカスタマイズHTML

<b:includable id='postBody' var='post'>
  <!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
  <div class='post-body entry-content float-container' expr:id='"post-body-" + data:post.id'>
    <b:tag cond='data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/><b/tag>
  </div>
<b:if cond='data:view.featuredImage'>
  <script>
    遅延読み込み用ソースコード
  </script>
</b:if>
</b:includable>

※太字が追加部分。NotableだけはHTMLの同じコードが二つあって一つはウィジェットの設定のdefaultmarkupsタグの中なので、その外で実際に使われているBlog1のwidgetタグの中のHTMLを書き換えなくてはならない。scriptタグはBloggerのXMLファイルでエラーにならなければどこでも構わないけど、しかしnoscriptタグを含む親要素の直後に置くことで最も遅れずに本文を表示させられる。シンプルなどのバージョン２の公式テーマ

Simple

Dynamic Views

Picture Window

Awesome Inc.

Watermark

Ethereal

Travel

全て共通のカスタマイズ元のソースコードの本文の部分がバージョン３と異なるので、遅延読み込みのソースコードを修正する。JavaScript

const psbd = Blog1.querySelector("div.post-body"), blct = psbd.querySelector("noscript.blog-content"), npsbd = psbd.cloneNode(false), nl = document.createElement("div"), dfi = document.createElement("div"); nl.style.height = "100vh"; psbd.insertBefore(nl, blct); dfi.setAttribute("style", "clear:both;"); npsbd.appendChild(dfi); npsbd.insertAdjacentHTML("afterbegin", blct.textContent);

基本のソースコードの冒頭の部分、「const psbd……;」から「npsbd.insertAdjacentHTML……;」までの間に二ヵ所のコード（太字の部分）を追加する。投稿画像の後の文章などのコンテンツの回り込み（前の投稿画像の余白に入り込んで上がってしまうこと）を防ぐための措置になる。HTML（デスクトップ）

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
  <b:tag cond='data:blog.pageType == "item" or data:blog.pageType == "static_page and data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page" and data:view.featuredImage'>
  <script>
    遅延読み込み用ソースコード
  </script>
</b:if>

※太字が追加部分。YouTube動画に対応するときはソースコードが少し違うけれども独自タグのtagのcond属性から「and not data:view.featuredImage.isYoutube」を削除することは変わらない。HTML（モバイル）

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
  <b:tag cond='data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:view.featuredImage'>
  <script>
    遅延読み込み用ソースコード
  </script>
</b:if>

※太字が追加部分。HTMLのカスタマイズがデスクトップとモバイルに分かれているので、必要な場合は両方とも投稿データの独自タグを所定のnoscriptタグで囲む。scriptタグはBloggerのXMLファイルでエラーにならなければどこでも構わないけど、しかしnoscriptタグを含む親要素の直後に置くことで最も遅れずに本文を表示させられる。

Nickey2022年3月24日 7:57
はじめまして。
数年ぶりにbloggerのテンプレートを一新しようと試行錯誤している中で、本記事を拝見しまして
「遅延読み込みのloading-lazyと併用する場合」のスクリプトを利用させて頂きたいと思います。
その際に気付いた事ですが、10行目のif文（旧URLの処理）を13行目が上書きしてしまうので、
13行目は10行目のif文に対するelseブロックに入れる必要があるのかと思いました。

webpはgoogleが提唱する企画でもあるので、bloggerなんかは率先して最初からwebp形式で挿入できるようなUIにして欲しいですよね…
返信削除
返信
Aurealisa2025年5月16日 21:13
素晴らしいです。非常に詳細です。Nagahitoyuki さん、ありがとうございます。
返信削除
返信