ラベル(独自タグ)が付いた投稿を表示しています すべて表示

Bloggerでアナリティクスのソースコードをブログに記載する方法

イメージ

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

BloggerのHTML編集でエラーを起こさないための注意点

イメージ

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の記事/追加ページの投稿画像にWebPのrwを自動的に付けるプログラム

イメージ

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

Bloggerの記事/追加ページの投稿画像にloading-lazyを自動的に付けるプログラム

イメージ

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

BloggerのVariableタグのstringの内容と公式テーマの変数名

イメージ

Bloggerの独自タグのVariableのstringのtypeについてどのように使われるかの内容と公式テーマのソースコードでurlの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name/変数名(半角の英数字とピリオドのみ) description/説明(指定なし) type/種別(決められたもの) default/初期値(type毎に指定あり) value/現在値(type毎に指定あり) stringのtypeではvalue以外が省略できない必須項目となっている。 stringのマークアップ例 <Variable name="widget.title.text.transform" description="Widget Title Text Transform" ty…

BloggerのVariableタグのlengthの内容と公式テーマの変数名

イメージ

Bloggerの独自タグのVariableのlengthのtypeについてどのように使われるかの内容と公式テーマのソースコードでlengthの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name/変数名(半角の英数字とピリオドのみ) description/説明(指定なし) type/種別(決められたもの) default/初期値(type毎に指定あり) value/現在値(type毎に指定あり) lengthのvalue以外が省略できない必須項目となっている。 lengthのマークアップ例 <Variable name="body.background.height" description="Background height" type="length&qu…

BloggerのVariableタグのcolorの内容と公式テーマの変数名

イメージ

Bloggerの独自タグのVariableのcolorのtypeについてどのように使われるかの内容と公式テーマのソースコードでcolorの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name/変数名(半角の英数字とピリオドのみ) description/説明(指定なし) type/種別(決められたもの) default/初期値(type毎に指定あり) value/現在値(type毎に指定あり) colorのtypeではvalue以外が省略できない必須項目となっている。 colorのマークアップ例 <Variable name="body.text.color" description="Color" type="color" defaul…