些細な日常

Bloggerはブログとして使われるのが普通なんだけれどもテンプレートのカスタマイズによってトップページを固定表示すればホームページ（汎用的なウェブサイト）のようなデザインに作り変えることができる。 些細な日常に取り入れたので、どんな感じかは トップスページ から確認できる。 テキストウィジェットをメインカラムの先頭に挿入して記事／追加ページと同じように表示して通常のスニペットによる個々の記事のリンクを並べるデザインは止めた。 目次 Bloggerをホームページとして使う利点 ブログをメインコンテンツにしないで運営できる 検索エンジンからのアクセスアップを期待できる Bloggerのトップページのカスタマイズ テキストウィジェットを追加する ホームページのデザインを追加する 不要なスニペットを非表示にする Bloggerをホームページとして使う利点 Bloggerをホームページとして使えると利点としてブログをメイン…

以前からブログの文字サイズが大きくなってからCSSの指定通りのものになるという奇妙なことが良く起きていた。ブラウザはAndroidのChromeで、はっきり覚えてないけれども他のブラウザではなかったかも知れず、あるいはAndroidのChromeで他のサイトではなかったかも知れない。僕が 使用している自作のBlogger用テンプレートのImaginary では全て必ず文字サイズが時間差で正しく表示されることになっていて不快だった。 AndroidのChromeのバグなのかと思ってアップデートで直ることを期待しながらもはや、数年以上、経った。問題が全く起きなくなった時期もあったと思うけど、しかし最近は本当に酷くなって文字サイズが大きくなったまま、CSSの指定通りのものに変わらないことまで起こるようになって来たので、何とかしなくては行けないとついに対処法を考えることにした。 ブラウザの文字サイズ自動…

Bloggerのテンプレートのヴァージョンは三つあり、それぞれに使い方が少し異なる。又、テンプレートのソースコードをHTML編集などから書き換える場合、Bloggerの独自タグであるウィジェットタグに互換性がないものもあるので、注意して使い分ける必要がある。 Bloggerのテンプレートヴァージョンの指定 テンプレートのhtmlタグに特定の属性を付けるか何も付けないことでヴァージョンが確定する。 ヴァージョン3 b:layoutsVersion='3' ヴァージョン2 b:version='2' ヴァージョン1 指定なし Bloggerのテンプレートのヴァージョンによって使用できるヴィジェットのヴァージョンが異なっている。 もう一つクラシックテーマ（第一世代）というのが管理画面のレイアウトのメニューから利用できるけれどもこれはテンプレートヴァージョンと無縁のもので、最初のもの…

Bloggerの管理画面のメニューの収益はサイト広告の アドセンスライセンスを持つ場合 はブログでの使用が設定できる。自動広告と広告ユニットと広告なしの三種類が用意されている。それぞれの広告コードの扱い方がどのように出るか出ないかで異なるから覚えておいて上手く使い分けられると良いと思う。 Bloggerの収益の自動広告はどうなっているか ブログのhead内にアドセンスの広告コードがサーバーから追加される 特徴的なのはブログのテンプレートのアドセンスの広告コードとは別にBloggerのサーバーから、直接、それが出力されて記載されることなんだ。 ということはブログのテンプレートのアドセンスの広告コードが出た場合には重複して無駄なマークアップを増やすことになってしまう。 実際は大した問題ではないし、一つの広告のために数多くの広告コードを記載しても、全部、同じならば、逐一、しっかり読み込むわけではなく、表示速…

Bloggerブログのテンプレートはそれ自体のソースコードだけではなく、最終的にBloggerの一般的なソースコードが追加されて表示されている。それはブログのテンプレートのXMLファイルを見ても分からず、実際に表示されたブログのソースコードを見て初めて分かるものなんだ。 主にheadとbodyの閉じタグを発端にして行われ、ブログで使われるガジェットに必要なものが含まれているけど、しかしブログで使わないものもあると無駄なソースコードでしかなく、表示速度を下げるなどのパフォーマンスに支障を来すだけだから何とかしたくなる。 調べると無効化する方法が出回っていて皆に使われているので、纏めておきたいと思う。 Bloggerのテンプレートのソースコードは管理画面のテーマのメニュー（カスタマイズの▼）のhtmlを編集かパックアッブと復元から書き換えることができる。 目次 htmlタグの属性のカスタマイズによる無…

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

