些細な日常
サイトの表示速度を計測する PageSpeed Insights にその他のパフォーマンスを判定する要素が盛り込まれて総合的に使い易さの指標が得られるようになった。 コントラスト比の最低基準は4.5 : 1 PageSpeed Insights｜ Google Developers ブログで気がかりになったものの一つにコントラスト比があって「背景色と前景色には十分なコントラスト比がありません」という指摘と共にユーザー補助の項目も少し減点されてしまった。 調べるとWCAG（Web Content Accessibility Guidlines／ウェブコンテントアクセシビリティガイドライン）が定める最低基準となるレベルAAの4.5を通常の文字サイズで越えなくてはならない。 テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の…
BloggerでGoogleやYahoo!などの検索エンジンにブログを表示させなくする検索避けの方法としてHTML編集でのmetaタグのrobotsのマークアップについて紹介する。 目次 検索避けにmetaタグのrobotsを使う利点 Bloggerで使われるページの種類 metaタグのrobotsのマークアップの仕方 ブログのテンプレートの記載場所 検索避けを行うページの振り分け 検索避けにmetaタグのrobotsを使う利点 Robot by Janson_G / Pixabay Bloggerの検索避けの方法はmetaタグのrobotsの他にもう一つあって カスタムロボットヘッダータグ を使うことができる。これは管理画面の設定や編集画面の投稿の設定からスイッチを入れるだけだから簡単だけれども不利な点が一つだけあって別々の種類のページが幾つか混ざってしまっている。な…
HTMLの標準仕様が2021年1月29日にW3CのHTML5からWHATWGのHTML Living Standardに変更された。 HTML Living StandardとHTMLの歴史 その流れで、結構、大きな違いというか、個人的にやっていたfigureタグやblockquoteタグへのfooterタグのマークアップが通用しなくなったので、どうすれば良いかを纏めておきたい。 ブラウザがHTML5からHTML Living Standardへ完全に移行するわけではないから従来のままのマークアップでもサイトの表示や構成に直ちに不都合が生じるわけではない。 HTMLの標準仕様がWHATWGのHTML Living Standardになったからこれからは合わせてやって行くべきだけど、しかし以前の対応しないマークアップもなるべくならば合わせてやり直した方が良い…
サイト作成でHTMLのemとstrongはHTML5／Living Standardで強調と重要性の違いがあるもののどちらも使い方が似ていて分かり辛い。そして初期のデザインが斜体と太字なのがそれぞれにiとbと同じなので、見た目からどちらを使っても良いのかと混乱してしまう。 em／強調タグとは何か strong／重要性タグとは何か i／斜体タグとは何か b／太字タグとは何か 紛らわしい四つのタグの意味をしっかり捉えて的確に使い分けができるようにしたい。 em／強調タグとは何か HTMLのemタグのemはemphasis／強調の冒頭の二文字で、コンテンツの強調を表すために使われる。 em要素は、要素のコンテンツの強調を表す。 コンテンツの特定部分が持つ強調のレベルは、祖先のem要素の数によって与えられる。 強調の設置は、文の意味を変更する。このように要素は、コンテンツの不…
Bloggerブログはトップページに表示するスニペットの数は管理画面のメニューから決めることができる。 レイアウト ブログの投稿 メインページに表示する投稿数 設定 投稿 メインペーに掲載する投稿数の上限 ※メインページはブログのトップページ。 二ヵ所から決めることができてどちらも同じで、片方を変更するともう片方が自動的に揃うようになっている。 しかしブログのトップページに実際に表示されるスニペットの数が決めたよりも減ってしまうことがあり、正常に動作せず、不具合が生じたような結果になると分かっているから予め注意して決めなくてはならない。 トップページのスニペットの数が減る二つの原因 元の記事の画像数が非常に多い場合 元の記事の文字数が非常に多い場合 Bloggerブログのトップページに表示するスニペットが取られる元の記事の合計の画像数か文字数が一定の分量を越えるとその時点で…
ブログの知識と教養と雑学の記事（ 前半 ・ 後半 ）で使用したクイズ形式の選択ボタンのJavaScriptによるプログラムを提供する。HTML編集が可能で、scriptタグが反映するサイトならば同じような選択ボタンのコンテンツを作成して使用できる。 選択ボタンの基本的なプログラム サンプルのソースコード 日本の首都はどこか。 北海道 東京都 福岡県 リセット ※どれかを押すと正解が緑に、誤解が赤に変わって表示される。 HTML <p>日本の首都はどこか。</p> <ol class="selection"> <li>北海道</li> <li class="correct">東京都</li> <li>福岡県</li> </o…
Bloggerは管理画面の「Google アナリティクス プロパティ ID」からアナリティクスで設定済みのIDだけ入力すれば対応するテンプレートでアナリティクスを使うことができる。 便利だけど、ところが来年の7月1日からアナリティクスの従来のUAで始まるIDのユニバーサルアナリティクスのデータが止まってしまうので、次のGで始まるIDのGoogleアナリティクス4／GA4を新しく登録しなくてはならない。 参考サイト ユニバーサル アナリティクスのサポートは終了します Bloggerの管理画面の「Google アナリティクス プロパティ ID」から登録できなくて暫く様子を見ても変わらないので、カスタマイズでアナリティクスのソースコードをブログに記載する方法について取り上げることにする。 後からGA4に対応されたら基本的に必要なくなるけど、しかしアナリティクスのソ…
display:gridでセルの配置を決めるgrid-template-columns（列）やgrid-template-rows（行）の値のfrと%はどちらもグリッドレイアウトの全体の中の割合（占有率）を示すから同じではないかと思うけれども少し違っていて使い方を誤るとデザインが崩れる場合もあるから注意しなくてはならない。 グリッドレイアウトのfrの単位の特徴 トラックを分け合って隙間を全体に収める。 二つのトラックを半文字分の隙間で均等に分ける セル（横幅：トラック合わせ） セル（横幅：トラック合わせ） HTML <div class="grid-layout"> <div class="cell pink">セル（横幅：トラック合わせ）</div> <div class=&qu…
サイトの画像をデバイス毎に振り分けてレスポンシブに表示するには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の投稿画像を HTMLのloading-lazy で自動化するプログラムを紹介したけれども動作を詳しく調べた結果、AndroidのChromeで初回画面から2000pxくらい下の画面外の画像しか遅延読み込みが発動しなかった。さらにYouTube動画を止めることは全くできなかった。ブラウザの対応状況はどれも同じではないと聞くけれどもたぶん大きな違いはないかも知れない。 何れにしてもHTMLのloading-lazyによるブログの表示速度の高速化は非常に限定的だと分かったので、もはや元々の JavaScriptのIntersection Observer API を再び使って画面外の画像や動画を確実に止めてパフォーマンスをきっちり上げるためのプログラムへの書き換えを追加したくなった。 合格した監査｜PageSpeed Insights｜ Google …
ブログをサイトのパフォーマンスをチェックする Measure page quality にかけたらBest PracticesのUser ExperienceのServes images with low resolutionの警告が出たから何なのかと調べて修正した。 Serves images with low resolutionとは何か Best Practices｜Measure page quality 画像を低解像度で配信しているのが良くない。 画像の原寸法は表示サイズと画像を最大に明瞭化するピクセル比へ成形されなくてはならない。 原文 Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image cla…
Google Fonts で日本語のWebフォント（ Japanese ）が幾つも無料で提供されていて現在は正式版として相当に使い易くなっている。 Google Fontsの日本語フォント 種類が非常に多くて五十二件（2022年2月時点）から二十件のみ掲載する。 Noto Sans Japanese （ 適用 ） Noto Serif Japanese （ 適用 ） Shizuru （ 適用 ） M PLUS Rounded 1c （ 適用 ） Zen Kaku Gothic Antique （ 適用 ） Sawarabi Mincho （ 適用 ） Kosugi Maru （ 適用 ） Kaisei Decol （ 適用 ） Shippori Mincho （ 適用 ） Delta Gothic One （ 適用 ） Reggae One （ 適用 ） Kiwi Maru （ 適用 ） Murecho （ 適用 ） Yusei Magic （ 適用 ） Yuji Sy…
クラウドストレージの Dropbox はサイトで自由にコンテンツを表示できる直リンクのURLをあらゆるファイル形式で取得することができる。 Dropboxの共有リンクのURL 直リンクをURLを取得するには共有リンクが有効になってなくてはならない。 Ringtone｜ Dropbox ファイルのメニューの「リンクをコピー」から共有リンクを取得できる。 DropBoxの共有リンクのURLの例 https://www.dropbox.com/s/gmgraajvzjninyg/Ringtone-Original%2014.ogg?dl=0 ドメインの「www.dropbox.com」から共有リンクのコードとファイル名が半角スラッシュ（/）に区切られて続いて最後にパラメーターの「?dl=0」が付く。 アクセスするとDropboxのファイルのプレビューになる。 パラメーターの「d…
Firebase Storage、またはCloud Storage for Firebaseの CORSの構成 で、「ArgumentException: JSON CORS data could not be loaded from...」（引数の例外：JSONのCORSのデータが……からロードされなかった）というエラーが出て先へ進めなくなったけど、しかし解決策が見付かった。 どうしてArgumentException: JSON CORS data could not be loaded fromが出たか CORSの構成のJSONファイルの文字や空白などに問題があるらしい。 [ { "origin": ["*"], "method": ["GET"], …
Bloggerは非常に古いWebサービスのせいか、ブログのテンプレートのファイルがXMLだから独自タグによる基本構造を踏まえてHTMLで編集可能な場所を選んでも普通のマークアップではエラーになってサーバーに保存できなくなるかも知れない。 Woman climbing a ladder by Vinicius Altava / CC0 カスタマイズでhead内に WebフォントのGoogle Fonts をlinkタグで読み込む場合を例として起こり易いエラーと修正法を掲載する。 XMLファイルでありがちな三つのエラー HTML要素の終了タグがない HTML要素の属性の値がない 一部の予約語が含まれている BloggerでGoogle Fontsのlinkタグを使う場合は管理画面のHTML編集かバックアップと元に戻すでテンプレートのソースコードのhead内などに記載する…
Bloggerは 世界で最も利用者が多いと共に非常に古いブログサービス で、常に改良されるけれども機能的に無駄な部分が残されていて今最も悲しいのがウィジェット用JavaScriptの外部ファイルとソースコードなんだ。 それ自体が重いどころか多くの機能が一つになっていてそうした標準のプログラムが必要なウィジェットなどを使ってなくても全てのブログにサーバーから自動的に記載されている。 ブログの表示速度などのパフォーマンスを考えると止めるのが最善ながら幾つかの重要な機能が使えなくなるのが悩ましい。しかし後から読み込む方法が全くないわけではない。初回画面を遅らせないことはブログのパフォーマンスでは最も重要だと思う。 ウィジェット用JavaScriptの影響を受ける機能を使わなければ止めて構わないけれども必要な場合でも最初に止めておいて一部の機能で必要なときだけ読み込…