些細な日常
Bloggerのテンプレートのヴァージョンは三つあり、それぞれに使い方が少し異なる。又、テンプレートのソースコードをHTML編集などから書き換える場合、Bloggerの独自タグであるウィジェットタグに互換性がないものもあるので、注意して使い分ける必要がある。 Bloggerのテンプレートヴァージョンの指定 テンプレートのhtmlタグに特定の属性を付けるか何も付けないことでヴァージョンが確定する。 ヴァージョン3 b:layoutsVersion='3' ヴァージョン2 b:version='2' ヴァージョン1 指定なし Bloggerのテンプレートのヴァージョンによって使用できるヴィジェットのヴァージョンが異なっている。 もう一つクラシックテーマ（第一世代）というのが管理画面のレイアウトのメニューから利用できるけれどもこれはテンプレートヴァージョンと無縁のもので、最初のもの…
Bloggerの管理画面のメニューの収益はサイト広告の アドセンスライセンスを持つ場合 はブログでの使用が設定できる。自動広告と広告ユニットと広告なしの三種類が用意されている。それぞれの広告コードの扱い方がどのように出るか出ないかで異なるから覚えておいて上手く使い分けられると良いと思う。 Bloggerの収益の自動広告はどうなっているか ブログのhead内にアドセンスの広告コードがサーバーから追加される 特徴的なのはブログのテンプレートのアドセンスの広告コードとは別にBloggerのサーバーから、直接、それが出力されて記載されることなんだ。 ということはブログのテンプレートのアドセンスの広告コードが出た場合には重複して無駄なマークアップを増やすことになってしまう。 実際は大した問題ではないし、一つの広告のために数多くの広告コードを記載しても、全部、同じならば、逐一、しっかり読み込むわけではなく、表示速…
Bloggerの投稿の作成ビューのメニューには🅰というフォントの項目があって様々なフォントを使うことができる。 Bloggerの投稿の作成ビューのフォントの使い方 使用可能なフォントには日本語も多く含まれていて非常に便利なんだ。 Bloggerの投稿の作成ビューのフォントの注意点 ところがフォントの項目の最初に表示される通常のもの以外、選択後にマイフォントに分類されるものは外部サイトのGoogle Fontsから読み込むようになっているために表示速度は比較的に遅くて事前に通常のフォントが現れたり、切り替えでレイアウトが動いたりする恐れがあることに注意したい。 マイフォントの表示速度を改善するカスタマイズ 幾らかは改善する方法もあってブログのソースコードの編集が必要になるから手間がかかるにせよ、外部サイトから読み込むフォントの表示の遅れに対しては非常に有効なんだ。 Bloggerの解除不能のマイフォン…
Bloggerでは管理画面の設定の「Google アナリティクスの測定 ID」からGoogleアナリティクスの測定ID（GoogleタグID）を保存するとアナリティクスのソースコードをブログのテンプレートに自動挿入して使用することができる。 グローバルタグという普通のアナリティクスのソースコードが自動挿入されるけれどもテンプレートのソースコードを書き換えることによって他のものにカスタマイズすることができる。 アナリティクスのソースコードを書き換える Bloggerのアナリティクスのソースコードは管理画面のテーマのカスタマイズの「HTML編集」か「バックアップ」と「復元」から書き換えてカスタマイズできる。 Bloggerのアナリティクスの独自タグ 公式テーマではHTMLのheadの閉じタグの直前か少し前にアナリティクスのソースコードを出力する独自タグが記載されていてその他の多くの非公式テーマでも同じ…
Bloggerのテンプレートは管理画面の「テーマ」のカスタマイズのテーマデザイナーからヘッダー画像を追加したり、コンテンツの文字の大きさや色を変更したり、デザインのCSSをを追加したりすることができる。 Bloggerのテーマデザイナーは利用者がブログのデザインのCSSを簡単に操作できるようにするためのツールなんだけれどもこれは最初から決められたものではなく、どの領域のどの要素を操作できるようにするかを管理画面の「テーマ」のカスタマイズのHTML編集からカスタマイズすることができる。 目次 Variableタグがテーマデザイナーを指定する Bloggerの七種類のVariableタグ Variableタグの基本的なマークアップの仕方 Variableタグのマークアップの必須事項 Variableタグとテーマデザイナーの対応関係 半透明の色を設定するときの注意点 旧ヴァージョンで使用可能なvariableタ…
Bloggerの人気の投稿ウィジェットは管理画面の投稿の記事欄や一部は統計情報で確認できる各記事の閲覧数／PV（Page View／ページビュー）に基づいて多い方から表示する記事を選んでいる。 しかし問題が一つあってBloggerが集計している記事の閲覧数は実際に人が来ただけのものではない。コンピューターのアクセスか何かも含まれていて人が誰も来なくても上がることがある。 最も分かり易い例としてTwitterにブログの記事のリンク付きの投稿を行うと直ぐにBloggerの記事の閲覧数が少し上がる。Twitterのアナリティクスで、リンクを押されたかどうかを確認すると一つもなくてまだ誰も来てないはずなのになぜか。たぶんTwitterのクローラーという リンク先のページを紹介するTwitterカード などの情報を読み取るためのコンピューターが来ているせいなんだ。 Bloggerが集計する記事の閲覧数に人以…
BloggerでGoogleやYahoo!などの検索エンジンにブログを表示させなくする検索避けの方法としてHTML編集でのmetaタグのrobotsのマークアップについて紹介する。 目次 検索避けにmetaタグのrobotsを使う利点 Bloggerで使われるページの種類 metaタグのrobotsのマークアップの仕方 ブログのテンプレートの記載場所 検索避けを行うページの振り分け 検索避けにmetaタグのrobotsを使う利点 Bloggerの検索避けの方法はmetaタグのrobotsの他にもう一つあって カスタムロボットヘッダータグ を使うことができる。これは管理画面の設定や編集画面の投稿の設定からスイッチを入れるだけだから簡単だけれども不利な点が一つだけあって別々の種類のページが幾つか混ざってしまっている。なのでページの種類を細かく分けて検索避けをかけるにはmetaタグのrobotsを使わなくてはなら…
Bloggerは管理画面の「Google アナリティクス プロパティ ID」からアナリティクスで設定済みのIDだけ入力すれば対応するテンプレートでアナリティクスを使うことができる。 便利だけど、ところが来年の7月1日からアナリティクスの従来のUAで始まるIDのユニバーサルアナリティクスのデータが止まってしまうので、次のGで始まるIDのGoogleアナリティクス4／GA4を新しく登録しなくてはならない。 参考サイト ユニバーサル アナリティクスのサポートは終了します Bloggerの管理画面の「Google アナリティクス プロパティ ID」から登録できなくて暫く様子を見ても変わらないので、カスタマイズでアナリティクスのソースコードをブログに記載する方法について取り上げることにする。 後からGA4に対応されたら基本的に必要なくなるけど、しかしアナリティクスのソースコードを自分で加工したものを使いたい…
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内などに記載することになる。 <head>…
Bloggerで取得した画像URLに 画像パラメーターのrwを追加する と画像データを軽量化したWebP画像に変換することができる。特にjpg／jpeg画像の場合に効果が大きいようだけれどもブログの画像の表示速度を高めることに繋がる。 記事／追加ページの投稿画像に画像パラメーターのrwを自動的に付けるプログラムを開発したので、無料で提供する。 追記：2023年9月から 投稿のWebP画像の提供がBloggerの設定から可能になった ので、本稿のプログラムは その他のキャッシュ期限のe#などを追加する とか デバイス毎のレスポンシブ配信を追加する なんて機能が必要なときに使うことを勧める。 JavaScriptで記事の本文の全ての表示を止めてから投稿画像に画像パラメーターを自動的に付けて出すことになる。便利だけど、その分、投稿画像を含めた記事の本文の全ての表示速度は遅れる、ほんの僅かだとしても投稿時に画像パラメ…
