意外にもろい。Bloggerのテンプレートデザイナ

#Blogger .

ブログのデザインを変えてみました。Bloggerでも、テンプレートデザイナを使えば、CSS部分を直接編集することなく、かなり細かくデザインのカスタマイズができるようです。
ただし、これ、十分注意してくださいね。どうやら、テンプレートデザイナを使い続けるためには、絶対にHTMLを直接触ってはいけないようです。

JS-Kitの周辺、ちょっとだけ修正しました

トラックバック機能を付けるために、JS-Kit-Commentsを導入したのですが、元々のBloggerのテンプレートを参考に我流でテンプレートを書き換えていたために、ちょっと勘違いをしていたようです。

修正前は、トップページ以外でトラックバック用のURLを表示して、コメントを展開するようにしていました。しかし、これでは、トップページの一番下「前の投稿」から2ページ目に移ったり、ラベルをクリックして、同一ラベルの記事を表示すると、間違ったトラックバック用URLを表示して、コメントを展開すべきでないところで展開していました。

この問題は、本来はじめに気づくべきでしたが、そこまで気が回らず、記事が増えてきてやっと気づきました。

そこで、1行だけ修正して、1記事だけを表示したときにトラックバック用URLを表示して、コメントを展開するように修正しました。

修正箇所は、<b:if>タグの分岐条件です。

【修正前】
<b:if cond='data:blog.url == data:blog.homepageUrl'>

これを、

【修正後】
<b:if cond='data:blog.url != data:post.url'>

このように修正しました。

以下に、修正済みのコードを載せておきます。使い方は、以前のブログを参照願います。

<!-- js-kit-comments 090422 --> <!-- js-kit-comments 090531修正 --> <hr/> <b:if cond='data:blog.url != data:post.url'> <!-- 1記事以外 --> <a expr:href='data:post.url + &quot;#js-kit-junp&quot;'>&#12488;&#12521;&#12483;&#12463;&#12496;&#12483;&#12463;</a><br/> <a expr:href='data:post.url + &quot;#js-kit-junp&quot;' style='text-decoration: none;'><img align='middle' alt='' hspace='0' src='http://www.blogblog.com/rounders/icon_comment.gif' style='border: 0px solid ; width: 12px; height: 12px;' vspace='0'/> </a> <a expr:href='data:post.url + &quot;#js-kit-junp&quot;'><span class='js-kit-comments-count' expr:path='&quot;/&quot; + data:post.id'>0</span> &#12467;&#12513;&#12531;&#12488;</a> <script src='http://js-kit.com/comments-count.js' type='text/javascript'/> <b:else/> <!-- Post Page --> <!-- TrackBack --> <div style='text-align: left;'>&#12488;&#12521;&#12483;&#12463;&#12496;&#12483;&#12463;URL<br/> <script type='text/javascript'> (function(){ var UrlData = &quot;<data:blog.url/>&quot; ; var UrlBody = UrlData.substring(7); var TrackBackUrl = &quot;http://js-kit.com/trackback/&quot; + UrlBody ; document.write(&quot;&lt;input style=&#39;WIDTH: 400px&#39; type=&#39;text&#39; name=&#39;TBTextArea&#39; value=&#39;&quot;); document.write(TrackBackUrl); document.write(&quot;&#39; onclick=&#39;this.focus(); this.select();&#39; readonly=&#39;readonly&#39; /&gt;&quot;); })() </script> </div> <!-- /TrackBack/ --> <br/> (<span class='js-kit-comments-count' expr:path='&quot;/&quot; + data:post.id'>0</span> &#12467;&#12513;&#12531;&#12488;) <script src='http://js-kit.com/comments-count.js' type='text/javascript'/> <!-- comment --> <span id='js-kit-junp'/> <div class='js-kit-comments' expr:path='&quot;/&quot; + data:post.id'/> <script type='text/javascript'> (function(){ // making the comment feed path var HomepageUrl = &quot;<data:blog.homepageUrl/>&quot; ; var SiteName = HomepageUrl.substring(7); var CommentAreaId = &quot;<data:post.id/>&quot; ; document.write(&quot;&lt;a href=&#39;&quot;); document.write(&quot;http://js-kit.com/rss/&quot; + SiteName + CommentAreaId ); document.write(&quot;&#39; style=&#39;text-decoration: none; margin-right: 10px&#39;&gt;&quot;); document.write(&quot;&lt;img align=&#39;middle&#39; alt=&#39;&#39; hspace=&#39;0&#39; src=&#39;http://js-kit.com/images/rss-icon.png&#39; style=&#39;border: 0px solid ; width: 12px; height: 12px;&#39; vspace=&#39;0&#39;/&gt;&quot;); document.write(&quot; Comments for this post&lt;/a&gt;&quot;); document.write(&quot;&lt;a href=&#39;&quot;); document.write(&quot;http://js-kit.com/rss/&quot; + SiteName ); document.write(&quot;&#39; style=&#39;text-decoration: none; margin-right: 10px&#39;&gt;&quot;); document.write(&quot;&lt;img align=&#39;middle&#39; alt=&#39;&#39; hspace=&#39;0&#39; src=&#39;http://js-kit.com/images/rss-icon.png&#39; style=&#39;border: 0px solid ; width: 12px; height: 12px;&#39; vspace=&#39;0&#39;/&gt;&quot;); document.write(&quot; All comments&lt;/a&gt;&quot;); })() </script> <script src='http://js-kit.com/comments.js' type='text/javascript'/> <!-- /comment/ --> </b:if> <!-- /js-kit-comments/ -->

