Blogger:404ページを判定する方法 - テンプレートのHTML編

イントロダクション

Google のブログサービス「Blogger」にて、現在表示しているページが 404 ページなのかどうかを判定したいことがあります。

そのときには、テンプレートの HTML のレイアウトデータタグで判定する方法があります。

Blogger:モバイル表示を初めてカスタマイズする場合、モバイルテンプレートのプレビューを確認しながら作業すると便利

イントロダクション

Google のブログサービス「Blogger」では、PCで表示した場合と、モバイル端末で表示した場合とで、表示を変えることができます。

Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの
http://upa-pc.blogspot.com/2015/05/blogger-mobile-template-customize.html
Dr.ウーパのコンピュータ備忘録

さて、今までずっとモバイルテンプレートとしてデフォルトを使ってきた場合には、いきなりカスタム設定にするのは危ないかもしれません。

なぜならば、モバイルテンプレートとしてデフォルト設定を使ってきた場合には、いままでブログの PC 表示に行ってきたカスタマイズがほとんど反映されていないからです。

そのため、モバイルテンプレートをデフォルト設定からカスタム設定に変更する場合には、モバイル表示にて意図せぬ表示（文字が大きすぎる、要素が重なってしまう等）が行われる可能性があります。


そこで、初めてモバイル表示をカスタム設定にする場合には、モバイルテンプレートのプレビューを表示させた状態で、修正作業を実施すると便利です。

Blogger:PC表示/モバイル表示を、JavaScriptにて取得する方法 - BloggerのテンプレートのHTML方式

イントロダクション

Google のブログサービス「Blogger」では、PCで表示した場合と、モバイル端末で表示した場合とで、表示を変えることができます。

Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの
http://upa-pc.blogspot.com/2015/05/blogger-mobile-template-customize.html
Dr.ウーパのコンピュータ備忘録

さて、今現在 Blogger ブログが、PC表示をされているのか、モバイル表示をされているのか、JavaScript として取得したい場合があります。

その時には、次の方法が考えられます。

(1) URL のクエリパラメータを見て、PC表示/モバイル表示を判別
現在表示している Blogger ブログの URL のクエリパラメータに、m パラメータが付与されているかどうかでPC表示/モバイル表示をチェックします。

m=1：モバイル表示
m=0：モバイル表示から、PC表示へ切り替えて表示
mパラメータなし：PC表示

BloggerのPC/モバイル表示の切り替え管理方法が興味深い！
http://upa-pc.blogspot.com/2015/01/blogger-mobile-page-to-pc-page.html
Dr.ウーパのコンピュータ備忘録

Bloggerユーザなら知っておきたい、BloggerブログのURL構成まとめ
http://upa-pc.blogspot.com/2015/02/blogger-url-summary.html
Dr.ウーパのコンピュータ備忘録

(2) Blogger のテンプレートの HTML のタグを使用して、PC表示/モバイル表示を判別

Blogger のテンプレートの HTML 内でのみ効果を発揮するタグを使って、PC表示/モバイル表示をチェックします。

今回は、(2) の「Blogger のテンプレートの HTML のタグを使用して、PC表示/モバイル表示を判別」の方法について記載します。

Blogger:モバイルテンプレートをカスタマイズしたときに発生した問題とその対処

イントロダクション

Google のブログサービス「Blogger」では、スマートフォンなどのモバイル端末で表示した時のブログデザインを好きにカスタマイズすることができます。

Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの

http://upa-pc.blogspot.com/2015/05/blogger-mobile-template-customize.html

Dr.ウーパのコンピュータ備忘録

これまで、このブログのモバイル表示では、デフォルトのカスタマイズしていないデザインを使用してきました。今回、デフォルトの表示を止め、カスタマイズしたデザインに変更してみました。

その結果、いくつかの問題点が見えてきました。
その問題点と対処方法について、記載します。


なお、モバイル端末で表示した時のブログデザインをカスタマイズせず、デフォルトのままにすることも可能です。

Blogger の場合、デフォルトのデザインであっても、たいていの場合モバイル対応された見やすいデザインになっています。

そのため、ブログのデザインに手間をとられたくない場合や、各種設定の複雑化を回避する上で、あえてデフォルト設定のままにするという選択肢もあります。

Blogger:モバイル版でのみ表示するように設定したガジェットは、レイアウト画面に表示されないようです

イントロダクション

Google のブログサービス「Blogger」では、パソコンで見た時の表示と、モバイル端末で見た時の表示を変えることができます。

Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの

http://upa-pc.blogspot.com/2015/05/blogger-mobile-template-customize.html

Dr.ウーパのコンピュータ備忘録

その１つに、ガジェットの表示/非表示を、PC版の表示とモバイル版の表示とで分ける方法があります。

さて、実際にガジェットをモバイル版でのみ表示するように設定した結果、気が付いたことがあります。

Blogger:モバイル版の表示にて、ブログアーカイブが正常に動作しない(2) - 原因を探る

イントロダクション

Google のブログサービス「Blogger」にて、モバイル版の表示にて、ブログアーカイブが正常に動作しないという現象に遭遇しました。

