Bloggerの記事/追加ページの投稿画像にloading-lazyを自動的に付けるプログラム 結城永人 - 2022年1月21日 (金) 以前、取り上げた画像の遅延読み込みのloading-lazyをBloggerの記事/追加ページの投稿画像に自動的に付けるJavaScriptプログラムを開発したので、無料で提供する。 追記:2023年9月から投稿画像のloading-lazyによる遅延読み込みがBloggerの設定から可能になったので、本稿のプログラムはYouTube動画にもloading-lazyを付けるとか初回画面の画像のloading-lazyを除外してdecoding-asyncを付けるなんて機能が必要なときに使うことを勧める。 画像のある記事/追加ページの本文を全てJavaScriptで止めてから書き出すことになるので、その分だけ表示速度が遅れる。そしてHTMLだけの場合と比べてGoogle検索などの読み取りが全く劣らないとはかぎらない。年々、向上して今では殆ど差がないといわれるから大丈夫かも知れないけれども念のために注意しておきたい。デザインは変わらず、表示速度が速くなる分は有利(画面外の画像が多いほどに遅延読み込みの効果が大きい)だとしてもGoogle検索などからサイト評価が上がって訪問者が増えるかどうかは分からないので、ブログのアクセスアップにSEO(検索エンジン最適化)対策を考える場合は様子を見ながら取り入れるべきだろう。 参考サイトJavaScript SEO の基本を理解する もう一つサイト広告のアドセンスの自動広告を使う場合にアドセンスの管理画面のプレビューに反映しないみたいだ。サイト広告が設定されていればブログで実際に表示されるけれどもアドセンスの管理画面で数や位置を決めるときはサイト広告のプレビューが出ないと分からないからloading-lazyの自動化のプログラムを外す必要がある。 一時的に止めるならばソースコードの振り分けのためのcond属性の「data:view.featuredImage」(二つある)の先頭に半角感嘆符(!)を付けて「!data:view.featuredImage」にするのが簡単だ。通常と反対に画像なしのページでプログラムが記載されるから何も起こらなくて動作しないに等しくなる。 本稿のプログラムを使う人は制作者の結城永人の著作権の表記もソースコードに併せて載せておくMITライセンスでカスタマイズも再配布も許可するから消さないで欲しい。 僕が提供している非公式テーマのImaginaryを使っている場合は著作権の表記が含まれているから今回の分を繰り返す必要はない。 カスタマイズは全てBloggerの管理画面のテーマのHTML編集、またはバックアップと元に戻すからテンプレートのソースコードを書き換える。 追記:HTMLのloading-lazyは2022年3月時点では投稿画像の遅延読み込みの十分な効果が得られないかも知れないので、JavaScriptのIntersection Observer APIを使った確実な方法も紹介している。 目次投稿画像にloading-lazyを付けるソースコード初回画面の投稿画像を除外してloading属性を記載する画像の横並びが上手く行かない場合の対策投稿のYouTube動画にもloading-lazyを追加する場合初回画面の投稿画像にdecoding-asyncを追加する場合本文に記載されたscriptタグを実行するソースコードプログラムの動作確認用のソースコードBloggerの投稿画像のプログラムの組み込み方テンプレートのバージョンによる相違点についてContempoなどのlayout-versionが3の公式テーマSimpleなどのlayout-versionが2の公式テーマ 投稿画像にloading-lazyを付けるソースコード 初回画面の投稿画像を除外して記載する 記事/追加ページの全ての投稿画像で、初回画面のものを除外して画像のimgタグに遅延読み込みのloading-lazyを付ける。 HTMLとJavaScriptの二つのソースコードを使用する。 Bloggerのテンプレートの種類によって違いが出て来る場合があって取り付ける際は幾らか修正しなくてはならないかも知れない。 HTML <div class='post-body'> <b:tag cond='data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag> </div> ※太字が追加部分。 Bloggerの全てのテンプレートで記事/追加ページの投稿データが独自タグの<data:post.body/>で出されるので、所定のnoscriptタグで囲む。 するとブラウザのJavaScriptがオフのときは通常の仕方で投稿が表示され、オンのときは投稿全体の表示が、一旦、止められることになる。 親要素や周りの状況はテンプレートによって異なるかも知れないけど、とにかく必要なのは親要素のクラスで、サンプルだとdivタグの「post-body」をJavaScriptの方と合わせて使っている。 noscriptタグは独自タグの条件分岐のifでBloggerの通常の投稿画像、すなわちYouTube動画で取得可能なサムネイル以外があるときに書き出すようにした。なので通常の投稿画像がないときはnoscriptgタグはなくてブログの記事/追加ページのソースコードと従来のままの状態になる。 JavaScript /* Copyright: Nagahito Yuki 2022 | https://www.nagahitoyuki.com/2022/01/automatic-lazy-load-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.innerText); const blimgs = npsbd.querySelectorAll("img"); if (blimgs[0]) { Promise.all([...blimgs].map(blimg => { const aroi = blimg.dataset.originalWidth / blimg.dataset.originalHeight; if (blimg.height) { if (!blimg.width && aroi) blimg.width = blimg.height * aroi; } else if (blimg.width) { if (aroi) blimg.height = blimg.width / aroi; } else if (aroi && !blimg.style.aspectRatio) { blimg.style.aspectRatio = aroi; } if (!blimg.alt) blimg.alt = "<data:messages.image/>"; blimg.dataset.src = blimg.src; blimg.src = ""; return blimg; })).then(results => { psbd.parentNode.replaceChild(npsbd, psbd); results.forEach(result => { if (result.getBoundingClientRect().top >= window.innerHeight) result.loading = "lazy"; result.src = result.dataset.src; delete result.dataset.src; }); }); } else { psbd.parentNode.replaceChild(npsbd, psbd); } ※冒頭のコメント(/* ... */)はソースコードの著作権の表記。 初回画面の投稿画像を除外するために投稿画像のimgタグの属性を使って本文の中での表示位置(最上段からの高さ)を計測している。画像のサイズを知るためにBloggerの画像タグで自動的に付けられるheight(縦幅)かwidth(横幅)かdata-original-height(オリジナル画像の縦幅)とdata-original-width(オリジナル画像の横幅)を使っている。なのでそれらの属性が外されている正確に動作しなくなる。 注意:投稿画像のimgタグのheight属性か少なくともdata-original-height属性とdata-original-width属性(両方)を必ず付ける(Bloggerの投稿画像でどれかは付けられるものだから外さないでおく)。 画像の表示速度は画像タグにwidth属性とheight属性があった方がブラウザが縦幅比を直ぐに知るから良いといわれる。Bloggerでは「元のサイズ」を選ぶと付かないので、付けて構わなければJavaScriptの「blimg.style.aspectRatio = aroi;」の後に「blimg.height = blimg.dataset.originalHeight; blimg.width = blimg.dataset.originalWidth;」を追加するとheight属性とwidth属性が付いてないときにオリジナル画像のサイズのdata-original-height属性とdata-original-width属性から取り込んで追加することができる。ただしそのままでは投稿画像が表示領域からはみ出すかも知れないので、画像タグをデザインのCSSに.post-body img {max-width:100%}(YouTube動画も含める場合は.post-body img, .post-body iframe {max-width:100%})などでどのくらいの大きさまで表示するかを調整する必要がある。 投稿画像が「元のサイズ」以外で取り込まれるときはheight属性かwidth属性が付くので――長い方が選ばれる――付いてない方をdata-original-height属性とdata-original-width属性の比率から算出して付けるようにしてある。 追記:2023年2月12日に投稿画像の説明用のalt属性が空の場合にSearch Considerでモバイルユーザビリティの警告が出ることが分かり、ブログのGoogle検索のスマホでのサイト評価を下げるかも知れないので、修正するために一行を追加した。 if (!blimg.alt) blimg.alt = "<data:messages.image/>"; Bloggerの投稿画像の説明用のalt属性は投稿の編集画面に個々に付けられるけれども何もしなければ空になる。なので、空の場合、文章が入るようにした。日本語ならば一律で「イメージ」という文章になる。文章を変えたい場合は「<data:messages.image/>」の部分を他のものに置き換える。不要ならば削除しても遅延読み込みの動作に支障はない。 ブログの記事/追加ページの高速化の方法として投稿画像のwebpファイルへの軽量化も可能で、遅延読み込みと組み合わせるプログラムも掲載したから一緒に使うともっと効果的だと思う。 画像の横並びが上手く行かない場合の対策 通常の使用では問題がないけれども画像の横並びを二段(縦二列)以上で行ったときにはみ出してレイアウトが崩れる不具合が確認された。 投稿画像の遅延読み込みのもう一つの方法、JavaScriptのIntersection Observerで行う場合に投稿画像をスムーズに読み込めないことがある。 loading属性で行う場合は大きな影響はないようだけれども何かしら支障があればIntersection Observerの記事に載せた対策を使って同じように修正することができる。 関連ページBloggerの投稿画像の遅延読み込みのloading-lazyの自動化のJavaScriptプログラムの説明付きソースコード 投稿のYouTube動画にもloading-lazyを追加する場合 Bloggerの投稿から簡単に取り込めるYouTube動画のiframeタグもloading属性で遅延読み込みが可能なので、やっても良いと思う。 基本のソースコードのJavaScriptの二ヵ所を変更する。 ※cond属性の「and not data:view.featuredImage.isYoutube」を削除する。 変更①JavaScript const blimgs = npsbd.querySelectorAll("img, iframe"); ※太字が追加部分。 変更②JavaScript if (blimgs[0]) { Promise.all([...blimgs].map(blimg => { (中略) if (result.getBoundingClientRect().top >= window.innerHeight) result.loading = "lazy"; result.src = result.dataset.src; delete result.dataset.src; }); }); } else { psbd.parentNode.replaceChild(npsbd, psbd); } ※打ち消し線が削除部分。 Bloggerの投稿からの取り込み、またはYouTube動画の埋め込みコードも普通に使うかぎりはブログで初回画面で表示されないときに遅延読み込みが発動する。 注意:初回画面でのYouTube動画の有無を判定するためにiframeタグのheight属性とwidth属性を使っているので、外してしまうと正常に動作しない。 Bloggerの投稿でYouTube動画をメニューのボタンから取り込むとheight属性とwidth属性が付くし、YouTube動画の埋め込みコードでも付いているのを外さないで使う。 iframeタグを遅延読み込みの対象するからYouTube以外のSoundCloudやVimeoといった他のソーシャルメディアの埋め込みコードも含まれることになる。 YouTubeだけとか遅延読み込みを特定のiframeにかけたい場合はそうした要素にidかクラスを付けて一つ目の追加部分の「iframe」を「iframe.youtube」(動画のiframeタグにyoutubeのクラスを付けた場合)のように書きき換えれば良い。 初回画面の投稿画像にdecoding-asyncも追加する場合 初回画面の投稿画像を少しでも早く出すためにdecoding-asyncを付けることができる。 基本のソースコードのJavaScriptの一ヵ所を変更する。 JavaScript results.forEach(result => { if (result.getBoundingClientRect().top >= window.innerHeight) result.loading = "lazy"; else result.decoding = "async"; result.src = result.dataset.src; delete result.dataset.src; }); ※太字が追加部分。 投稿画像のimgタグだけにloading-lazyを記載する基本のソースコードと投稿動画などのiframeタグにも追加するものとどちらでも同じところを編集する。 遅延読み込みでYouTube動画に対応しているとdecoding属性がiframeタグに無効だから付けないようにプログラムから除外した方が良いと思う。 JavaScript results.forEach(result => { if (result.getBoundingClientRect().top >= window.innerHeight) result.loading = "lazy"; else if (result.tagName === "IMG") result.decoding = "async"; result.src = result.dataset.src; delete result.dataset.src; }); ※太字が追加部分。 画像とYouTube動画にloading-lazyを付けて初回画面の画像だけdecoding-asyncを付ける場合はYouTube動画からdecoding-asyncを除外する、いい換えれば画像だけしか付けないようにする。 本文に記載されたscriptタグを実行するソースコード 投稿のHTMLモードで、記事/追加ページの本文にJavaScriptが置かれる場合がある。自作のコードだけではなくてTwitterやInstagramなどのWebサービスの埋め込みコードなどにも含まれている。noscriptタグで止められるとそのままでは実行できないから修正用のプログラムを追加しなくてはならない。 JavaScript const pbscs = npsbd.querySelectorAll("script"); if (pbscs[0]) { pbscs.forEach(pbsc => { const npbsc = document.createElement("script"); if (pbsc.src) npbsc.src = pbsc.src; if (pbsc.async) npbsc.async = "async"; if (pbsc.textContent) npbsc.textContent = pbsc.textContent; npsbd.replaceChild(npbsc, pbsc); }); } 遅延読み込みの基本のソースコードに続けて同じscriptタグの中に入れておく。 ブログの投稿の一つでも本文にscriptタグを載せていたら追加しないと実行されない。 TwitterやInstagramなど埋め込みコードの場合はファイルの読み込みが通常よりも遅れるので、コンテンツが表示されるのにもっと時間がかかってしまうけれどもブログの初回画面が余計に遅らされることは逆になくなるので、全体として大きな差はないかも知れない。 プログラムの動作確認用のソースコード 投稿画像や動画にloadingやdecoding属性を付けるプログラムはブログに取り入れてはっきり分かるものではない。表示速度が上がるとしても体感される速さはほんの僅かだったり、インターネットの接続状況でも変わってしまうから気付かないかも知れない。 ちゃんと動作しているかどうかを確認するだのソースコードを載せておく。 JavaScript if (result.getBoundingClientRect().top >= window.innerHeight) result.loading = "lazy"; alert("loading属性は\u300c" + result.getAttribute("loading") + "\u300dの状態です\u3002\ndecoding属性は\u300c" + result.getAttribute("decoding") + "\u300dの状態です\u3002"); result.src = result.dataset.src; delete result.dataset.src; }); ※太字が追加部分。 投稿の画像や動画を上から(横並びがあれば左を先に)一つずつ調べてloading属性とdecoding属性の有無をポップアップで表示する。 プログラムが正常に動作して初回画面にない画像や動画にloading属性が付けば「lazy」、それ以外で付かなければ「null」、初回画面にある画像にdecoding属性が付けば「async」、それ以外で付かなければ「null」と分かる。 暗くて見辛いけれども背景に何もない状態でポップアップが出たら元の画像が読み込まれる前に適切に変更されたことになる。 サイトのパフォーマンスをチェックするPageSpeed Insightsでは「オフスクリーン画像の遅延読み込み」が合格するようになる。 ただしPageSpeed Insightsはブラウザが元の投稿画像を読み込み始めた後にloading-lazyを付けても合格になってしまうからその結果だけではプログラムの動作確認として十分ではない。 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などのバージョン3とSimpleなどのパージョン2のテンプレートがある、それ以外の非公式テーマも、大抵、どちらかに含まれる。テンプレートのバージョンはレイアウトバージョンで、ソースコードの冒頭のhtmlタグで確認することができる。 レイアウトバージョン3 b:layoutsVersion='3' レイアウトバージョン2 b:version='2' 使える独自タグなど、ソースコードがそれぞれの組で似ているので、レイアウトバージョンが同じものは公式でも非公式でもカスタマイズの参考になる。 バージョン3での記事/追加ページと画像ありの条件で振り分け 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> ※太字が追加部分。 バージョン2での記事/追加ページと画像ありの条件で振り分け 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などのバージョン3の公式テーマ ContempoSohoEmporioNotableEssential 全て共通のカスタマイズ 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タグを含む親要素の直後に置くことで最も遅れずに本文を表示させられる。 シンプルなどのバージョン2の公式テーマ SimpleDynamic ViewsPicture WindowAwesome Inc.WatermarkEtherealTravel 全て共通のカスタマイズ 元のソースコードの本文の部分がバージョン3と異なるので、遅延読み込みのソースコードを修正する。 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.innerText); 基本のソースコードの冒頭の部分、「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タグを含む親要素の直後に置くことで最も遅れずに本文を表示させられる。 コメント 新しい投稿 前の投稿
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
アドセンスの個人のアメリカの税務情報/W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
若者たちがFacebookよりもTwitterを多く始めるというソーシャルメディアの利用者数の変化について 僕は Twitter をやって Facebook をやらないので、近年の特に日本の若者たちが似通って来ているのが面白いと思った。 「現在利用しているSNSサービスや動画サイト」について質問したところ、「LINE」の利用率が98.2%、「Twitter」の利用率が81.5%と前...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
後藤浩輝と抑鬱傾向による突発的な自殺 中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン (ゲーム)に熱中していて後藤浩輝...
There is / are a lot / number / variety ofの単数と複数の使い分け どうも単数か複数か分かり難い英語の表現があって熟語の「a lot of」(沢山の)や「a number of」(多くの、幾つかの)や「a variety of 」(様々な)なんだけれどもそれぞれがそこにあるというときに単数扱いの「There is」か複数扱いの「There are...
コメント