[関連リンク]
Bloggerでトラックバックを受け取る方法
JS-Kit-Comments:カウント表示できるようになりました
レイアウト用ページ要素タグ - Blogger ヘルプ
レイアウト用ウィジット タグ - Blogger ヘルプ
レイアウト データ タグ - Blogger ヘルプ

JS-Kit-Comments:カウント表示できるようになりました

先日、Bloggerにトラックバック機能を付けるために、JS-Kit-Commentsを導入するにあたり、コメント数のカウントがうまく出来ないということを少し書きましたが、（先日のブログ）原因は、私のちょっとした勘違い＆思い込みであったことがわかりました。

JS-Kitのページでは、設定や管理の説明やFAQがあちこちに散在しているため、ついついイライラして勘違いをしていたようです。

勘違いの内容は、コメントやトラックバックの管理をするためのスクリプト、“http://js-kit.com/comments.js”のほかに、“http://js-kit.com/comments-count.js”というスクリプトがあることに気づかず、dviタグやspanタグの中のclass定義を“comments.js”が自動で認識してくれるのだと思い込んでいました。

JS-Kitでは、サポートは有料とのことで、JS-Kit内の掲示板に質問を書き込んでも、何の音沙汰もありません。たまたまその掲示板を読んだほかのユーザーが、答えを持っていれば書き込んでくれるかもしれませんが、たいていは放置されたままです。仕方なく、イライラしながらサイト中をクリックしまくって散在している細切れの情報をつなぎ合わせながらスクリプトを書いていくしかありません。

しかし、捨てる神あれば拾う神あり。JS-KitのまとめWikiというものがありました。“http://wiki.js-kit.com/”ここのJS-Kit Comments 管理ガイドをつらつらと眺めているときに、おや？、スクリプトが違う？ と……

以下に、コメントカウント機能を入れたコードを載せておきます。使い方は、先日のブログを参照願います。

