些細な日常
Bloggerブログの投稿に画像かYouTube動画があると先頭のものを対象としてサムネイル画像を自動的に生成することができる。これはブログトップページなどのインデックスページや人気の投稿のなどのガジェットのスニペット、またはFacebookやXといったソーシャルメディアへの投稿の共有で使われることになる。画像かYouTube動画がない投稿はサイムネイル画像もないものとして扱われることになる。 投稿のサムネイル画像は取得先の画像かYouTube動画が複数ならば変更できる トップページ｜ 気になる情報局 投稿の画像かYouTube動画が一つしかなければサムネイルもそれしかないんだけれども複数ならば二つ以降のどれかを先頭に置いてブログで表示する際にプログラムで入れ替えて正しい位置へ移動させることでサムネイルに使うことができる。 サイトのコンテンツの位置を変更するJavaScriptプログラム Blogg…
YouTube 動画には 四つの場面と五つのサイズのサムネイル画像が生成されて サイトで表示できる。ただし大きいサイズの二つのサムネイル画像のsddefault（640×480）とmaxresdefault（最大解像度）のタイプは必ずしも生成されない。サムネイル画像のURLのパターンに記入してYouTubeの所定のサーバーから他と同じように取得しようとしてもエラーになってしまう。現今、何もなければグレー画像が表示される仕様なんだ。 サイトでYouTube動画のサムネイル画像を表示する際に取得エラーを完全に回避するためには二つの大きいサイズよりも小さいサイズを選択するべきだけど、しかし画質を上げたりするためにも大きいサイズをどうしても使いたい場合はYouTube動画にサムネイル画像が生成されなくて取得できないエラーのときだけ小さいサイズを使うようにすれば大丈夫だと考えられる。 JavaScriptで…
サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策（検索できる最適化）にも有効と考えられるGooglも推奨する JavaScriptのIntersection Observerを使ったサイト作成 を気に入ってブログに実装している。 追記：サイトの画像の遅延読み込みは HTMLのloading属性で簡単に行える ようになった。JavaScriptのIntersection observerも同じように使えるけど、サイトのプログラムで望み通りに動作させる以外の目的ではHTMLよりもコードを増やしてしまうので、むしろ画像以外のコンテンツの遅延読み込みやその他の 無限スクロール などの動作に使う方が…
Bloggerの公式テーマのテンプレートで記事の抜粋のスニペットがインデックスページやサイドバーに置かれる場合に画像なしの投稿については文章だけしか載らない。専用のサムネイル画像を予め用意しておいて画像ありの投稿と変わらずに表示するようにスニペットのデザインを変えるカスタマイズの方法を考えてみたい。 新テーマのContempoとSohoとEmporioは注目とブログと人気の投稿の三つのウィジェット、Notableは注目かブログと人気の投稿の二つのウィジェットのスニペットでサムネイル画像が別々の仕方で表示される。そしてテーマ毎にデザインも違うので、それぞれにカスタマイズためのソースコードを取り上げる。 旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行は注目とブログの投稿と人気の投稿の三つのウィジェットのスニペットでサムネイル画像が別…
Bloggerブログで記事にYouTube動画を載せるにはウェブの投稿の「動画」から取り込むのが便利だと思う。 YouTubeの自分のチャンネルは直ぐに探せるし、他人のチャンネルは検索からキーワードやURLで埋め込みコードを簡単に取得できる。 サイズが「320×266」で固定されているから タブレットやパソコンでは大きく表示したくなる けど、しかしスマホでもバランスが悪くて変えたくなって来たんだ。 BloggerのデフォルトだとYouTube動画の様々な画面比にきっちり対応できるけれども昨今は16:9の画面比が大半を占めているから完全に合わせてしまった方が良いと思う。 毎回、上下の余りの黒い部分が太過ぎるし、モバイルの記事では最初にサムネイル画像が上下の黒い余りなしに表示されていて実際の動画よりも、可成、大きく膨らんでいる。 デザインとして画面比を16:9の「320×180」に設定するのが望ましい。 モ…
Bloggerのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行の旧テーマのウェブバージョンでサイドバーの記事のリンクのYouTubeのサムネイルがはみ出していると気付いた。 何もしてないはずなので、Bloggerでデザインの変更が入ってバグが起きているかも知れない。 ちょっと前にモバイルのインデックスページで記事のリンクでの記事の本文の抜粋が消えるという現象が一時的に起きていたんだ。サーバーからデフォルトのデザインを動かされたみたいだった。タイトルとサムネイルしか出なくて本当に焦らされたし、Bloggerブログを使っていて初めてバグが出ると分かった。 今回のサイドバーのサムネイルのはみ出しは僕のせいとは考え難い。 メインのコンテンツではないからブログのウェブバージョンのサイドバーはサムネイルを消して表示しても良かったけれどもそのままで続けるの…
Bloggerはウェブの編集から動画挿入によって YouTube を検索して動画を取り込むことができる。 便利だと思って マイケル・ジャクソンの記事 で初めて使ってみたら記事ではサムネイルになって横幅320pxで表示されてしまう。スマホならば画面に収まって良いかも知れない。ちょっと両端が途切れるのは悲しいけれどもパソコンのウェブバージョンでもサムネイルのままになっている。小さ過ぎるのではないか。 YouTubeの埋め込みコードを使うと微妙に異なっていてスマホではサムネイルだけれどもパソコンのウェブバージョンでは普通に表示されていた。 BloggerでYouTubeを埋め込む方法は二つあってどちらが良いかと考えてしまう YouTubeの埋め込みコードは一般的にはそのままで使うとスマホの画面からはみ出すことが多くて レスポンシブに対応するCSS を追加せずに済むのは有り難いと思う。 画面幅に自動的に合わせるように…