Google Bloggerのテンプレートは日を追って素晴らしいデザインが登場して目移りしてしまいます。デザインが複雑になったせいなのか、最近特にお気に入りのテンプレートをアップロードしたときにBX-で始まるエラーが多発している気がします。
エラーメッセージにはフォーラムで同じエラーの解決方法が無いかどうか確認できるリンクが表示されるのですが、いまだかつて一度もフォーラムに回答を見たことがありません。
せっかく時間を掛けて探したテンプレートをアップロードして、さてプレビューという段階でエラーになると、結構へこみます。いろいろと試行錯誤、学習した挙句にある方法を試してみたら、きれいにアップロードできるようになりましたので、その方法をご紹介します。
別にどうってこともない方法です。
テキストファイルを直接コピー＆ペーストする方法、XMLファイルをアップロードする方法、両方に共通したBXエラー回避策です。
BXエラーの原因は追加されるガジェットの番号が重複しているからでした
テキストファイルでもXMLファイルでも、テキストエディタで開きます。
既にテンプレートをカスタマイズしいるようなときは、もしかすると既存のIDが２かもしれませんから、そのときは３や４など大き目の数字にするとエラーが回避できると思います。
要するに同じガジェットのIDが重複していたらBXエラーが出るということのようです。
テンプレートによって予め定義されているガジェットは異なりますので、ソースを見て漏れなくIDの数字を変えるようにします。
Blogger テンプレートをアップロードしたときのBXエラーを回避
Bloggerのラベルをラベルクラウド化する方法
Google Bloggerのラベル（Label）は他のブログサービスのタグ（Tag）に相当する文書のフリーキーワードリストです。Bloggerにはカテゴリー（Category）という概念が無いから訪問者が同じトピックの投稿記事を探すときにはラベルに頼ることになります。そこで投稿記事を探しやすくするためにラベルをたくさん付けることになるのですが、そうなるとサイドバーのラベルの欄がやたらと縦に長くなってしまいブログ画面のバランスがあまりよくないように見えます。
海外の"phydeaux3"でBlogger用のラベルクラウドを作るコードが紹介されています。これを導入するとタグクラウドと同じようにラベルをクラウド化することができます。
ダッシュボードから「レイアウト」－「HTMLの編集」を開きます。「ウィジットのテンプレートを展開」のティックは不要です。
HTMLコードから次の記述を探します。１箇所しかありません。
]]></b:skin>
この記述の直上に次のコードを貼り付けます。
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
ラベルのガジェットをラベルクラウド用に差し替えます。もしラベルガジェットを追加していない場合は、「ページ要素」で「ラベル」を先に追加しておきます。
HTMLから次の記述を探します。
英語環境設定の場合、titleは英語のLabelで記述されています。
<b:widget id='Label1' locked='false' title='ラベル' type='Label'/>
この<b:widget id='Label1'・・・の行から</b:widget>までがラベルガジェットです。
まずはこの範囲を特定してください。
特定したラベルガジェットを下記のコードで上書きします。
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
以上で必要なコードは追加できました。
次に必要に応じてコードの中で使われている変数を編集し、色やラベルクラウドの文字サイズなどブログデザインに合わせます。
表示するラベルの数
var cloudMin= 1;
この変数でラベルクラウドに表示するラベルの数を決めます。初期値の１は「全ラベル表示」。ここで上限の数値を指定すれば表示数を制限することができます。
表示色と文字サイズ
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
maxFontSizeとminFontSizeで文字サイズを決めます。ちなみにこのブログではMaxFontSizeが20、minFontSizeは12です。
色はRGBで指定します。ブログやサイトデザインでは16進数（FFFFFFなど）が使用されることが多いのでRGB（10進数）はPhotoShopなどのデザインツールを使うか、もしくは「RGB変換」などのサイトで変換します。
記事数の表記
lcShowCount
通常のラベルではラベルの右側に括弧表記で投稿記事数が表示されます。ラベルクラウドでは初期値で記事数は非表示（false）になっています。ラベルを表示したいときには、この値を True に変更します。
フォントと配置
#labelCloud {text-align:center;font-family:arial,sans-serif;}
ラベルクラウドで使用するフォントや配置を決めます。sans-serifが指定されているのでBlogger全体で使用するフォントに特別なものを指定していない限り、変更しなくても本文と同じフォントが選択されるはずです。配置は初期値で「中央揃え」ですが、下記の選択肢からブログデザインに合わせるようにします。
text-align:justify;
text-align:right;
text-align:left;
特に変更しなくても稼動するので変更するのはブログデザインに合わせたいフォントの色と文字サイズくらいでしょうか。もしもっとカスタマイズしたいという場合は、あと若干のカスタマイズ項目がありますので原文を参照してください。
Google AdSenseタグをHTMLエンティティ文字に変換
Google BloggerをカスタマイズしてHTMLを下手にいじくるとエラーが出て保存できないのは、Bloggerがとても厳格な標準化されたXMLを採用しているからです。他社の無料ブログサービスで普通に書いていたHTMLがBloggerには通用しない。タグを閉じ忘れたなど普通のブログサービスプロバイダーは見逃してくれるようなポカもBloggerは見逃してくれない。 And this is the answer Minor edits on Google Adsense Code for Blogger Beta/XML are allowed as long as the resulting Adsense Code generated by Blogger is exactly the same as given from Google Adsense Code Generator.
その意味では同社のGoogle AdSenseタグもBloggerの標準化XMLから照らし合わせるとエラーということになり、記事本体（post）に貼り付けたらエラーで保存できないわけです。これはアドセンスタグが貼り付けられないのではなく、アドセンスタグに使われている括弧記号などがHTMLエンティティ文字ではないために弾かれているということです。HTMLエンティティ文字に変換すれば、記事中にAdSense Tagを貼り付けられます。
Google AdSenseタグをHTMLエンティティ文字に変換してみます。
これが通常のAdSense Tag。このままHTML編集画面から貼り付けたらエラーになります。
左括弧 < → &lt;
右括弧 > → &gt;
引用符 " → &quot;
この３種類を変換すればBloggerのHTMLの中に自由に貼り付けることができますし、アドセンス広告が表示されます。
さて、アドセンスコードをHTMLエンティティ文字に変換することは、Google AdSenseプログラムポリシーに違反するかどうかが大変に気になります。
Blogcrowdsのフォーラムに「Google Adsense In Blogger Beta XML Update」というスレッドがあります。ここにアドセンスタグをHTMLエンティティ文字に変換したらプログラムポリシー違反になるかについてAdSenseチームからのひとつの回答が掲載されています。
AdSense Teamとの２回ほどのやり取り（再確認）で最終的には次のような結論に至ります。
Blogger Betaで若干の修正は認めます。但し、広告のサイズやフォントの変更、Ads by Googleのロゴを隠す目的でコードを変更することは許可されません。
Second Email Response wrote:
Hi,
To clarify, while you are permitted to make minor edits in Blogger Beta, to allow the ad implementations to function properly, you are not permitted to alter the code for the purposes of changing size, font or hiding the Ads by Google logo.
Thanks for your understanding.
Sincerely,
The Google AdSense Team
つまり、HTMLエンティティ文字変換されたアドセンスタグがWeb上に表示されたときに、ブラウザのメニューから「ソースを表示」してみます。そのソースに表記されているアドセンスタグと、管理ページで生成される広告コードとがまったく同じであれば問題は無いということです。
ここにご紹介したHTMLエンティティ文字変換をしてBloggerのHTMLに広告を貼り付けるという方法「単独」ではGoogle AdSenseプログラムポリシー違反には相当しませんのでご安心ください。もちろんタグを貼り付ける場所によってはプログラムポリシー違反になりますのでご注意ください。
Bloggerに「続きを読む」を追加する
Google Bloggerのテンプレートには「続きを読む」がありません。海外のブログを見ていると続きを読む（Read More, View More）は特に主流という感は無く、もしかするとあれは日本固有のものなのかなと思えなくもありません。しかし、日本のブログサービスのテンプレートに慣れてしまうと、Bloggerでやるべきかやらざるべきかは別にして、何故か「続きを読む」で投稿記事を２つに分割してみたくなります。
「続きを読む」の実装は考えるほど難しくありません。テンプレートのHTMLにコードを２箇所追加し、新しい記事を作成するときに spanタグで記事を２分割してあげるだけです。
ステップ１：スタイルシートの追加
ダッシュボードの「レイアウト」から「HTMLの編集」を開きます。
</head> の記述を探します。この直前（<head>と</head>の間であれば何処でも）に次のスタイルの定義を貼り付けます。
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
ステップ２：HTMLの投稿記事部分（post）に続きを読むで記事を分割するコードを貼り付けます。
「ウィジットのテンプレートを展開」をティックしてHTMLを展開しておきます。
投稿記事（post）部分に相当する次の記述を探します。
<p><data:post.body/></p>
</b:if>
この </b:if> 直下にを次のコードを追加します。
<p style='clear: both;'><a expr:href='data:post.url' rel='nofollow'>…続きを読む&raquo;</a></p>
</b:if>
…続きを読む&raquo; の記述は好みに合わせて変えてください。但し、この例のように記号を使う場合はHTMLエンティティ文字に変換しないとエラーになりますから注意します。HTMLエンティティ文字については「BloggerにAddClipsボタンを貼り付ける」を参照して下さい。
ステップ３：投稿記事を書く
投稿記事を書くときに、記事中に次のコードを貼り付けます。
</span>
<span class="fullpost"> と </span> の間に書かれた文書が「続きを読む」で展開されて始めて表示される記事になります。
毎回これをコピペするのは大変ですし、私は<span style="fullpost"> と書いてしまい記事が分割できずにずいぶん悩みました。 spanタグには反射的に style と続けてしまうのです。
こういった間違えを回避するために「投稿テンプレート」にこの２行をコピペしておくようにします。
ダッシュボードの「設定」－「フォーマット」を選択し、「投稿テンプレート」上記の fullpostの２行をコピペします。これで新しい投稿記事を作成するときには常にこのfullpostの記述が予め入力されている状態で開くことになります。
この投稿記事内に書くspanタグですが、執筆段階では「プレビュー」をすると消えてなくなることが確認されています。なるべくプレビューはしないようにしていますが、とりあえずプレビューで消えてしまったときには直ぐに追加できるように記述を覚えておくか、IMEの辞書登録をしておくなりしたほうがよさそうです。
Titleタグのブログ名と記事名の順番を入替える（その２）
「Titleタグのブログ名と記事名の順番を入替える」で、タイトルバーに表示される「ブログ名＋投稿記事タイトル」の順番を入替えて「投稿記事タイトル＋ブログ名」にする方法をご紹介しましたが、こちらのコードのほうがベターかもしれません。
前回ご紹介したTitleタグのコードはこちら。
例えば、「12月2008 » Google BloggerブログHacks Tips Tweaks」のように。
BloggerにAddClipsボタンを貼り付ける
ソーシャルブックマークとRSSが１つのボタンで登録できるAddClipsは便利なツールです。しかし、Blogger用を選択したにもかかわらず、生成されたコードをBloggerに貼り付けるとAddClips IDのエラーになってしまうことがあります。エラー無く正しく稼動させるためには少しコードを修正する必要があるようです。
AddClipsの指示通り、ボタンを貼り付ける場所はタイトル下、記事の上ですが、ここに表示させるためにはBloggerのHTMLの中に貼り付けることになります。しかし、BloggerのHTML内で<や>などの記号はエラーで認識できませんから、これをエンティティコードに変換することになります。
ところが全部を変換してしまうとエラーになってしまいます。
とりあえずエンティティ文字に置換したAddClipsのコードは次の通り。
私はHTMLエンティティ文字の変換にMicrosoft FrontPageを使っています。コードを貼り付けてそれをHTMLソースで見るとエンティティ文字に変換されています。こういったアプリケーションを使わなくてもエンティティ文字へ変換してくれる無料ツールが使えますのでご利用ください。Google Bloggerにコードを貼り付けるときは、エンティティ文字への変換が必須になります。
Bloggerテンプレートのh2とh3タグの編集
Hタグ（Headings Tag）は編集したほうが良いです。Google Bloggerのテンプレートに限らず、どのブログサービスプロバイダーが提供する公式テンプレートを見ても、h1は「ブログ名」、h2は「記事の投稿日付」、h3が「投稿記事タイトル」になっていることが多いのは何故でしょうか？
「記事の投稿日付」よりも「投稿記事タイトル」のほうが重みがあるはず。それが証拠にユーザが作成したSEO対策済みのテンプレートはh1が「ブログ名」、h2が「投稿記事タイトル」、h3はあったり無かったりになっています。hタグで見出し３を作らないのはブログ全体のキーワード分散を避けるためでしょう。
BloggerテンプレートのHTMLでh2とh3のタグを編集してみます。前述のようにh2に「投稿記事タイトル」を割り当て、h3以下の見出しは全て削除します。
この作業は投稿記事を書く前に終えておいたほうが良いです。検索エンジンにインデックスされてしまってからブログの設計要素を変更すると、Yahoo!では検索順位が落ちるとも言われています。新しくBloggerブログを作成したらまず最初にやるようにします。
使用しているBloggerテンプレートでどのようにhタグが使われているか確認するには、HTMLを見る方法、実際に表示されたブログ記事のソースを見る方法があります。私はダミーの記事を１つ作って記事のHTMLソースで確認しています。
h2とh3が出現する順番は、見出しレベルの大きい（数字が小さい）順番に出現しないといけません。記事投稿日付（h2からhなし）と投稿記事タイトル（h3からh2）になりますが、記事投稿日付をh3にしてしまうとh2の投稿記事よりも先にh3が出現してしまいます。そうならないように順番には注意をしてください。
まずスタイルシート部分のhタグを修正します。
ダッシュボードのHTMLの編集画面で「□ ウィジットのテンプレートを展開」のチェックボックスはティックしておきます。
サイドバーの見出しにタイトルに使われているh2の記述を削除します。
次にh4の表記を削除します。
スタイルシートのCommentsのIDからh4を削除すると次のようになります。
スタイルシート部分の編集が終わったら次はHTML部分です。
まずはh4の<h4>表記を<div>に置換します。
h3タグの編集をします。
最後にサイドバーのタイトル見出しに使われていたh2をdivタグに置き換えます。上記で変更した投稿記事タイトル（post-title）は変更しないように注意します。
このテンプレートでは次の２種類のh2タグがありました。
以上でhタグの修正は完了です。
正しくhタグが修正されたか確認するために、住太陽さんの「SEO検索エンジン最適化」の「HTMLタグ利用状況解析」などを利用してください。
日本語環境のBloggerで投稿記事URLを任意に指定する
Google Bloggerの投稿記事のURLは記事のタイトルが引用されています。
言語設定が英語の場合は、そのまま英単語を参照してURLが生成されます。
例えば、投稿記事に"Merry Christomas 2008"というタイトルをつけた場合、URLは次の通り。
http://blogname.blogspot.com/yyyy/mm/merry-christmas-2008.html
言語設定が日本語のときもURL生成のルールは同じですが、２バイトコードの日本語はURLに採用されないようです。例えば、「日本語環境のBloggerで投稿記事URLを任意に指定する」というタイトルにしたときのURLは次の通り。
http://blogname.blogspot.com/yyyy/mm/bloggerurl.html
タイトルで使用した英単語のみが１語にまとめられてURLが生成されます。
また、タイトルにまったく英単語が使われていないときは、次のようにblog-post_nnnn.html（nnnnはユニークな文書番号）となります。
http://blogname.blogspot.com/yyyy/mm/blog-post_nnnn.html
別におかしくないし大したことでは無いのですが、聞くところによるとSEO的にはURLに使われている文字も一応参照されているとか。もし参照されていないとしても、検索エンジンで検索した結果を見た閲覧者が
merry-christmas-2008.htm と blog-post_100.html のどちらのURLに親しみを感じるかといえば、どちらかといえばフレーズになっている前者ではないでしょうか。
日本語言語環境でも同じように英語のフレーズでURLを生成するためは次のような方法を使います。
新しい投稿記事を作成したとき、タイトル欄にその投稿記事を上手に表現している英語のフレーズを入力します。そのとき英単語の間はハイフン"-"を入れるようにします。認識されるタイトルの長さは34バイトのようですから、34バイト以下のタイトルを作ります。
例えば、下記のように。
set-an-unique-blogger-url-in-japanese
これを入力したら[投稿を公開]し、すかさず投稿リストから該当記事を開き下書きで保存します。
ここで時間を空けてしまうと検索エンジンにインデックスされてしまうかもしれないので、この手続きは即効で終わらせます。
下書きから再編集するときに日本語のタイトルに入力しなおしたら完了です。
但し、任意の英語フレーズのURLを生成したところでアクセスが増えるとか、検索されやすくなるかどうかは不明です。単なる自己満足の世界です。
Titleタグのブログ名と記事名の順番を入替える
大抵の無料ブログサービスはテンプレートのTitleタグの初期値で、先に「ブログ名」、次に「投稿記事タイトル」という順番に表示されるように設定されています。従って、ブラウザーのタイトルバーや検索エンジンにインデックスされたときのタイトルは「Google BloggerブログHacks Tips Tweaks ： ブログ名と投稿記事を入替えるTitleタグのカスタマイズ」と表示されます。
検索エンジンで検索されたとき、表示される文字数の制限でブログ名が先に記述されていると肝心の投稿記事タイトルが見えないことがあります。せっかく上位表示されたとしてもクリックされなければ意味がありません。投稿記事タイトルが先に表示されていれば投稿記事の内容が分かりますからクリックされやすいかもしれません。
Google BloggerでTitleに「投稿記事タイトル：ブログ名」と表示されるようにHTMLを編集します。
ダッシュボードから「レイアウト」－「HTMLの編集」を開きます。
HTMLのコードから次の記述を探します。
このコードは個別の投稿記事（post）が開かれたときのみ稼動するTitleタグのカスタマイズです。
ラベルやアーカイブなどでは、従来どおりブログ名が先に表示されます。
主要検索エンジンにインデックスされたときに「タイトルの重複」を少なくするためにも有効だと思います。
Google PicasaからBloggerへ イメージ画像を貼り付ける
Bloggerのイメージ画像の扱いは不便さを感じます。どうしてサイズを小さくしてしまうのでしょう？
「小・中・大」から選べますが、これに「実寸」を加えてもらいたいです。ブログに掲載される画像の著作権管理や他サーバーから貼り付けたイメージ画像を読み込むときのトラフィック管理などなど、理由はあるようですけど。
Bloggerからアップロードしたイメージ画像はGoogle Bloggerと同じアカウントのPicasa内に格納されますから、実寸サイズでイメージ画像を貼り付けるには Picasaから直接貼り付けます。
Bloggerの画像アップロードでイメージを貼り付けた場合は次のようなHTMLコードが挿入されます。
Picasaを起動します。Picasaを持っていない場合はGoogleのホームページから無料でダウンロードしてPCにインストールしておきます。
まずはBloggerの投稿画面から画像イメージをアップロードします（「作成」タブで編集）。
丸印の「画像を挿入」ボタンからアップロードできます。
通常はここで[画像を追加]ボタンで文書中にイメージを挿入しますが、ここでは[キャンセル]ボタンでアップロード画面を閉じます。
PCのプログラムからPicasaを起動して、画面上部のメニューバーの右側にある「ウェブアルバム」をクリックしてブラウザーでPicasaウェブアルバムを表示するか、ブラウザーから直接 Picasaウェブアルバムを開きます。
http://picasaweb.google.co.jp/home
上図のようなウェブアルバムが開きますから、該当のアルバムからアップロードしたイメージ画像をクリックして開きます。
画像を右クリックして画像のURLをコピーします。FireFoxは右クリックしてショートカットメニューから「画像のURLをコピー」 を選択、Internet Explorerの場合は同じくショートカットメニューから「プロパティ」を選択して画像のURLをコピーしておきます。
上図の例のように実寸で貼り付けることができました。
なお、Bloggerテンプレートはイメージ画像の周囲に余白（padding）と枠罫線（border）が入るように指定されていることが多いようです。
スタイルシートでIMG画像のPaddingとBorderを取り去る方法は「本文中に貼り付けた画像の枠罫線（Border）をはずす」を参考にしてください。