<!-- js-kit-comments 090425 --> <hr/> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- Top Page --> <a expr:href='data:post.url + &quot;#js-kit-junp&quot;'>&#12488;&#12521;&#12483;&#12463;&#12496;&#12483;&#12463;</a><br/> <a expr:href='data:post.url + &quot;#js-kit-junp&quot;' style='text-decoration: none;'><img align='middle' alt='' hspace='0' src='http://www.blogblog.com/rounders/icon_comment.gif' style='border: 0px solid ; width: 12px; height: 12px;' vspace='0'/> </a> <a expr:href='data:post.url + &quot;#js-kit-junp&quot;'><span class='js-kit-comments-count' expr:path='&quot;/&quot; + data:post.id'>0</span> &#12467;&#12513;&#12531;&#12488;</a> <script src='http://js-kit.com/comments-count.js' type='text/javascript' /> <b:else/> <!-- Post Page --> <!-- TrackBack --> <div style='text-align: left;'>&#12488;&#12521;&#12483;&#12463;&#12496;&#12483;&#12463;URL<br/> <script type='text/javascript'> (function(){ var UrlData = &quot;<data:blog.url/>&quot; ; var UrlBody = UrlData.substring(7); var TrackBackUrl = &quot;http://js-kit.com/trackback/&quot; + UrlBody ; document.write(&quot;&lt;input style=&#39;WIDTH: 400px&#39; type=&#39;text&#39; name=&#39;TBTextArea&#39; value=&#39;&quot;); document.write(TrackBackUrl); document.write(&quot;&#39; onclick=&#39;this.focus(); this.select();&#39; readonly=&#39;readonly&#39; /&gt;&quot;); })() </script> </div> <!-- /TrackBack/ --> <br/> (<span class='js-kit-comments-count' expr:path='&quot;/&quot; + data:post.id'>0</span> &#12467;&#12513;&#12531;&#12488;) <script src='http://js-kit.com/comments-count.js' type='text/javascript' /> <!-- comment --> <span id="js-kit-junp"></span> <div class='js-kit-comments' expr:path='&quot;/&quot; + data:post.id'/> <script type='text/javascript'> (function(){ // making the comment feed path var HomepageUrl = &quot;<data:blog.homepageUrl/>&quot; ; var SiteName = HomepageUrl.substring(7); var CommentAreaId = &quot;<data:post.id/>&quot; ; document.write(&quot;&lt;a href=&#39;&quot;); document.write(&quot;http://js-kit.com/rss/&quot; + SiteName + CommentAreaId ); document.write(&quot;&#39; style=&#39;text-decoration: none; margin-right: 10px&#39;&gt;&quot;); document.write(&quot;&lt;img align=&#039;middle&#039; alt=&#039;&#039; hspace=&#039;0&#039; src=&#039;http://js-kit.com/images/rss-icon.png&#039; style=&#039;border: 0px solid ; width: 12px; height: 12px;&#039; vspace=&#039;0&#039;/&gt;&quot;); document.write(&quot; Comments for this post&lt;/a&gt;&quot;); document.write(&quot;&lt;a href=&#39;&quot;); document.write(&quot;http://js-kit.com/rss/&quot; + SiteName ); document.write(&quot;&#39; style=&#39;text-decoration: none; margin-right: 10px&#39;&gt;&quot;); document.write(&quot;&lt;img align=&#039;middle&#039; alt=&#039;&#039; hspace=&#039;0&#039; src=&#039;http://js-kit.com/images/rss-icon.png&#039; style=&#039;border: 0px solid ; width: 12px; height: 12px;&#039; vspace=&#039;0&#039;/&gt;&quot;); document.write(&quot; All comments&lt;/a&gt;&quot;); })() </script> <script src='http://js-kit.com/comments.js' type='text/javascript'/> <!-- /comment/ --> </b:if> <!-- /js-kit-comments/ 090425 -->

[関連サイト]
JS-Kit Community Wiki
JS-KitがコメントシステムサービスのHaloScanを買収
【JS-Kit.Com】簡易コメント欄がコピペするだけで簡単に設置可能
JS-Kit+bloggerでtrackback機能を無理やり作ってみる
Bloggerに無いTrackback（トラックバック）機能を実装したい・・

Bloggerでトラックバックを受け取る方法

Bloggerは、ひとつのアカウントで複数のブログが管理できたり、ブログごとに別のアドレスが設定できたり、商業利用にも特別制限が無かったりと、何かと便利で都合のいいシステムで、その気になれば、テンプレートを丸ごと入れ替えたり、フィードを自分の好きなサーバーに設定できたり、好き放題のカスタマイズも出来てしまう上に、しかも無料という、ほぼ完璧なブログサービスなのですが、残念ながらどういうわけか、そのままではトラックバックを受け取ることができません。

トラックバックがブログにとって必須というわけではありませんが、誰かが自分のブログを引用した後に、トラックバックpingを打ちたいと思っても打てないというのは、なんとなくさみしいような気がします。

インターネットで"Blogger トラックバック"などのキーワードで検索すると、いくつかのページにヒットします。それらのページを参照すると、フリーのHaloScanというシステムを組み込むと、Bloggerでトラックバックが受けられると書いてあります。かなり細かくコードの埋め込み方を書いているページもありますが、実は、HaloScanは、JS-Kit.Com.に買い取られ、JS-Kitの各種ツール群の中のJS-Kit-Commentsとして、コメントの統合管理環境の位置づけになっているようです。

Bloggerへの導入方法も今は、HaloScanの頃とは変わっていて、簡単にWeb上の指示に従うだけで導入できる仕組みが出来ています。どうやら、Bloggerにあるテンプレートを使っているノーマルユーザーはこれで簡単にトラックバックが受け取れるようになるみたいです。

しかし、この手順に従ってテンプレートをバッチ処理しただけでは、トラックバック用のURLが表示されません。しかも、トラックバックをサポートしている旨の記述はいたるところにあるのですが、設定のためのドキュメントが、JS-Kit.Com.のサイトの中にバラバラに散在していて、どんなURLにpingを打ってもらえばいいのかを見つけるのに一苦労です。（ここにあります）

しかも、このブログのように、標準でないテンプレートを使っていたり、もう少しかっこよく導入したいと思うと、テンプレートを直接編集することになります。

そこで、できるだけ簡単にかっこよく、それっぽい感じでBloggerにJS-Kit-Commentsを導入する手順下記にまとめておきます。

