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

イントロダクション

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

Blogger:レイアウトの画面が新しくなった？ウィジットを囲んでいるセクションのidが表示されるようになった

イントロダクション

先ほど、Google のブログサービス「Blogger」の設定画面を見たところ、レイアウトの画面に違和感を感じました。

以前は表示されていなかったセクションの id が表示されるようになっています！

Blogger:テンプレートのHTMLに新しい機能が追加されました!条件式の複数条件サポートや三項演算子など。今までよりもテンプレートのHTMLをシンプルに記載できるかも!

イントロダクション

Google のブログサービス「Blogger」ですが、最近テンプレートのHTMLに新しい機能が追加されました。

Blogger テンプレートのウィジェットタグに新しい表現方法が登場 | クリボウの Blogger Tips 
http://www.kuribo.info/2015/05/blogger-widget-tag-expressions.html

Blogger:HTML/JavaScriptガジェットを、投稿ページのみに表示する方法

イントロダクション

Google のブログサービス「Blogger」にて、HTML/JavaScript ガジェットをブログの全ページではなく、投稿ページでのみ表示したいことってありますよね。

今回は、特定のガジェットをトップページでのみ表示する方法について記載します。

ブログ/Webページの一部を新しいウィンドウで表示したい! そんな時は、JavaScriptを使って新しいウィンドウへHTMLを書き出そう！

イントロダクション

ブログ上では、レイアウトが決まっているため、大きなサイズのコンテンツは扱いづらいです。


特に、横幅はたいてい固定されているうえに、サイドバーなどがあるため、大きなコンテンツは縮小して配置するか、狭い領域に配置する工夫が必要になります。

コンテンツのなかでも、特に表のような幅が広いコンテンツは、配置するのが面倒です。


Webページでも、本文とその他の部分でコンテンツのサイズが固定されている場合には、大きなサイズのコンテンツは扱いづらいです。


そんな時は、ブログの本文中では、収まらなかった部分をスクロールで見せるようにしておき、新しいウィンドウでそのコンテンツ全体を見せる方法があります。

日本国内のブログの調査統計資料まとめ - 時系列に統計資料を列挙

イントロダクション

誰でも簡単にインターネット上に情報を発信することのできるブログですが、全国的にどのように利用・閲覧されているのか気になります。


インターネット上の検索してみると、ブログの利用・閲覧状況について、いろいろな調査・統計処理結果が見つかります。


しかしながら、それらの情報はインターネット上に離散的に存在するため、なかなか意図したブログについての調査資料・統計資料が見つからないこともあります。

特に、近年のブログの利用・閲覧状況を知りたくても、なかなかその目的合致した調査資料・統計資料が見つからないこともあります。


そこで、これまで（2015/4/13 現在まで）にインターネット上に公表されたブログの利用・閲覧状況を調査・統計処理したデータを、時系列にまとめてみました。

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」にて、特定のガジェットをブログの全ページではなく、特定のページでのみ表示したいことってありますよね。

今回は、特定のガジェットをトップページでのみ表示する方法について記載します。

Blogger:ガジェットのタイトルにスタイルシートを適用する方法

イントロダクション

Google のブログサービス「Blogger」にて、各ガジェットのタイトルにスタイルシートを適用して、オリジナルのデザインを表現したいことってありますよね。

その時の方法についてまとめました。

Blogger:JavaScript:ある日付（年・月）より前の投稿だけ、特定のスクリプトを実行したい

イントロダクション

Google のブログサービス「Blogger」にて、投稿を公開した日付をもとに、特定のスクリプトを実行するかどうかを決定したい場合があります。

今回は、特定の年・月よりも前の投稿の場合だけ、任意のスクリプトを実行する方法について説明します。

Blogger:投稿の投稿日時を、JavaScriptで取得 (data:post.timestampISO8601 タグ編)

イントロダクション

Google のブログサービス「Blogger」にて、記事を公開した日付をもとに、何らかの処理を行いたいときってありますよね。


投稿を公開した日付を取得するにはいろいろな方法があります。

Blogger:投稿の公開日を取得する方法
http://upa-pc.blogspot.com/2015/03/blogger-get-published-date.html


今回は、Blogger のテンプレート用のタグ <data:post.timestampISO8601/> の値を取得する方法について考えました。

Blogger:投稿の投稿年・月を、JavaScriptで取得 (URL編)

イントロダクション

Google のブログサービス「Blogger」にて、記事を公開した日付をもとに、何らかの処理を行いたいときってありますよね。


投稿を公開した日付を取得するにはいろいろな方法があります。

Blogger:投稿の公開日を取得する方法
http://upa-pc.blogspot.com/2015/03/blogger-get-published-date.html


今回は、Blogger の投稿の URL に含まれる投稿年・月を JavaScript で取得する方法について考えました。

Blogger:投稿の公開日を取得する方法

イントロダクション

Google のブログサービス「Blogger」にて、記事を公開した日付をもとに、何らかの処理を行いたいときってありますよね。