Blogger:モバイル版の表示にて、ブログアーカイブが正常に動作しない
http://upa-pc.blogspot.com/2015/05/blogger-mobile-blog-archive-trouble.html


その原因について、少し調べてみました。

Blogger:モバイル版の表示にて、ブログアーカイブが正常に動作しない

イントロダクション

Google のブログサービス「Blogger」では、パソコン版の表示（以下、PCテンプレート）にて表示させているガジェットを、モバイル版の表示（以下、モバイルテンプレート）でも表示させることができます。

Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの
http://upa-pc.blogspot.com/2015/05/blogger-mobile-template-customize.html
Dr.ウーパのコンピュータ備忘録

さて、Blogger のブログアーカイブガジェットを、モバイル版でも表示できるようにしてみたのですが、そのときにブログアーカイブガジェットがうまく動作しない現象に遭遇しました。

その現象について、ここに記録します。

Blogger:レイアウトを変更して保存しようとすると「エラーが発生しました。ページを更新して、もう一度試してください。」と表示され、レイアウトが変更できなくなったときの対処法

イントロダクション

Google のブログサービス「Blogger」にて、テンプレートの HTML の編集を行い、モバイルテンプレートをカスタマイズしていました。

Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの
http://upa-pc.blogspot.com/2015/05/blogger-mobile-template-customize.html
Dr.ウーパのコンピュータ備忘録

その後、レイアウトの設定画面にて新しいガジェットを追加し、配置したい場所へ移動した後にレイアウトを保存してみると、エラーが発生するようになっていました。


そのときの現象と、私が行った対処方法を記載します。

Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの

イントロダクション

Google のブログサービス「Blogger」では、ブログの見栄え（デザイン）をパソコンで表示した時のもの）と、スマートフォンなどのモバイル端末で表示した時のものとで、分けることが可能です。

Blogger:モバイル表示のデザインがカスタマイズできない？そんなときは、モバイルテンプレートがカスタムになっているか確認しましょう！
http://upa-pc.blogspot.com/2015/04/blogger-mobile-template-customize.html
Dr.ウーパのコンピュータ備忘録

PC版の表示とモバイル版の表示とで、表示させる要素を制御するには、Blogger のテンプレートの HTML を編集する必要があります。


今回は、モバイル版のブログ表示をカスタマイズする上で、私が良く使っているものについて記載します。

Blogger:モバイル表示のデザインがカスタマイズできない？そんなときは、モバイルテンプレートがカスタムになっているか確認しましょう！

イントロダクション

Google のブログサービス「Blogger」では、ブログのデザインをいろいろな方法でカスタマイズできます。

例えば、

• 任意のガジェットを追加して機能を追加すること
• デザインをCSSで変更すること
• Blogger のテンプレートを書き換えて究極的にカスタマイズする

などの方法があります。


その時に注意しなければならない点として、ブラウザで見た時とモバイル端末で見たときの見え方の違いです。


これは、Blogger ブログへの記事の投稿や設定変更などを、パソコンや比較的大きなタブレット端末などで行っていると見落としがちになる点です。

スマートフォンなどのモバイル端末でブログを見ると、それらとは異なり、モバイル端末用の表示が行われます。（デフォルトの設定の場合）

このモバイル用の表示は、画面の小さなモバイル端末でもブログが見やすくなるようになっています。

Blogger:テンプレートとして動的ビューを使用している場合には、投稿フィードのフッターに注意 - ブログの側にも反映されます

イントロダクション

Google のブログサービス「Blogger」では、ブログの見栄えを、テンプレートの中から選択することができます。
（なお、それ以上に頑張れば、極限までカスタマイズ可能です。）

Blogger のテンプレートとして、
動的ビューを適用した Blogger ブログ

さて、前回、Blogger のテンプレートとして動的ビューを適用した場合には、そのコンテンツは動的に Feed から取得されているということを調査しました。

Blogger:動的ビューはどのようにコンテンツを取得して、表示しているのか？
http://upa-pc.blogspot.com/2015/04/blogger-view-content.html
Dr.ウーパのコンピュータ備忘録

そのため、Blogger のテンプレートとして動的ビューを適用している場合には、注意が必要なことがあります。

それは、投稿フィードのフッターに記載されている内容が、Feed を読むための RSS リーダだけではなく、ブログの記事一覧にも表示されるという点です。

Blogger:動的ビューはどのようにコンテンツを取得して、表示しているのか？

イントロダクション

Google のブログサービス「Blogger」では、ブログの見え方について、標準のデザインがいくつかあります。

大きな枠組みとして、

• シンプル
• 動的ビュー
• 画像ウィンドウ
• Awesome Inc.
• ウォーターマーク
• エスィリアル
• 旅行

があります。
（その他、クラシックテンプレートがありますが、古いものなのでここでは除外して考えます。）

それらは基本的には同じような構造をしているのですが、動的ビューだけ、大幅に構造が異なっています。

Blogger のテンプレートとして、
動的ビューを適用した Blogger ブログ

動的ビュー以外の Blogger のテンプレートでは、コンテンツ（ブログの本文等）は HTML に静的に埋め込まれています。

