Blogger:投稿の下書きに画像をドラッグ＆ドロップすると、画像を挿入できます！

イントロダクション

Google のブログサービス「Blogger」にて、久しぶりに画像を記事に挿入しようと思い、エディタの「画像を挿入」ボタンを押したところ、次のようなメッセージが表示されました。

Blogger:エディタの「画像を挿入」ボタンを押したときに
表示されたメッセージ

ご存じですか？
投稿の下書きに画像を直接ドラッグ＆ドロップできるようになりました。

なんと、「画像を挿入」ボタンを使わなくても、ファイルとして画像が保存されていれば、それをブログの編集画面にドラッグ＆ドロップすることで、その画像を記事の本文へと挿入できるようになったようです！

Blogger:ガジェットのタイトルの背景に画像を設定する方法

イントロダクション

Google のブログサービス「Blogger」にて、ガジェットの背景に画像を設定する方法について記載します。

Blogger:モバイル表示では、指を左右にフリックすると、前後の記事へ移動します

イントロダクション

Google のブログサービス「Blogger」のブログをスマートフォンなどのモバイル端末で見た時に気が付いたことがあります。

それは、閲覧しているページにて、指を左右にフリックすると、その記事の「前の記事」や「次の記事」に移動することです。

Blogger:Bloggerでアップロードした画像なら、環境(PC/モバイル)に応じて適切なサイズを自動的に読み込んでくれる！すごい！

イントロダクション

Google のブログサービス「Blogger」にてアップロードした画像なら、環境(PC/モバイル)に応じて適切なサイズを自動的に読み込んでくれるということに気が付きました。

Blogger:HTML/JavaScriptガジェットの編集アイコンがおかしくなった!その理由

イントロダクション

これは、Google のブログサービス「Blogger」にて遭遇したトラブルについての記事です。

最近、大幅にこのブログのデザインを変更してみました。
そのときに、HTML/JavaScript ガジェットの編集アイコンの動作がおかしくなるというトラブルに遭遇しました。

Blogger:ブログ上の工具マークは、運営者本人にしか見えません - その確認方法
http://upa-pc.blogspot.com/2015/05/blogger-edit-icon.html
Dr.ウーパのコンピュータ備忘録

その原因と対処法について記載します。

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」では、自分自身のブログをブラウザで見ると、本文の下部に、鉛筆のようなマークが表示されます。

Blogger:ブログ上の工具マークは、運営者本人にしか見えません - その確認方法

イントロダクション

Google のブログサービス「Blogger」では、自分自身のブログをブラウザで見ると、ガジェットの部分に、ドライバーとスパナのような工具が交差しているマークが表示されます。

Blogger:サイトフィードを「先頭のみ」とした場合の、atom/rssのFeedlyにおける表示の違い

イントロダクション

Google のブログサービス「Blogger」では、サイトの更新情報を配信するためのサイトフィードについて、どの程度情報を次の中から選択することができます。

サイトの更新情報を配信するためのサイトフィードの配信設定

• 完全
• 追記の区切りまで
• 先頭のみ
• なし

少し前に、このブログのサイトフィードの配信を「先頭のみ」に変更してみました。
※ 現在(2015/4/21)は、「追記の区切りまで」に変更しています。


その時に、Feedly ではどのように見えるのか、チェックしてみました。

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:テンプレートとして、動的ビューを選択しているときの、クエリパラメータ

イントロダクション

Google のブログサービス「Blogger」の URL 構造について、以下の投稿にてまとめました。

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

今回は、Blogger のテンプレートとして「動的ビュー」を使用している場合にのみ、意味のある URL のクエリパラメータについてまとめます。

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