投稿を公開した日付を取得するにはいろいろな方法があります。


ここでは、どのような方法で、Blogger の投稿の公開日(投稿日)を取得できるのか、列挙してみたいと思います。

Blogger:過去の下書きの記事を探すには、投稿のすべてのラベル/検索ボックスが便利

イントロダクション

Google のブログサービス「Blogger」にて、過去の下書きを効率的に探す方法について記載します。

Blogger:新規投稿を作成するためのショートカットを作成して、素早く新しい投稿を書き始める (Windows編)

イントロダクション

今回は、Google のブログサービス「Blogger」にて、ワンクリックで新しい投稿の作成を開始できるようにしてみましょう。

環境は、Windows です。

この準備を終えると、Windows を起動してすぐに、ワンクリックで新しい Blogger の投稿を作成できるようになります。

シンプルなアイキャッチ画像ジェネレータを作成してみました - アイキャッチ画像生成自動化を追求します

イントロダクション

ブログページやWebページに含まれている画像は、FacebookやGoogle+といったSNSで拡散されたときに、サムネイル画像として用いられるようになりました。

また、ブログ内の関連記事表示や、新着情報、人気の投稿、過去の投稿といった記事の一覧を表示するものでは、記事のタイトルとサムネイル画像がセットで表示されることが多いです。

他にも、様々なサービスで、ブログページやWebページに含まれている画像を、記事紹介時のサムネイルとして使用するケースが目立っています。


すると、記事の中に画像が含まれないブログページやWebページは、相対的に目立たなくなってしまいます。

また、サムネイル画像が無いと、パッと見で記事一覧を見た時の視認性が、サムネイルがある場合と比べて劣るように感じます。


しかし、わざわざテキストしかないブログページやWebページで、別途サムネイル画像を用意するのは手間がかかります。


そこで、そのページのキーワードを基に、アイキャッチ画像を生成する Web サービスを作成してみました。

JavaScript:ページタイトルとURLを一か所に表示する(3) - 遅延&エラー処理追加 - URLはcanonicalから取得します

イントロダクション

前回、ページタイトルと(正規化された)URLのペアを生成する JavaScript コードへ、自動選択機能追加を追加してみました。

JavaScript:ページタイトルとURLを一か所に表示する(2) - 自動選択機能追加 - URLはcanonicalから取得します
http://upa-pc.blogspot.com/2015/03/javascript-page-title-and-canonical-url-2.html


今回は、そのコードに対して、以下の改良を行いました。

JavaScript:ページタイトルとURLを一か所に表示する(2) - 自動選択機能追加 - URLはcanonicalから取得します

イントロダクション

前回、ページタイトルと(正規化された)URLのペアを生成する JavaScript コードを作成しました。

JavaScript:ページタイトルとURLを一か所に表示する(1) - シンプル版 - URLはcanonicalから取得します
http://upa-pc.blogspot.com/2015/03/javascript-page-title-and-canonical-url.html


今回は、そのコードを少し改良し、ページタイトルと(正規化された)URLのペアをクリックしたら、コピーし易いように自動的にそのテキストを選択状態にしたいと思います。

JavaScript:ページタイトルとURLを一か所に表示する(1) - シンプル版 - URLはcanonicalから取得します

イントロダクション

「これは参考になる！」というページを見つけると、その情報を誰かにシェアしたくなります。

参考になる情報は、自分の友人・知人とシェアして、その知見を分け合ったり、それについて議論を深めたくなるものです。


その時に、意外と手間になるのが、ページタイトルと、ページの URL を個別にコピーして、メールやチャットツールなどへ張り付ける行為です。


何故、ページのURLに加えて、ページタイトルを送るのかは、以下に理由を記載しました。
何故、Webページをシェアするときに、URLだけではなくページタイトルも付与するのか？
http://upa-pc.blogspot.com/2015/03/web-url-share-with-title.html


一般的にページタイトルと、ページの URL をメールやチャットツールなどへ張り付けるには、以下の手順が必要です。

(1) ページタイトルをコピー
(2) ページタイトルをメールやチャットツールなどへ張り付け
(3) URLをコピー
(4) URLをメールやチャットツールなどへ張り付け


4 ステップも必要になります。
もし、ページタイトルとページの URL が同時にコピー出来たら、どんなに楽でしょうか。

であれば、

(1) ページタイトルとページの URL をコピー
(2) ページタイトルとページの URL をメールやチャットツールなどへ張り付け

の 2 ステップで作業が完了します。


Twitter や Facebook のような SNS を使って情報を拡散する場合には、公式で用意されているシェアボタンを設置すれば、タイトルとページのURLを簡単に他人とシェアすることができます。

そのくらい簡単に、ページタイトルとURLをコピーできるようにしたいものです。


そこで、Webページの制作者向けに、ページタイトルとURLを一か所に表示する JavaScript コードを作成してみました。