Home > 投稿
投稿
Blogger ブログの各エントリには、個別の URL(いわゆるパーマリンク)がついています。これまで、Blogger のパーマリンクは、投稿タイトル中のアルファベットを元にして、自動的に生成されてきました。この Blogger の自動 URL 付加の仕組みについては、以前に記事にしているので、興味のある人はご確認を。

上のスクリーンショットのように、Blogger in Draft からブログの新規投稿を行うと、投稿オプション設定に「パーマリンク」という欄が出てきます。
ここに
blogger-custom-permalink と入れると、このブログの場合だと、http://www.kuribo.info/2012/07/blogger-custom-permalink.html という URL になります。
これまで、投稿を公開し終えるまでその記事の URL が分からなかったことを思うと、前もって URL が分かるだけでもずいぶん進歩です。さらに URL を自由に指定できるとは!ブログ URL 中の単語自体 SEO に影響があると言われてすでに久しいですが、Google 傘下の Blogger もようやく SEO に本腰を入れてきたというところでしょうか。
このカスタムパーマリンク機能ですが、一応注意点をあげておくと、
- パーマリンクのカスタマイズは Blogger ではなく、Blogger in Draft から。
- URL で使えるのは半角英数とハイフン
-とドット(ピリオド).。 - ハイフンやドットは、ファイル名の先頭でも末尾でも使える。連続もOK。
- 大文字と小文字は区別される。(ABC と abc は別)
- 文字数制限なし。長すぎても公開はできる。アクセスすると 414 エラーが出る場合も。100 文字は OK、3000 文字は無理でした。(テスト)
- URL が指定できるのは、新規投稿時のみ。公開済み投稿の URL は変更できない。
…と、こんなところです。現在 Blogger in Draft にしかない機能のため、途中で仕様が変わる可能性も大いにあります。パーマリンクの指定は、無理せずこれまでの Blogger のきまりにしたがって、半角英小文字とハイフンのみ、39 文字以内にしておいた方が無難でしょうね。
関連:
追記(2012-07-18):
コメント欄で教えてもらいました。このカスタムパーマリンク機能が、Blogger in Draft を卒業して、Blogger 標準でも使えるようになりました。
今回も、Blogger 10 周年記念の新機能。
Blogger ブログに、ユーザー待望の「続きを読む」機能がつきました。
- Blogger Buzz: You Might As Well Jump!
- The Okano Mail: Blogger supported jump breaks: ブロガーが続きを読む機能をサポート

この続きを読むリンクを投稿の中に表示させるには、Blogger の新しくなったエディタで投稿を編集する必要があります。Blogger in Draft は自動的に新エディタになっていますが、Blogger の場合は、管理画面「設定 > 基本」ページの「投稿エディタを選択」欄で「新しくなったエディタ」を選びます。
新しいエディタの画面がこちら。右端にあるのが「続きを読む」の切り替え位置を指定するためのボタンです。

実際に押してみたのがこちら。

「作成」モードだと、点線で切り替え位置が表示されます。当然のことながら、上が最初から表示される部分、下が「続きを読む」で表示される部分です。「HTML の編集」モードだとこのような記述になります。

非常にわかりやすくていいですね。ちなみに、続きを表示するためのリンクの文字列はデフォルトで「もっと読む »」。この文字列は「レイアウト > ページ要素」ページの「ブログの投稿」の「編集」リンクから変更することが可能です。

あと、カスタマイズしたテンプレートを使用したブログの場合、これらの手順を踏んでも「もっと読む」リンクが表示されない場合があります。ヘルプによると、そのような場合「レイアウト > HTML の編集」で「ウィジェットのテンプレートを展開」にチェックを入れた後、テンプレートから
のコードを見つけ出し、すぐ後に
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
というコードを挿入すれば、「もっと読む」リンクが表示されるようになるとのことです。ぜひお試し下さい。
ブログの投稿の最後に、その投稿に関連する投稿のリストを表示する方法です。
今回参考にさせてもらったのは、
Blogger カスタマイズサイトがいくつも出てきて、脅威を感じているところです(汗)。
ラベルごとの関連記事
最初は
- Bloggerに関連記事(Related Posts)を導入する方法 (ラベルに日本語が含まれていない場合) | Bloggerカスタマイズ情報ブログ [Customize your Blogger]
- Google Blogger の複数ラベルが表示できる関連記事スクリプト » Google BloggerブログHacks Tips Tweaks
写真日記にとりつけてみたところ、下の画像のようになりました。