1. まず、 Bloggerのダッシュボードから設定したいブログの「レイアウト」タブをクリックして、メニューの中の「HTMLの編集」をクリックします。
2. 「テンプレートをすべてダウンロード」をクリックして、テンプレートをダウンロードします。
3. 次に、ダウンロードしたテンプレートを適当なエディタで開き、“<b:includable id='post' var='post'>を探します。
4. これとペアになっている“</b:includable>”を探します。検索で次に出てくる“</b:includable>”です。
5. そこから、上に“</div>”を２つ上ったところに下記のコードを埋め込みます。
   <!-- js-kit-comments 090422 --> <hr/> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- Top Page --> <a expr:href='data:post.url + &quot;#js-kit-junp&quot;'>トラックバック</a><br/> <a expr:href='data:post.url + &quot;#js-kit-junp&quot;' style='text-decoration: none;'><img align='middle' alt='' hspace='0' src='http://www.blogblog.com/rounders/icon_comment.gif' style='border: 0px solid ; width: 12px; height: 12px;' vspace='0'/></a> <a expr:href='data:post.url + &quot;#js-kit-junp&quot;'> コメント</a> <b:else/> <!-- Post Page --> <!-- TrackBack --> <div style='text-align: left;'>トラックバックURL<br/> <script type='text/javascript'> (function(){ var UrlData = &quot;<data:blog.url/>&quot; ; var UrlBody = UrlData.substring(7); var TrackBackUrl = &quot;http://js-kit.com/trackback/&quot; + UrlBody ; document.write(&quot;&lt;input style=&#39;WIDTH: 400px&#39; type=&#39;text&#39; name=&#39;TBTextArea&#39; value=&#39;&quot;); document.write(TrackBackUrl); document.write(&quot;&#39; onclick=&#39;this.focus(); this.select();&#39; readonly=&#39;readonly&#39; /&gt;&quot;); })() </script> </div> <!-- /TrackBack/ --> <br/> <!-- comment --> <span id="js-kit-junp"></span> <div class='js-kit-comments' expr:path='&quot;/&quot; + data:post.id'/> <script type='text/javascript'> (function(){ // making the comment feed path var HomepageUrl = &quot;<data:blog.homepageUrl/>&quot; ; var SiteName = HomepageUrl.substring(7); var CommentAreaId = &quot;<data:post.id/>&quot; ; document.write(&quot;&lt;a href=&#39;&quot;); document.write(&quot;http://js-kit.com/rss/&quot; + SiteName + CommentAreaId ); document.write(&quot;&#39; style=&#39;text-decoration: none; margin-right: 10px&#39;&gt;&quot;); document.write(&quot;&lt;img align=&#039;middle&#039; alt=&#039;&#039; hspace=&#039;0&#039; src=&#039;http://js-kit.com/images/rss-icon.png&#039; style=&#039;border: 0px solid ; width: 12px; height: 12px;&#039; vspace=&#039;0&#039;/&gt;&quot;); document.write(&quot; Comments for this post&lt;/a&gt;&quot;); document.write(&quot;&lt;a href=&#39;&quot;); document.write(&quot;http://js-kit.com/rss/&quot; + SiteName ); document.write(&quot;&#39; style=&#39;text-decoration: none; margin-right: 10px&#39;&gt;&quot;); document.write(&quot;&lt;img align=&#039;middle&#039; alt=&#039;&#039; hspace=&#039;0&#039; src=&#039;http://js-kit.com/images/rss-icon.png&#039; style=&#039;border: 0px solid ; width: 12px; height: 12px;&#039; vspace=&#039;0&#039;/&gt;&quot;); document.write(&quot; All comments&lt;/a&gt;&quot;); })() </script> <script src='http://js-kit.com/comments.js' type='text/javascript'/> <!-- /comment/ --> </b:if> <!-- /js-kit-comments/ 090422 -->
   
6. 適当な名前でセーブします。
7. Bloggerに戻って、このファイルを「レイアウト」タブの「HTMLの編集」から、アップロードします。

手順としては以上です。

これで、各ページにトラックバックURLが表示されたと思います。

ただ、この方法では、コメント同期機能が生きないようです。また、コメント数の表示がうまく出来ませんでした。

これらはおいおい、いじくっていこうと思います。

[参照サイト]
クリボウの Blogger 入門: トラックバック
curation2.0: bloggerでトラックバック
にょけ雑記: GoogleBlog(Blogger)におけるTrackBackの方法
クリボウの Blogger Tips: Blogger でもトラックバック - HaloScan
すぐに忘れる脳みそのためのメモ: Blogger にトラックバックを付ける - HaloScan
Somewhere in a Way to Nowhere: Bloggerでトラックバックをできるようにする
無料ブログ比較「ブロガー」Blogger
Google Dance黙示録BLOGGER: Bloggerはトラックバックできない