些細な日常
サイトの画像をデバイス毎に振り分けてレスポンシブに表示するにはimgタグにsrcset属性でそれぞれの画像URLを設定するのが簡単だ。 目次 imgタグのsrcset属性のマークアップ 画像を画面幅で切り替える場合 画像を解像度で切り替える場合 srcset属性の画像のレスポンシブ配信の内容 画像は画面幅と解像度を加味して表示される 画面幅で画像を確実に振り分ける方法 srcset属性の幅記述子の省略は画像選択に影響し得る sizes属性のレスポンシブ配信の役割 imgタグのsrcset属性のマークアップ Person sitting on top of gray rock overlooking mountain during daytime by Denys Nevozhai / Unsplash imgタグはそのままで、srcset属性を特定の仕方で値を付けて追加す…
Bloggerで取得した画像URLに 画像パラメーターのrwを追加する と画像データを軽量化したWebP画像に変換することができる。特にjpg／jpeg画像の場合に効果が大きいようだけれどもブログの画像の表示速度を高めることに繋がる。 記事／追加ページの投稿画像に画像パラメーターのrwを自動的に付けるプログラムを開発したので、無料で提供する。 JavaScriptで記事の本文の全ての表示を止めてから投稿画像に画像パラメーターを自動的に付けて出すことになる。便利だけど、その分、投稿画像を含めた記事の本文の全ての表示速度は遅れる、ほんの僅かだとしても投稿時に画像パラメーターを手動で付けておくよりも決して速くならないことに注意して欲しい。 そしてHTMLだけで記事の本文の全てを表示しないことはGoogle検索などの読み込みを劣らせるかも知れないので、 SEO（検索エ…
サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいdecoding-asyncの使い方を考えてみたい。 decoding-asyncは画像の非同期処理を示唆する Two swallows by Capri23auto / Pixabay decodingは画像のimg要素に使える属性で、画像のデコード（ファイルの諸々のデータ形式を画面表示に適したビットマップに変換する過程）の扱いを制御する。 decoding属性で指定できる三つの値 auto 同期と非同期の処理の仕方をブラウザに任せる（初期値） sync 同期処理を示唆する async 非同期処理を示唆する decoding属性は画像と画像以外のコンテンツをどの…
サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいloading-lazyの使い方を考えてみたい。 loading-lazyは画像の遅延読み込みを指定する Hoffman's Two-toed Sloth by gailhampshire / CC BY loadingは画像のimg要素、さらに別枠のiframe要素にも使える属性で、画像などの読み込みの開始位置を制御できる。 loading属性で指定できる二つの値 eager 画像などを記載位置で読み込む（初期値）。 lazy 画面内の画像などをレイアウト処理後に読み込み、画面外の画像などを読み込まない。 初期値のeagerは何もしないのと同じで、従…
Bloggerの管理画面が2020年9月から刷新されて投稿画像の出方が幾らか変わったから改めて纏めておきたい。 目次 四種類の投稿の仕方とそれぞれの最大幅 Bloggerの投稿画像のサイズ毎の圧縮の目安 画像URLで投稿画像のサイズを変更する方法 Bloggerの投稿画像のサンプルのソースコード Bloggerのimgタグのサンプルのソースコード Bloggerの画像URLのサイズ指定のパターン 画像URLでWebPファイルに変更する方法 webpファイルとその他の振り分けの仕方 四種類の投稿の仕方とそれぞれの最大幅 投稿画像の選択｜ Blogger パソコンからアップロード：デバイス（パソコン、スマホ、タブレットなど）から掲載する フォト：Googleフォトのギャラリーかアルバムから掲載する Blogger：Blogger（Bloggerに以前に取り込んだ画像）かGoogle…
Twitter にサイトのURLを投稿した場合にタイトルや説明文や画像などが自動的に追加される Twitterカード はサイトの設定が必要で、以前、 一般的な方法 と Blogger用の方法 を取り上げたんだ。 Bloggerについては公式テーマならば初期値のOPG設定（ Facebook でのURL投稿のカード表示）と結び付けるのがTwitterカードを表示するための簡単な仕方なんだけれども最近はブログのソースコードに一行を追加するだけでも大丈夫に変わったから改めて取り上げておきたい。 以前は画像なしのページがエラーで止まってしまうために一行を追加するだけという手早い表示方法は可能でもちょっと使い辛かったんだ。 BloggerのTwitterカードの一行追加の手順 ブログのソースコードの編集 Twitterカードの実装の検証 ブログのソースコードの編集 テーマ｜ Blogger B…
YouTube 動画には 四つの場面と五つのサイズのサムネイル画像が生成されて サイトで表示できる。ただし大きいサイズの二つのサムネイル画像のsddefault（640×480）とmaxresdefault（最大解像度）のタイプは必ずしも生成されない。サムネイル画像のURLのパターンに記入してYouTubeの所定のサーバーから他と同じように取得しようとしてもエラーになってしまう。現今、何もなければグレー画像が表示される仕様なんだ。 サイトでYouTube動画のサムネイル画像を表示する際に取得エラーを完全に回避するためには二つの大きいサイズよりも小さいサイズを選択するべきだけど、しかし画質を上げたりするためにも大きいサイズをどうしても使いたい場合はYouTube動画にサムネイル画像が生成されなくて取得できないエラーのときだけ小さいサイズを使うようにすれば大丈…
Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableは記事毎に JSON-LD の構造化データが付いていてGoogleなどの検索エンジンがサイト内容を通常よりも認識し易くなっている。 ブログのテンプレートのソースコードからマークアップを確認してみるとpublisher（公開主）がBloggerになっていてさらに画像なしの場合の画像にBloggerのロゴが記載されるのもちょっと気がかりなんだ。 Bloggerを使っているから間違いではないにせよ、ブログ自体には一致してないわけで、どちらもブログ自体に合わせてカスタマイズしたいと感じてしまう。 A man who began doing parkour cartwheel on the grass by farioff / Pixabay 検索エンジンからのアクセスアッ…
Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableはトップやアーカイブなどのインデックスページでのSNSのためのOGP設定の画像（og:image）が記事の抜粋の画像の掲載数に一致している。 OGP設定の画像はSNSに共有する際に一枚しか使われないので、配信するのは一枚で良いと思う。幾つも記載されるとソースコードが長くなって表示速度を落としてしまう。Bloggerで使われる画像URLは文字列が細かく識別されて只でさも普通よりは伸びるから影響は大きそうだ。しかもインデックスページは専用の画像ではないから記事が更新されて画像が追加されると変わるのが個人的に落ち着かない。固定の画像を付けるのが望ましいから併せてカスタマイズを行いたくなる。 Contempo｜ Blogger 旧テーマのシンプルと動的ビューと画像ウィ…
サイトでファビコンやウェブクリップアイコンを設定すると訪問者の利便性が上がるから良いと思う。前者はブラウザのタブでサイト名の先頭に付けられる。後者はスマホ／タブレット向けのショートカットアイコンで、ブラウザのブックマークでサイト名の先頭に付けられたり、ホーム画面に追加するとデバイスに貼り付けられたりする。ファビコンとウェブクリップアイコンの何れの画像もサイトの顔みたいに訪問者へどんなサイトなのかを直感的に示すのに役立つ。 ファビコンの汎用的な設定について サーバーに専用の画像をアップロード サイトのhead内にlinkタグで画像URLを記載 ファビコンのサイズ縦横16～64px程度で、綺麗に表示される画像を専用に作成して使用すると良いと思う。 大きな画像を使用してもブラウザが自動的に縮小して表示するから大丈夫だ。 ファイル形式は pngが小さめの画像の画質には崩…
本当に恐ろしいし、ブロガーとしては困ってしまうばかりだけれどもBloggerでブログに載せた Googleフォト の写真がいつの間にか消えてしまうからなぜなのかと考えざるを得なくなった。 消えてしまった写真はGoogleフォトのアルバムからブログに載せていた 調べてみたら以前からBloggerブログではGoogleフォトから載せた写真が消えてしまうという現象があったみたいで、Googleフォトのアルバムの取り扱いが影響している可能性が高いと推測された。 振り返ると全ての画像が消えたわけではなくて一部だったけれどもGoogleフォトのアルバムへブログに載せた写真を後から動かしていた感じがする。 どこのアルバムにも入れてない写真をBloggerブログに載せてからGoogleフォトでアルバムに追加したのが良くなかったのではないか。 Googleフォトのアルバムを操作し…
ホームページやブログを様々なディレクトリー型の検索エンジンに登録している。するとバナーが使えるサイトもあってしかし画像のアップロードはできなかったりするとどこかのサーバーから画像のURLを持って来なくてはならないんだ。 画像のURLを取得できるサイトを探さなくてはならなくなった 今までGoogleのPicasaを使っていてバナー画像のURLは取得できたけれどもフォトに統合されるような形で今年の春にサービスが終了してしまった。 外部サイトに既に貼った画像は使えるし、消え去るわけでもない。ただし僕としては気持ち悪いので、他のウェブサービスに変えなくては行けないと考えていた。 Googleの フォト が使えればアップロードした画像のデータは引き継がれているというか、元から中身は同じだから何の迷いもなかった。画像のURLを取得することができるかどうかだけがちょっと曖昧…