些細な日常

一般サイト向けの目次の自動生成のJavaScriptプログラムを公開してBloggerブログでも使えるので、どうすれば実装できるかを説明する。 JavaScriptでコンテンツの目次を自動生成して表示するプログラム どのような目次なのかやデザインや機能のカスタマイズについては一般サイト向けの記事を参考にして欲しい。 僕が提供するBlogger用のImaginaryテーマは サンプルブログの自動生成の目次のカスタマイズの記事 に専用のソースコードと実装方法を紹介している。 目次の自動生成のプログラムのソースコード ブログのテンプレートか投稿にscriptで、プログラムのソースコードを記載して使う。 /* Copyright: Nagahito Yuki 2023 | https://www.nagahitoyuki.com/2023/03/implement-a-…

Bloggerの投稿のURLはドメインと投稿の年と月とファイル名が半角スラッシュ（/）で区切られたものになる。 例えばドメインが「example.blogspot.com」、投稿の年が「2022」、月が「4」、ファイル名が「blog」ならば投稿のURLは（https://）「example.blogspot.com/2022/04/blog」（.html）になる。 投稿の月は一桁の場合のみ先に「0」が追加されて二桁に変更される。 ファイル名の生成 Bloggerの投稿のURLのファイル名は何もしないと投稿のタイトルの半角英数字が使われて半角英字の大文字は小文字に変更されて半角ハイフン（-）があれば使われて半角スペース（ ）があれば半角ハイフンに置き換えられる。 タイトルに半角英数字がない場合は自動的に「blog-post」、同日に既に他の投稿があれば末尾に半…

Bloggerの投稿画像を HTMLのloading-lazy で自動化するプログラムを紹介したけれども動作を詳しく調べた結果、AndroidのChromeで初回画面から2000pxくらい下の画面外の画像しか遅延読み込みが発動しなかった。さらにYouTube動画を止めることは全くできなかった。ブラウザの対応状況はどれも同じではないと聞くけれどもたぶん大きな違いはないかも知れない。 何れにしてもHTMLのloading-lazyによるブログの表示速度の高速化は非常に限定的だと分かったので、もはや元々の JavaScriptのIntersection Observer API を再び使って画面外の画像や動画を確実に止めてパフォーマンスをきっちり上げるためのプログラムへの書き換えを追加したくなった。 合格した監査｜PageSpeed Insights｜ Google …

Bloggerでのフォントの変更はテーマデザイナーかテンプレートのソースコードの編集で行う。何れも管理画面のテーマに入り、前者はカスタマイズ、後者はメニュー（▼）のHTMLを編集かバックアップと元に戻すで可能だ。 目次 ガジェットのフォントの変更 英数字のフォントのカスタマイズ CSSによるフォントの変更 ソースコードの指定先について Variableタグから変更する Webフォントを導入する ガジェットのフォントの変更 テーマデザイナー｜ Blogger Bloggerのテーマデザイナーの詳細設定でブログのガジェットのフォントを変えることができる。 テンプレートによって項目の種類や数は変わる。 公式テーマのContempoで変更可能なフォント ページのテキスト（個別に指定されない全て） ブログタイトル（ヘッダー） タブのテキスト（項目のみ） 投稿 投稿タイトルのフォント 投稿タイトル…

Bloggerは 世界で最も利用者が多いと共に非常に古いブログサービス で、常に改良されるけれども機能的に無駄な部分が残されていて今最も悲しいのがウィジェット用JavaScriptの外部ファイルとソースコードなんだ。 それ自体が重いどころか多くの機能が一つになっていてそうした標準のプログラムが必要なウィジェットなどを使ってなくても全てのブログにサーバーから自動的に記載されている。 ブログの表示速度などのパフォーマンスを考えると止めるのが最善ながら幾つかの重要な機能が使えなくなるのが悩ましい。しかし後から読み込む方法が全くないわけではない。初回画面を遅らせないことはブログのパフォーマンスでは最も重要だと思う。 ウィジェット用JavaScriptの影響を受ける機能を使わなければ止めて構わないけれども必要な場合でも最初に止めておいて一部の機能で必要なときだけ読み込…

Bloggerで取得した画像URLに 画像パラメーターのrwを追加する と画像データを軽量化したWebP画像に変換することができる。特にjpg／jpeg画像の場合に効果が大きいようだけれどもブログの画像の表示速度を高めることに繋がる。 記事／追加ページの投稿画像に画像パラメーターのrwを自動的に付けるプログラムを開発したので、無料で提供する。 JavaScriptで記事の本文の全ての表示を止めてから投稿画像に画像パラメーターを自動的に付けて出すことになる。便利だけど、その分、投稿画像を含めた記事の本文の全ての表示速度は遅れる、ほんの僅かだとしても投稿時に画像パラメーターを手動で付けておくよりも決して速くならないことに注意して欲しい。 そしてHTMLだけで記事の本文の全てを表示しないことはGoogle検索などの読み込みを劣らせるかも知れないので、 SEO（検索エ…

以前、取り上げた 画像の遅延読み込みのloading-lazy をBloggerの記事／追加ページの投稿画像に自動的に付けるJavaScriptプログラムを開発したので、無料で提供する。 画像のある記事／追加ページの本文を全てJavaScriptで止めてから書き出すことになるので、その分だけ表示速度が遅れる。そしてHTMLだけの場合と比べてGoogle検索などの読み取りが全く劣らないとはかぎらない。年々、向上して今では殆ど差がないといわれるから大丈夫かも知れないけれども念のために注意しておきたい。デザインは変わらず、表示速度が速くなる分は有利（画面外の画像が多いほどに遅延読み込みの効果が大きい）だとしてもGoogle検索などからサイト評価が上がって訪問者が増えるかどうかは分からないので、ブログのアクセスアップに SEO（検索エンジン最適化）対策を考える場合 …