些細な日常
一般サイト向けの目次の自動生成のJavaScriptプログラムを公開してBloggerブログでも使えるので、どうすれば実装できるかを説明する。 JavaScriptでコンテンツの目次を自動生成して表示するプログラム どのような目次なのかやデザインや機能のカスタマイズについては一般サイト向けの記事を参考にして欲しい。 僕が提供するBlogger用のImaginaryテーマは サンプルブログの自動生成の目次のカスタマイズの記事 に専用のソースコードと実装方法を紹介している。 目次の自動生成のプログラムのソースコード ブログのテンプレートか投稿にscriptで、プログラムのソースコードを記載して使う。 /* Copyright: Nagahito Yuki 2023 | https://www.nagahitoyuki.com/2023/03/implement-a-…
Bloggerの人気の投稿ウィジェットは管理画面の投稿の記事欄や一部は統計情報で確認できる各記事の閲覧数／PV（Page View／ページビュー）に基づいて多い方から表示する記事を選んでいる。 しかし問題が一つあってBloggerが集計している記事の閲覧数は実際に人が来ただけのものではない。コンピューターのアクセスか何かも含まれていて人が誰も来なくても上がることがある。 最も分かり易い例としてTwitterにブログの記事のリンク付きの投稿を行うと直ぐにBloggerの記事の閲覧数が少し上がる。Twitterのアナリティクスで、リンクを押されたかとうかを確認すると一つもなくてまだ誰も来てないはずなのになぜか。たぶんTwitterのクローラーという リンク先のページを紹介するTwitterカード などの情報を読み取るためのコンピューターが来ているせいなんだ。 B…
BloggerでGoogleやYahoo!などの検索エンジンにブログを表示させなくする検索避けの方法としてHTML編集でのmetaタグのrobotsのマークアップについて紹介する。 目次 検索避けにmetaタグのrobotsを使う利点 Bloggerで使われるページの種類 metaタグのrobotsのマークアップの仕方 ブログのテンプレートの記載場所 検索避けを行うページの振り分け 検索避けにmetaタグのrobotsを使う利点 Robot by Janson_G / Pixabay Bloggerの検索避けの方法はmetaタグのrobotsの他にもう一つあって カスタムロボットヘッダータグ を使うことができる。これは管理画面の設定や編集画面の投稿の設定からスイッチを入れるだけだから簡単だけれども不利な点が一つだけあって別々の種類のページが幾つか混ざってしまっている。な…
Bloggerの管理画面の設定の「クローラとインデックス」にカスタムロボットヘッダータグのスイッチが付いている。 クローラとインデックス｜Blogger カスタムロボットヘッダータグとはGoogleやYahoo!などの検索エンジンのブログの扱いを検索避けを中心とした様々な仕方で、制御する方法の一つで、一般的にX-Robots-Tagと呼ばれるものと同じだ。 X-Robots-Tag は、指定した URL に対する HTTP ヘッダー応答の要素として使用できます。robots メタタグで使用できるディレクティブは、すべて X-Robots-Tag として指定することもできます。ページをインデックスに登録しないようクローラに指示する X-Robots-Tag を含む HTTP 応答の例を次に示します。 X-Robots-Tag HTTP ヘッダーの使用｜ Goo…
ブログランキングなどで登録したブログの更新を伝えてサイト内容を取得できるようにするために使われるping送信がある。ブログの更新に合わせてping送信を行う機能が付いていれば良いんだけれども付いてない場合はできない。 例えばブログサービスのBloggerにはping送信の機能が付いてないためにping送信を記事の取得に活用する にほんブログ村 や 人気ブログランキング などに登録してもブログの更新を手動で伝えなくてはそうしたランキングサイトでの記事の表示内容を変えることはできない。 しかしWebサービスの IFTTT を使えはブログのRSSフィードなどから更新に合わせてping送信を自動的に行えると分かったので、とうやるかを載せておきたい。 IFTTTでのping送信の自動化の手順 IFTTT（イフト／IF This Then That: これならばそこでそれを）はサ…
Bloggerブログはトップページに表示するスニペットの数は管理画面のメニューから決めることができる。 レイアウト ブログの投稿 メインページに表示する投稿数 設定 投稿 メインペーに掲載する投稿数の上限 ※メインページはブログのトップページ。 二ヵ所から決めることができてどちらも同じで、片方を変更するともう片方が自動的に揃うようになっている。 しかしブログのトップページに実際に表示されるスニペットの数が決めたよりも減ってしまうことがあり、正常に動作せず、不具合が生じたような結果になると分かっているから予め注意して決めなくてはならない。 トップページのスニペットの数が減る二つの原因 元の記事の画像数が非常に多い場合 元の記事の文字数が非常に多い場合 Bloggerブログのトップページに表示するスニペットが取られる元の記事の合計の画像数か文字数が一定の分量を越えるとその時点で…
Bloggerは管理画面の「Google アナリティクス プロパティ ID」からアナリティクスで設定済みのIDだけ入力すれば対応するテンプレートでアナリティクスを使うことができる。 便利だけど、ところが来年の7月1日からアナリティクスの従来のUAで始まるIDのユニバーサルアナリティクスのデータが止まってしまうので、次のGで始まるIDのGoogleアナリティクス4／GA4を新しく登録しなくてはならない。 参考サイト ユニバーサル アナリティクスのサポートは終了します Bloggerの管理画面の「Google アナリティクス プロパティ ID」から登録できなくて暫く様子を見ても変わらないので、カスタマイズでアナリティクスのソースコードをブログに記載する方法について取り上げることにする。 後からGA4に対応されたら基本的に必要なくなるけど、しかしアナリティクスのソ…
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は非常に古い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内などに記…