で知った、Blogger 用の便利なサービス「Blogger Touch」。
このサービスを使うと、Blogger ブログに簡単に iPhone 向けページを作成することができます。まずはためしと、「クリボウの写真日記」で使ってみたのが、この画面。iPhone で通常のブログ URL にアクセスすると、自動的に iPhone 用のページへとリダイレクトしてくれます。
続いて、iPhone から（これはエミュレータですが）個別の記事を選んでみたのが、この画面。
なかなかよくできていますね。このサービスによって生成された、実際の iPhone 用のページがこちらです。
トップページ、投稿ページの表示だけでなく、検索や静的ページの表示、ラベル別表示といった機能もついています。試してはいませんが、iPhone からコメントを送信することもできるみたいです。説明を見てみると、
導入方法
Blogger Touch サイトを開き、入力部分にブログの URL を書き入れ、「Go」ボタンを押します。（「Custom Domain」リンクを押すと、カスタムドメインのブログ URL も入力することができます。）
「Step 1」に入る前に、このサイトへ Google アカウントでログインします。（このサイトでは、Google App Engine の AuthSub という機能を使い、ユーザー管理に Google アカウントの認証機能を利用しています。パスワードなどの秘密情報がサイトに渡ることはないので、ご安心を。）
ログインすると、下の画面が表示されます。ここでは、Blogger Touch 側の URL を入力します。iPhone に実際にアクセスさせる URL を決めて、入力します。「Check Availability」で、URL がすでに使われていないかチェックできます。入力後、「Next」ボタンを押下。
「Step 2」では、「Site Feeds」リンクをクリックして、Blogger の管理画面「設定 ＞ サイトフィード」を開きます。「ブログ フィードを許可」の欄が「完全」になっているのを確かめます。
続いて、「Add Code」ボタンを押すと、Blogger のウィジェット追加画面「ページ要素を追加」が表示されます。ブログ名が正しいか確認して、「ウィジェットを追加」ボタンを押します。クラシックテンプレートの場合、Blogger のこのウィジェット追加が使えないので、「view code」リンクをクリックしてコードを表示し、コピーしたものを Blogger 管理画面「テンプレート ＞ HTML の編集」から、テンプレートに貼り付けることになります。
最後は、ブログの確認です。入力されたブログがユーザーのものか確かめます。といっても、ただ「Verification」ボタンを押すだけ。「Done」というメッセージダイアログが出れば OK です。
これで登録はおしまい。説明すると長いですが、実際の手順はすぐに終わります。以降は、Blogger Touch の「Dashboard」から登録ブログの設定を変更したり、新しいブログを登録したりすることができます。
ブログ設定
ダッシュボードの「Edit」リンクをクリックしてみたのが次の画面です。Google Analytics や AdSense の ID は最初から入力されています。設定できる項目は以下のとおり。
「Blogger って iPhone で見られないしなぁ…」とあきらめていた人は、ぜひぜひお試しを。
関連記事：
このサービスを使うと、Blogger ブログに簡単に iPhone 向けページを作成することができます。まずはためしと、「クリボウの写真日記」で使ってみたのが、この画面。iPhone で通常のブログ URL にアクセスすると、自動的に iPhone 用のページへとリダイレクトしてくれます。
続いて、iPhone から（これはエミュレータですが）個別の記事を選んでみたのが、この画面。
なかなかよくできていますね。このサービスによって生成された、実際の iPhone 用のページがこちらです。
トップページ、投稿ページの表示だけでなく、検索や静的ページの表示、ラベル別表示といった機能もついています。試してはいませんが、iPhone からコメントを送信することもできるみたいです。説明を見てみると、
Featuresとのこと。Adsense や Google Analytics も特別な指定をすることなしに、ブログから自動的に読み取って、IPhone 用ページでそのまま有効になるようです。これはすごい。
- Support Google Analytics
- Support Adsense
- Support Search Widget
- Support Pagination
- Support Pages
- It's Free!
導入方法
Blogger Touch サイトを開き、入力部分にブログの URL を書き入れ、「Go」ボタンを押します。（「Custom Domain」リンクを押すと、カスタムドメインのブログ URL も入力することができます。）
「Step 1」に入る前に、このサイトへ Google アカウントでログインします。（このサイトでは、Google App Engine の AuthSub という機能を使い、ユーザー管理に Google アカウントの認証機能を利用しています。パスワードなどの秘密情報がサイトに渡ることはないので、ご安心を。）
ログインすると、下の画面が表示されます。ここでは、Blogger Touch 側の URL を入力します。iPhone に実際にアクセスさせる URL を決めて、入力します。「Check Availability」で、URL がすでに使われていないかチェックできます。入力後、「Next」ボタンを押下。
「Step 2」では、「Site Feeds」リンクをクリックして、Blogger の管理画面「設定 ＞ サイトフィード」を開きます。「ブログ フィードを許可」の欄が「完全」になっているのを確かめます。
続いて、「Add Code」ボタンを押すと、Blogger のウィジェット追加画面「ページ要素を追加」が表示されます。ブログ名が正しいか確認して、「ウィジェットを追加」ボタンを押します。クラシックテンプレートの場合、Blogger のこのウィジェット追加が使えないので、「view code」リンクをクリックしてコードを表示し、コピーしたものを Blogger 管理画面「テンプレート ＞ HTML の編集」から、テンプレートに貼り付けることになります。
最後は、ブログの確認です。入力されたブログがユーザーのものか確かめます。といっても、ただ「Verification」ボタンを押すだけ。「Done」というメッセージダイアログが出れば OK です。
これで登録はおしまい。説明すると長いですが、実際の手順はすぐに終わります。以降は、Blogger Touch の「Dashboard」から登録ブログの設定を変更したり、新しいブログを登録したりすることができます。
ブログ設定
ダッシュボードの「Edit」リンクをクリックしてみたのが次の画面です。Google Analytics や AdSense の ID は最初から入力されています。設定できる項目は以下のとおり。
- Feed Url … ブログフィードの URL。
- Google AdSense … Google AdSense の ID。
- Google Analytics … Google Analytics の ID。
- Blog Name … ブログのタイトル。
- Show Page List … ページリストを表示するかどうか。
- Show Label List … ラベルのリストを表示するかどうか。
- Redirect iPad … iPad での閲覧で Blogger Touch ページへリダイレクトさせるかどうか。
- Adult Content … アダルトコンテンツの有無。
「Blogger って iPhone で見られないしなぁ…」とあきらめていた人は、ぜひぜひお試しを。
関連記事：
Blogger in Draft ブログで流れてきたアナウンスがこちら。
追加されたフォントの実際の字形を知りたい場合には、Google Font API の Google Font Directory を見てみるのがいいと思います。
これらのフォントは、Blogger in Draft 管理画面「デザイン ＞ テンプレートデザイナー」リンクからテンプレートデザイナーを開き、メニュー「アドバンス」をクリックすることで利用可能です。
これまで、ブログデザインの中でもフォント指定に関しては、読者のコンピュータに何がインストールされているのかはっきりと分からないため、なかなか思い切ったことができなかったと思うんですが、ウェブフォントの場合サーバ上のフォントを使用するので、かなり自由にフォントの指定ができるようになりますね。
まだ、英語フォントのみの提供というのが残念なんですが、まずは英語タイトルのブログなんかで試してみるといいんじゃないでしょうか。
追記（2011-02-11）：
2011-01-20 付けで、この機能が Blogger に正式採用になりました。その際、さらに 35 フォントが追加され、ウェブフォントが 77 フォントになったとのことです。
Blogger ブログのサイドバーに、「最近の投稿」リストを表示する方法について。同じような質問に 2 回ほど回答したので、もしかしたらほかにも需要があるのかもと思い、記事にしておくことにしました。
テンプレートデザイナーのHTML編集で過去記事一覧をサイドバーに出したい
過去記事のタイトルをサイドバーに表示したいのですが、新しく追加されたテンプレートデザイナーでは、どのようなコードを書けばよろしいでしょうか？
・過去記事をすべて表示したい。（もしくは30件程度でも可）
・どのページを見ても常に表示されているようにしたい。
・サイドバーに表示したい。
・タイトル（リンク付き）のみで表示したい。
・並び順は最新順で。（古い順でも可）
クラシックテンプレートではできるような内容がありますが、新しく導入されたテンプレートデザイナーでの表示は見つかりませんでした。以上、よろしくお願い致します。
アーカイブの日付を消す方法はありますか？クラシックテンプレートだとあると回答を見つけましたが、テンプレートデザイナーを使用しても消す方法が知りたいです！
クラシックテンプレートだとあると回答を見つけましたが、テンプレートデザイナーを使用しても消す方法が知りたいです！
日付で並べると言うよりは、ブログのタイトル一覧をパーンと見せたいのです。
カレンダー的な機能より、タイトル一覧的な機能。分かる方いらっしゃいましたらおしえてください。
フィードガジェット
まずは、ブログの投稿フィードをフィードガジェットを使って表示する方法です。この方法の長所は、全てが Blogger のサービス内で完結する点。短所はというと、投稿タイトルを 5 件までしか表示できない点です。
導入方法
Blogger 管理画面「デザイン ＞ ページ要素」で「ガジェットを追加」リンクを押して、基本ガジェットから「フィード」ガジェットを選択します。フィード URL の欄にブログ投稿フィードの URL を記入します。分からない場合は、ブログの URL を入力するだけで、自動的にフィードを探してくれます。
次の画面では、ガジェットのタイトル（「最近の投稿」などにするのがよさそう）や表示項目数、日付・投稿者の表示、リンクを新しいウィンドウで開くかどうかといった設定が行えます。
これが 3 種類のうち一番簡単な方法。フィードの URL については、クリボウの Blogger 入門: Blogger のフィード URL とパラメータを確認してください。
Feed2JS
ブログの投稿フィードを Feed2JS という外部のフィード表示サービスを使って、ブログ内に表示する方法です。この方法の長所は投稿を 25 件まで表示できる点（設定によっては 100 件近くまで表示させることも可能）。短所は、外部サービスを利用するのと JavaScript を利用するという点です。
導入方法
Feed2JS サイトを開き、「Build」タブをクリックします。「URL」欄に投稿フィードの URL を入力し（分からない場合は、ブログ URL 末尾に atom.xml をつけたものにします。例：http://kuribo-programming.blogspot.com/atom.xml）、「Show channel」を「no」に、「UTF-8 Character Encoding」にチェックを入れます。ほかに、表示項目数や日付、内容の表示などを設定するには、クリボウの Blogger 入門: Feed2JS の使い方を確認してください。
実際の表示確認は「Preview Feed」ボタン。
それでよければ「Generate JavaScript」ボタンを押します。「Get Your Code Here」のテキストエリアにコードが表示されるので、その全体をコピーします。
Blogger 管理画面「デザイン ＞ ページ要素」で「ガジェットを追加」リンクを押して、基本ガジェットから「HTML/JavaScript」ガジェットを選択します。「タイトル」欄にガジェットのタイトル（「最新の投稿」など）を入れ、コンテンツ欄に先ほどコピーしたコードを貼り付けます。
アーカイブガジェット
最後が、フィードを使わずに、Blogger のアーカイブガジェットを改造して使う方法です。長所は、Blogger 内で機能が完結する点、記事を 50 件表示できる点です。短所はというと、導入が少し面倒くさい点かと。
導入方法
Blogger の管理画面「デザイン ＞ HTML の編集」から、「テンプレートをすべてダウンロード」して、バックアップを取ります。
「ウィジェットのテンプレートを展開」にチェックを入れ、
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
のようなタグを見つけます。「BlogArchive」<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'> から、一番近い </b:widget> まで（クリボウの場合 87 行ありました）を次のコードに書き換えます。<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
<b:includable id='posts' var='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</b:includable>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "item"'>
<div class='w-content'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:include data='data' name='interval'/>
</ul>
<b:include name='quickedit'/>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
<b:includable id='posts' var='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:
</b:loop>
</b:includable>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "item"'>
<div class='w-content'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:include data='data' name='interval'/>
</ul>
<b:include name='quickedit'/>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
すでに使っているアーカイブガジェットとこのガジェットとを共存させたい場合は、
id='BlogArchive2' として、追加するのがいいと思います。ガジェットを書き換え（もしくは追加）した後、管理画面「デザイン ＞ ページ要素」から、ガジェットの編集でタイトルを「最近の投稿」などに変更します。その画面では、さらに「階層」スタイルになっているかどうか、そして「投稿タイトルを表示」にチェックが入っているどうかを確認しておいてください。
以上、「最近の投稿」リストを表示する 3 種類の方法でした。自分の好みに合うものを選んで使ってみてくださいね。