記事単独のページにラベルごとに数件のリンクを表示します。
上の例では、この下に「Nikon D80」ラベル、「昆虫」ラベル、「蝉」ラベルの投稿へのリンクが表示されました。
ラベルやラベルごとのリンク数は、ユーザーが指定することが可能です。
導入方法
1.Blogger 管理画面「レイアウト > HTML の編集」ページで「ウィジェットのテンプレートを展開」にチェックを入れます。
2.テンプレートのテキストエリアから、
<b:includable id='related-posts' var='posts'>
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Post:</h3>
<div id='data2007'/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 6;
var maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = decodeURIComponent(raw.substr(homeUrl3.length+13));
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
</b:includable>
というコードを貼り付けます。コードを見つけるのにはブラウザの検索機能が便利です。赤字の部分は、上からタイトル、ラベルごとの投稿リンク数、表示ラベル数を表していて、ユーザーで変更が可能です。3.次に、テキストエリアから
これでおしまい。ちなみに
ラベルが日本語だと下の画像のようになり、正常に表示されません。
但し、最大の問題は日本語のラベルが文字化けすること。
という問題があったため、日本語ラベル名の URL エンコードをデコードするよう、コードを修正しています(青字部分)。なので、ブログの投稿に日本語ラベルをたくさんつけていても大丈夫。
3行コピペでできる方法
2つめは、
で紹介されている方法。
本家のプロジェクトページはこちらです。
それを写真日記にとりつけてみたのがこの画像です。

重複するラベルの多い順にリンクを並べているようで、元の投稿「蝉の抜け殻」に対して、かなり正確な関連記事が表示されています。
導入
1.Blogger 管理画面「レイアウト > HTML の編集」ページで「ウィジェットのテンプレートを展開」にチェックを入れます。
2.テンプレートのテキストエリアから、
3.次にテキストエリアの最後の方から、
</html>
<script type='text/javascript' src='http://brps.appspot.com/brps.js' />
これでおしまい。簡単です。
またオプションとして、タイトルと投稿リンクの表示数を指定することもできます(標準は「Related Posts」で 10 件)。
その場合は、3で貼り付けるコードを
<script type='text/javascript'>
window.brps_options = {"title": "<h3>関連記事</h3>", "max_results": 5}
</script>
<script type='text/javascript' src='http://brps.appspot.com/brps.js' />
Blogger がオリジナルガジェットを募集している件について、以前記事にしてお伝えしましたが、早速 Blogger Buster が4つの新ガジェットを公開し、Blogger チームもそれを紹介しています。
- Picasa フォトストリーム
- Twitter アップデート
- 最近の投稿
- 最近のコメント
どの機能もこれまでのフィードガジェット(フィードウィジェット)で実現できそうなものですが、6件以上の項目を表示することができたり、ガジェットの縦の長さを指定することができたりする点が、フィードガジェットとは異なっています。
…ということで、新ガジェットに興味のある人はぜひお試しを。導入は上記リンク先ページの「Add it now」リンクからどうぞ。
また、新ガジェット公開に関連して、サードパーティ開発の Blogger ガジェットを紹介する新しいブログが公開されています。
今後、新しいガジェットが気になる人は、Blogger in Draft ブログと、このブログとをウォッチしておくといいんじゃないでしょうか。

あ、これいいなと思った Blogger カスタマイズ。
クリボウだとこんなの
完全に便乗なんですが、クリボウが使うとしたらこんな感じにするかな?というのも上げておきます。