しかし、動的ビューの場合には、コンテンツ（ブログの本文等）は HTML に埋め込まれていません。


どうやってコンテンツを取得して、表示しているのでしょうか？
調べてみました。

Blogger:投稿のサムネイルのURLが無い場合には、デフォルトの画像を表示 - レイアウト データ編

イントロダクション

「Blogger:投稿のサムネイルのURLを取得する - レイアウト データ編」では、Blogger のテンプレートの HTMLでのみ使用できるレイアウトデータを使用して、投稿のサムネイルのURLを取得する方法について解説しました。

今回は、レイアウトデータを使用して、投稿のサムネイルのURLを取得したときに、サムネイルが無かった場合には、デフォルトの画像を表示する方法について記載します。

Blogger:投稿のサムネイルのURLを取得する - レイアウト データ編

イントロダクション

Google のブログサービス「Blogger」では、Blogger のテンプレートの HTML を編集することで、自由にブログのデザインを変更できます。

Bloggerユーザ必見！テンプレートのHTMLを編集するときに参考になる公式ページリスト
http://upa-pc.blogspot.com/2014/06/blogger-html-edit-ref.html
Dr.ウーパのコンピュータ備忘録

今回は、Blogger のテンプレートの HTMLでのみ使用できるレイアウトデータを使用して、投稿のサムネイルのURLを取得してみます。

Blogger:投稿のフッターを投稿ページのみ表示するようにする

イントロダクション

Google のブログサービス「Blogger」では、テンプレートの HTML を編集することで、ブログを様々な形へカスタマイズすることが可能になります。


今回は、投稿の下部に表示されているフッター部分を、投稿ページのみ表示するようにしてみましょう。

Blogger:BloggerのテンプレートのHTMLを編集するときに気を付けること

イントロダクション

Google のブログサービス「Blogger」では、ブログを形作るテンプレートの HTML に手を加えることで、他のブログサービスでは実現できないような自由な表現が可能になります。

さて、そのような Blogger のテンプレートの HTML ですが、一歩編集を間違えると、Blogger からエラーメッセージを通知されたり、ブログそのものが表示不能に陥ったりします。

そのため、Blogger のテンプレートの HTML を変更する際には、十分に注意して変更を行う必要があります。


しかし、人は必ずミスを犯すものです。
100% 間違えないなどというおとはあり得ません。


そこで、Blogger のテンプレートの HTML の変更前・変更後に行っておきたい作業をまとめました。

Blogger:テンプレート:レイアウトデータタグ:data:blog.url の動作まとめ

イントロダクション

Google のブログサービス「Blogger」では、テンプレートの HTML を変更することで、ブログのページすべての HTML 構造を変更することができます。

そして、その Blogger のテンプレートの HTML では、通常の HTML タグに加えて、Blogger の構造を決定するための専用のタグがあります。

Bloggerユーザ必見！テンプレートのHTMLを編集するときに参考になる公式ページリスト - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/06/blogger-html-edit-ref.html

今回は、Blogger のテンプレート内に記載しておくと、その時々に応じたデータへと置換してくれる、レイアウトデータタグの一つである、data:blog.url について見てみます。

Blogger:どんな些細な変更でも、テンプレートを変更した時にはプレビューをするべし！

イントロダクション

Google のブログサービス「Blogger」では、ブログのテンプレートを編集することで、すべてのブログページの HTML 構造を思いのままに変えることができます。

そのため、ブログのカスタマイズをしたい場合には、よくこのテンプレートを編集することになります。

Blogger:テンプレートに書き込んだコメントが配信されないようにする

イントロダクション

ブラウザへ配信される web ページのデータ量は少なければ少ないほどよいでしょう。

Web ページのデータ量を削減すると、通信の負荷軽減や、ブラウザでの負荷の軽減など、様々なメリットがあります。


さて、Google のブログサービス「Blogger」でブログを作っている場合、ブログの構造を形づけるテンプレートの HTML を独自に改造することがあると思います。

そのときに、改造した個所や意図を示す目的で、HTML のコメント(<!-- -->)を挿入することがあると思います。

しかし、そのコメントはブログを運営する上では非常に重要なものですが、ページを閲覧するユーザにとっては関係のないものです。むしろ、サーバからダウンローされるデータ量が増えてしまうため、デメリットになってしまうものです。


そのため、Blogger のテンプレートにコメントは残しつつ、Blogger のサーバから配信されるブログページのデータ量を減らす方法を考えました。

Bloggerユーザ必見！テンプレートのHTMLを編集するときに参考になる公式ページリスト

イントロダクション

Google のブログサービス「Blogger」でブログを書いていると、だんだんと標準のブログデザインでは満足できなくなってきます。

各種ウィジットの配置やデザイン、スタイルシートの定義などは Blogger の設定で簡単に設定・変更できます。
しかし、だんだんとそれらの設定にすら満足できなくなってきます。
最終的には Blogger のテンプレートの HTML を編集するようになります。

Blogger のテンプレートの HTML の編集

その時に参考になる、Google 公式のヘルプページをリストアップしました。