BloggerでGoogleやYahoo!などの検索エンジンにブログを表示させなくする検索避けの方法としてHTML編集でのmetaタグのrobotsのマークアップについて紹介する。 目次 検索避けにmetaタグのrobotsを使う利点 Bloggerで使われるページの種類 metaタグのrobotsのマークアップの仕方 ブログのテンプレートの記載場所 検索避けを行うページの振り分け 検索避けにmetaタグのrobotsを使う利点 Bloggerの検索避けの方法はmetaタグのrobotsの他にもう一つあって カスタムロボットヘッダータグ を使うことができる。これは管理画面の設定や編集画面の投稿の設定からスイッチを入れるだけだから簡単だけれども不利な点が一つだけあって別々の種類のページが幾つか混ざってしまっている。なのでページの種類を細かく分けて検索避けをかけるにはmetaタグのrobotsを使わなくてはなら…

Bloggerブログはトップページに表示するスニペットの数は管理画面のメニューから決めることができる。 レイアウト ブログの投稿 メインページに表示する投稿数 設定 投稿 メインペーに掲載する投稿数の上限 ※メインページはブログのトップページ。 二ヵ所から決めることができてどちらも同じで、片方を変更するともう片方が自動的に揃うようになっている。 しかしブログのトップページに実際に表示されるスニペットの数が決めたよりも減ってしまうことがあり、正常に動作せず、不具合が生じたような結果になると分かっているから予め注意して決めなくてはならない。 トップページのスニペットの数が減る二つの原因 元の記事の画像数が非常に多い場合 元の記事の文字数が非常に多い場合 Bloggerブログのトップページに表示するスニペットが取られる元の記事の合計の画像数か文字数が一定の分量を越えるとその時点で実際にスニペットを表示する動作が止まるた…

Bloggerは管理画面の「Google アナリティクス プロパティ ID」からアナリティクスで設定済みのIDだけ入力すれば対応するテンプレートでアナリティクスを使うことができる。 便利だけど、ところが来年の7月1日からアナリティクスの従来のUAで始まるIDのユニバーサルアナリティクスのデータが止まってしまうので、次のGで始まるIDのGoogleアナリティクス4／GA4を新しく登録しなくてはならない。 参考サイト ユニバーサル アナリティクスのサポートは終了します Bloggerの管理画面の「Google アナリティクス プロパティ ID」から登録できなくて暫く様子を見ても変わらないので、カスタマイズでアナリティクスのソースコードをブログに記載する方法について取り上げることにする。 後からGA4に対応されたら基本的に必要なくなるけど、しかしアナリティクスのソースコードを自分で加工したものを使いたい…

Bloggerで取得した画像URLに 画像パラメーターのrwを追加する と画像データを軽量化したWebP画像に変換することができる。特にjpg／jpeg画像の場合に効果が大きいようだけれどもブログの画像の表示速度を高めることに繋がる。 記事／追加ページの投稿画像に画像パラメーターのrwを自動的に付けるプログラムを開発したので、無料で提供する。 追記：2023年9月から 投稿のWebP画像の提供がBloggerの設定から可能になった ので、本稿のプログラムは その他のキャッシュ期限のe#などを追加する とか デバイス毎のレスポンシブ配信を追加する なんて機能が必要なときに使うことを勧める。 JavaScriptで記事の本文の全ての表示を止めてから投稿画像に画像パラメーターを自動的に付けて出すことになる。便利だけど、その分、投稿画像を含めた記事の本文の全ての表示速度は遅れる、ほんの僅かだとしても投稿時に画像パラメ…

以前、取り上げた 画像の遅延読み込みのloading-lazy をBloggerの記事／追加ページの投稿画像に自動的に付けるJavaScriptプログラムを開発したので、無料で提供する。 追記：2023年9月から 投稿画像のloading-lazyによる遅延読み込みがBloggerの設定から可能になった ので、本稿のプログラムは YouTube動画にもloading-lazyを付ける とか 初回画面の画像のloading-lazyを除外してdecoding-asyncを付ける なんて機能が必要なときに使うことを勧める。 画像のある記事／追加ページの本文を全てJavaScriptで止めてから書き出すことになるので、その分だけ表示速度が遅れる。そしてHTMLだけの場合と比べてGoogle検索などの読み取りが全く劣らないとはかぎらない。年々、向上して今では殆ど差がないといわれるから大丈夫かも知れないけれども念のた…