変更点
- タイトル一覧から日付を削除 … <data:post.dateHeader/> で表示される日付は、同じ日付に複数の投稿があると片方にしか表示されず、レイアウトが崩れてしまうため。
- リンク先をページ内に … 複数投稿が表示されている場合、一覧からパーマリンクに飛ぶよりページ内で移動する方が好みなので。パーマリンクを作成していなくても使えるし。
ここはレイアウトテンプレートじゃないので、動作は「写真日記」でご確認を。こんな感じになります。
導入方法
Blogger 管理画面「レイアウト > HTML の編集」で「ウィジェットのテンプレートを展開」にチェックを入れ、<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> で始まる「ブログウィジェット(投稿表示ウィジェット)」の中に、下記のコードを貼り付けます。
このウィジェット内ならどこでもいいんですが、おすすめは「ステータスメッセージ」の後。セクションが、ウィジェットが、インクルーダブルがと難しく考えずに <b:include data='top' name='status-message'/> を検索して、その次の行へ挿入してしまうのが吉です。
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<span>このページの記事一覧</span>
<ul id='post-title-navigation'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:post.title'>
<a expr:href='"#" + data:post.id'><data:post.title/></a>
<b:else/>
<a expr:href='"#" + data:post.id'><data:post.id/></a>
</b:if>
</li>
</b:loop>
</ul>
</b:if>
</b:if>
ということでよかったら一度お試し下さい。
最後になりましたが、面白いアイデアを教えてくださった naminorito さんに大感謝です!
Blogger in Draft には通常の Blogger とは異なる投稿エディタが用意されているのはご存知だと思いますが、今回そこに「自動保存機能」と「自動日時設定機能」の2つの新機能が追加されました。
- Blogger in Draft: Autosave and Automatic Date and Time
- The Okano Mail: Automatic date and time in draft
もう1つの「自動日時設定機能」が現在の Blogger のエディタにもない新機能で、公開時点の日時を記事のタイムスタンプとして設定するというもの。

現在の Blogger では、エディタを開いた日時が記事の日時となってしまうため、下書きの期間が長いと記事の日時と公開日時とが大きくずれてしまうという問題点がありました。それが今回の機能追加で解消されることになります。
新しい仕組みでは、記事に設定される日時は「最初に公開された時点」の日時となります。なので、公開後の記事を再び編集して公開した場合には、記事の日時は変更されません。もし、日時を編集後の日時に変更したい場合(つねにブログトップに記事を持って来たい場合など)には、一度下書きに戻してから公開するという手が有効です。
この「自動日時設定機能」を使わずに、記事の日時を自分で指定したい場合には、投稿オプションから「Scheduled at」を選んで日時を入力して記事を公開します。過去の日時を指定して公開ボタンを押すと、その時点で公開され、記事のタイムスタンプは指定した日時に設定されます。未来の日時を指定すると、予約投稿となり、その日時になった時点で記事が公開され、タイムスタンプも公開時刻と同じになります。
今回の変更で、記事のタイムスタンプが一般の感覚に近い形でつくことになり、下書き機能をよく利用する人にとってはとても便利になったんじゃないかと思います。ちなみに、「Blogger in Draft を日常で使うのにはまだ抵抗が…」という人には、現在の Blogger で記事公開時点の日時をタイムスタンプとして設定するためのユーザースクリプトというものもあるので、一度そちらを試してみるのもいいかもしれません。

