些細な日常
僕が提供する Blogger用テンプレートのImaginary への質問で、デザインが壊れて何とかして欲しいというのがあって原因の一つにブラウザがある。サイト作成のHTMLやCSSやJavaScriptのコードの一部に未対応だったり、場合によってアップデートでバグが起きて急に反映しなくなったりもする。 ブラウザの問題はいつか対応して来ると期待されるかぎり、待つしかないけれども、その間、テンプレートが壊れているのはどうにも耐えられないとなるとコードを変えるか多少の違和感ならばブラウザを除外してやり過ごせる。 今回、JavaScriptで訪問者のブラウザをOSと共にデバイス毎に判別して一部のコードを除外する方法を調べたので、纏めておきたい。 JavaScriptでブラウザとOSを判別する JavaScriptでブラウザが何かを取得する方法としてユーザーエージェント…
一般サイト向けの目次の自動生成のJavaScriptプログラムを公開してBloggerブログでも使えるので、どうすれば実装できるかを説明する。 JavaScriptでコンテンツの目次を自動生成して表示するプログラム どのような目次なのかやデザインや機能のカスタマイズについては一般サイト向けの記事を参考にして欲しい。 僕が提供するBlogger用のImaginaryテーマは サンプルブログの自動生成の目次のカスタマイズの記事 に専用のソースコードと実装方法を紹介している。 目次の自動生成のプログラムのソースコード ブログのテンプレートか投稿にscriptで、プログラムのソースコードを記載して使う。 /* Copyright: Nagahito Yuki 2023 | https://www.nagahitoyuki.com/2023/03/implement-a-…
Imaginaryに ブログの目次を表示するカスタマイズ を紹介したけど、使用したJavaScriptのコンテンツの目次の自動生成のプログラムはBloggerの他のテーマを含めて他の全てのサイトで使うことができるので、もはや著者名を付けるだけで誰でも無料で使えるように提供しようと思った。 目次の自動生成のプログラムの特徴 コンテンツのHTMLの見出しタグの良く使われるh2からh4までを取り込んで順序付きリストタグのolとliに見出しへのジャンプリンクを入れて階層的に仕立てた目次を最初の見出しタグの直前に挿入する。 目次のジャンプリンクを得るために見出しのidを新しく付けているので、もしも既存のidを、そのまま、使いたい場合は ソースコードのカスタマイズ を行うと上書きを避けることができる。 目次の見出しのリストは開閉メニューのdetailsで、表題と開閉ボタンを付…
サイトのHTMLに最初から記載されてないコンテンツを後からJavaScriptで挿入するとそのときにページが新しいスペースを取られて動いてしまう。初回画面だと既存のコンテンツが押し下げられるのが、一瞬、見えたりもするけど、これがサイトのCLS（Cumulative Layout Shift／累積的な配置の変動）を上げて使い難くなる。 指標｜PageSpeed Insights｜ Google Developers 良くあるのが押そうとしたボタンがサイトの読み込み中に動いて押せなくなってしまうことだ。 訪問者に良い印象を与えないのはもちろんだけど、さらにGoogleのサイトの検索状況のSearch Consoleや性能計測のPageSpeed Insightsでも警告が出されるので、 検索エンジンからアクセスアップを望む 上でもCLSの上昇に注意しなくてはならな…
Googleが モバイルファーストインデックス を導入してスマホでのサイト評価を最優先するようになって久しい。サイトがモバイルに対応しているかどうかはGoogleが提供している モバイルフレンドリーテスト で分かるけれどもSearch Consoleではサイト解析からエラーのページがあれば自動的に表示される。 現在の SEO対策（検索エンジン最適化） で、下地となるのがモバイルユーザビリティだから是非とも注意しておきたいにも拘わらず、ブログでエラーが出てしまって改善しなくてはならなくなった。 画像がモバイルユーザビリティのエラーを引き起こす原因 モバイルユーザビリティ｜Search Console｜ Google 僕はSearch Consoleでモバイルユーザビリティの二つの項目を指摘された。 テキストが小さすぎて読めません クリック可能な要素同士が近すぎます ブログのスマ…
ブログの知識と教養と雑学の記事（ 前半 ・ 後半 ）で使用したクイズ形式の選択ボタンのJavaScriptによるプログラムを提供する。HTML編集が可能で、scriptタグが反映するサイトならば同じような選択ボタンのコンテンツを作成して使用できる。 選択ボタンの基本的なプログラム サンプルのソースコード 日本の首都はどこか。 北海道 東京都 福岡県 リセット ※どれかを押すと正解が緑に、誤解が赤に変わって表示される。 HTML <p>日本の首都はどこか。</p> <ol class="selection"> <li>北海道</li> <li class="correct">東京都</li> <li>福岡県</li> </o…
Bloggerの投稿画像を HTMLのloading-lazy で自動化するプログラムを紹介したけれども動作を詳しく調べた結果、AndroidのChromeで初回画面から2000pxくらい下の画面外の画像しか遅延読み込みが発動しなかった。さらにYouTube動画を止めることは全くできなかった。ブラウザの対応状況はどれも同じではないと聞くけれどもたぶん大きな違いはないかも知れない。 何れにしてもHTMLのloading-lazyによるブログの表示速度の高速化は非常に限定的だと分かったので、もはや元々の JavaScriptのIntersection Observer API を再び使って画面外の画像や動画を確実に止めてパフォーマンスをきっちり上げるためのプログラムへの書き換えを追加したくなった。 合格した監査｜PageSpeed Insights｜ Google …
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…
Bloggerは非常に古いWebサービスのせいか、ブログのテンプレートのファイルがXMLだから独自タグによる基本構造を踏まえてHTMLで編集可能な場所を選んでも普通のマークアップではエラーになってサーバーに保存できなくなるかも知れない。 Woman climbing a ladder by Vinicius Altava / Pexels カスタマイズでhead内に WebフォントのGoogle Fonts をlinkタグで読み込む場合を例として起こり易いエラーと修正法を掲載する。 XMLファイルでありがちな三つのエラー HTML要素の終了タグがない HTML要素の属性の値がない 一部の予約語が含まれている BloggerでGoogle Fontsのlinkタグを使う場合は管理画面のHTML編集かバックアップと元に戻すでテンプレートのソースコードのhead内などに記…
Bloggerは 世界で最も利用者が多いと共に非常に古いブログサービス で、常に改良されるけれども機能的に無駄な部分が残されていて今最も悲しいのがウィジェット用JavaScriptの外部ファイルとソースコードなんだ。 それ自体が重いどころか多くの機能が一つになっていてそうした標準のプログラムが必要なウィジェットなどを使ってなくても全てのブログにサーバーから自動的に記載されている。 ブログの表示速度などのパフォーマンスを考えると止めるのが最善ながら幾つかの重要な機能が使えなくなるのが悩ましい。しかし後から読み込む方法が全くないわけではない。初回画面を遅らせないことはブログのパフォーマンスでは最も重要だと思う。 ウィジェット用JavaScriptの影響を受ける機能を使わなければ止めて構わないけれども必要な場合でも最初に止めておいて一部の機能で必要なときだけ読み込…