以前、ブログに載せたコードにハイライトをつけるウィジェット「Blogger Syntax Highlighter」というものを紹介しました。
これは良い感じです^^
Perl が対応していないのは、PHP で無理やり対応させることにしようかな♪
対応言語表を見てみると、たしかに Perl は載っていませんね。
…ということで、Perl のコードもハイライトさせる方法はないのかな?と探してみたところ、見つけたのがこちらのページ。
こちらを参考にしながら、導入の手順をまとめておきます。
導入手順
1.まず「Blogger Syntax Highlighter」ウィジェットをブログに追加します。前回の記事を参考にしてください。※Firefox でウィジェットの追加に失敗する場合は、別のブラウザでも試してみてください。
2.Blogger の管理画面「レイアウト > ページ要素」から「Blogger Syntax Highlighter」ウィジェットの「編集」リンクをクリックします。
3.「コンテンツ」欄の一番最後
dp.SyntaxHighlighter.HighlightAll('code');
--></script>
<script src="http://beardendesigns.com/javascripts/shBrushPerl.js" type="text/javascript"></script>
<script type="text/javascript"><!--
おまけ.好みかもしれませんが、ついでに「編集」リンクからウィジェットのタイトルを消しておくと、ブログの見た目を変えずにハイライト機能がつけられていい感じです。
使い方
ブログへのコードの掲載は
(コード)
</pre>
その他、「Blogger Syntax Highlighter」で利用できるオプションについては、前回の記事を確認してください。
…というわけで、Perl 使いの方はぜひぜひお試し下さい。
Blogger in Draft に「ジオタグ」機能が追加されています。

Blogger in Draft から「新規投稿」や「投稿を編集」画面を開くと、新しく「場所を追加」というリンクが表示されています。リンクをクリックしてみたのが上の画像。
表示されている地図上をドラッグしたり住所で検索したりして場所を決定し「保存」ボタンを押すと、投稿に場所情報を追加することができます。場所が追加されると、実際のブログ上の各投稿には「場所: 日本薬王院温泉寺」のようなラベルの、 Google マップへのリンクが表示されるようになります。
動作例として、「写真日記」につけてみたのがこちらです。うちみたいなフォトログや旅行記なんかによさそうですね。
導入は、Blogger in Draft 管理画面「レイアウト > ページ要素」の「ブログの投稿(Blog Posts)」の「編集」リンクから。ポップアップする「ブログの投稿の設定」ウィンドウから「場所(Location)」を見つけてチェックボックスにチェックを入れるだけ。
カスタマイズされたテンプレートの場合
今回も、Blogger 標準のテンプレート以外の場合、うまく導入できないことがあるようです。そういうときには、こちらの記事をどうぞ。
やり方だけ抜き出して、訳してみるとこんな感じ。
2.テンプレートコードの中から
クリボウも、この方法で「写真日記」に導入することができました。
…というわけで、ブログの記事に地図情報を載せたいという人は、ぜひお試しください。
Blogger に「リアクション」機能が追加されています。
- Blogger in Draft: New feature: Reactions
- blog*spot: 「iGoogle Gadgets」を一般公開+「Reactions」機能をベータサイトで公開 at ブログヘラルド
- Blogger Buzz: Reactions: easily engage your readers

上の画像は「写真日記」につけてみたもの。
この「リアクション」機能を使うと、読者が記事を読んでどのように感じたのかがすぐにわかります。
記事に対する読者の評価がわかるという点では、以前お伝えしたスターレイティング機能とよく似ているんですが、読者に押してもらうボタンのテキストも自分で設定できるのがいい感じです。
導入は Blogger 管理画面「レイアウト > ページ要素」の「ブログの投稿(Blog Posts)」の「編集リンク」から。ポップアップする「ブログの投稿の設定」ウィンドウから「リアクション(Reactions)」を見つけてチェックボックスにチェックを入れるだけ。
ボタンのテキスト編集をする場合はリアクション項目の「編集」リンクから。ボタンのテキストはコンマで区切って(例:「優,良,可,否」)、「保存」リンクを押します。
ということで、ご自分のブログにもぜひどうぞ。
カスタマイズされたテンプレートの場合
といいながら、このやり方だけだと Blogger 標準のテンプレート以外の場合に、うまく導入できないことがあるようです。そういうときには、こちらの記事を参考にするとよさそうです。
一応やり方だけ抜き出してみるとこんな感じ。
2.テンプレートコードの中から
※
実はこの「リアクション」機能自体は、今年の 8 月に Blogger in Draft に登場し、11 月に Blogger に正式採用となっています。
前から機能の存在は知っていたんですが、クリボウも実際に動作しているのを確認したのは、この Blogger Buster の記事の内容を試してから。
というわけで、随分紹介が遅くなってしまったんですが、リアクション機能を諦めかけていた人もぜひお試しください。
ブログのサイドバーに、コメントをくれたユーザーのリストを表示するウィジェットが公開されています。
このウィジェットでは、コメントの多い順でユーザー名が表示され、リンクからそのユーザーの最新コメントにジャンプできるようになっています。
「クリボウの写真日記」のデータで作ってみると、こんな感じ。

ウィジェットの追加は、こちらのページからどうぞ。
kuribo-photo.blogspot.com)、「Customize」→「Add to Blog」と順にボタンを押すと、Blogger の「ページ要素を追加」画面が開きます。あとはそこから、「ウィジットを追加」ボタンを押すだけで、ウィジェットの追加が完了。
フォームの「Filter your name」欄に自分の Blogger ユーザー名を入力して、リストから自分の名前をはずすことも可能です。
このウィジェット、「Recent Comments」リストのそばに置くのもよさそうです。ということで、ぜひおためしくださーい。
Blogger in Draft に予約投稿の機能が登場しました。

Draft でない現行の Blogger はというと、未来のタイムスタンプのついた投稿が、「投稿を公開」ボタンを押したその時点で公開されるようになっています。後から投稿を追加しても常にブログの最初に表示されるため、これをヘッダーのように使っている人もいますね。
同じことを Blogger in Draft でする場合には、現在の日時で投稿を公開した後に、編集で未来の日時を指定します。つまり、公開中の投稿の日時を変更しても、投稿日時の情報が変わるだけで、予約投稿の対象にはならないということ。
それでは公開された投稿を再び予約投稿にするには?という疑問がわくと思うんですが、その場合は投稿を一度下書きの状態に戻します。いつ使うか分かりませんが…、このやり方は覚えておくといいかもしれませんね。
追記 2008-05-06
ひと月半かかって、この予約投稿機能は Blogger に正式採用されました。
Blogger in draft で実験的に公開されていた「Video Upload」機能が、無事 Blogger に採用になりました。これにより、わざわざ Blogger in draft を開かなくても、Blogger の新規投稿画面や投稿編集画面から、そのままビデオのアップロードができるようになりました。
Blogger に貼り付けられる動画プレイヤーの幅は 320 ピクセル。デジカメなどで指定可能なら 320 x 240 ピクセルの画面サイズで最初から撮っておいた方が、きれいに表示できるようです。上記の例だと、「シオカラトンボ(動画)」だけ 640 x 480 ピクセルで上げ、その他は 320 x 240 ピクセルで上げています。
クリボウも、ブログで動物の動きを見てもらうのにビデオが重宝しているんですが、フォトログに貼り付けてみたり、ビデオブログ(Vlog?)を立ち上げてみたりと、ビデオがアップロードできるようになっただけでも、随分ブログの楽しさが増すと思います。そんなわけで、ビデオアップロード機能、ぜひぜひお試し下さい。
ちなみに、エンクロージャリンクについてはまだ Blogger に正式採用されていないようです。(Blogger から投稿した「カルガモ(動画)」だけ、エンクロージャリンクがフィードにありません。)ビデオアップロード機能を使ってすでにビデオポッドキャストブログを運営している方は、まだしばらく Blogger in draft から記事を投稿した方がよさそうですね。
参考:
Blogger ユーザーには Flickr で写真を公開している人も多いように思います。かくいうクリボウも利用者なんですが、今日はこの Flickr から Blogger beta への写真投稿が便利になりました、というニュースです。
クリボウはブログに写真を載せないつもりなんですが、フォトログをつけている人なんかはこの機能、便利だろうなと思います。
ところで、Flickr というと現在 Yahoo! が運営しているサービスですよね。Blogger beta に対応したからといって、Google のブログサービス Blogger の公式ブログで、喜んで紹介していていいのか、というツッコミが海外のブログでありました。
それより Picasa のアップグレードを急ぐべきじゃないの、と。そう言われてみるとそうですね…。
