Google Blogger で関連記事（Related Posts）を表示させるスクリプトやガジェットには大まかに２つの流れがあるようで、その１つが「Google Blogger の複数ラベルが表示できる関連記事スクリプト」で紹介した Json Feed を利用した Related Posts by Labels。もうひとつの流れが Google Jsapi (Google AJAX API) を利用した今回ご紹介するパターンです。
Blogger Related Posts Service で紹介されていて、たった３行のコードを挿入するだけで関連記事が表示できると言うスグレモノです。
問題が１つあります。ラベルが変更できません。
（追記：2009年8月5日現在、関連記事ラベルの日本語表示のやり方について訂正及び補足がありますので併せてご覧ください。
「[訂正] Appspot.com の３行コード関連記事表示はラベル変更可能」）
解説を読む限りでは window.brps_options にラベルのパラメータを追加することで日本語のラベルにも変更できるとありますが、やってもデフォルトの Related Posts が出力されるばかり。
Tech系の日本語ブログであれば Related Posts と表記されてもあまり違和感がないのですが、日記系のごく普通の日本語ブログに突然英語表記が出てくると違和感があります。
コードはいじくれないので、別の方法でこの関連記事スクリプトの Related Posts ラベルを日本語の"関連記事"に変更して実装する方法を考えてみました。
Google AJAX API 関連記事の実装
導入は比較的に簡単で２箇所にコードを貼り付けるだけです。最初にオリジナルコードの導入方法、次に Related Posts ラベルを隠して新たな日本語ラベルを追加する場合の導入方法の２パターンを順番に紹介します。
HTMLから以下の記述を検索します。
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
clear for photos floats をキーワードにして探しますが、この記述はは２箇所見つかるはずです。ひとつめは post-header の下の方、もうひとつは jump-link の上の方。
今回のコードを貼り付けるのは、jump-link の上の方です。
上の記述の「直下」に次のオリジナルコードを貼り付けます。
<div id='related_posts'/>
HTMLを一番下までスクロールして次の記述を探します。
</body>
</html>
この「直上」に次のコード２行を貼り付けます。
<script src='http://www.google.com/jsapi'/>
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>
以上で、オリジナルコードの導入は完了です。
このGoogle Jsapi を利用した３行コードのラベルに関しては、例えば SNAPSHOW.COM の "Best Related Posts Widget for Blogger - Show Simlar Articles Below Blog Posts Plugin"で以下のようなオプションが紹介されています。
<script src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
window.brps_options = { "title": "<h2>Hey! Check out my other related posts!</h2>" "max_results": 5 }
</script>
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>
赤文字で示した記述が Related Posts と吐き出されたラベルを変更するパラメータのようですが、これをやってもラベルは変更されませんでした。やり方を間違えているのかもしれません。仕方ないので CSS でそれっぽく見せてしまうというやり方にしました。スタイルシートで Related Posts ラベルを隠す
Related Posts という英語表記のラベルは CSS で 'related_posts' ID の h2を変えてしまえば隠せます。それから新たに追加する漢字表記の「関連記事」を修飾するためのスタイルも追加します。div#related_posts h2 {
font-size:0;
margin:-35px 0 0 0 ;
}
.related_posts_label {
font-size : 14px;
font-weight:bold;
}
CSS上のブロックで、Related Postsのフォントサイズを 0 にします。このままだと新たに追加する関連記事という記述と記事のリストの間のスペースが広すぎるので、margin で 35px ほど上に引き上げます。この数値は導入する Bloggerテンプレートによって異なるので適切に変更します。
CSS下のrelated_posts_labelクラスは追加する漢字の「関連記事」ラベルの修飾です。
14pxの太字にしましたが、これもお好みで変えてください。
これをHTMLのスタイル定義部分に貼り付けておきます。
結果、オリジナルでは１行だった最初のコードが下記のようになります。
<b:if cond='data:blog.pageType == "item"'>
<div class='related_posts_label'>関連記事</div>
<div id='related_posts'/>
</b:if>
貼り付ける場所に依存しますが、このブログのように記事中の最後（時刻、ラベルの直上。但しデフォルトの場合）に設置するときはオリジナルで示した位置に挿入します。この位置だと記事ページ（pagetype が item）以外のときも関連記事のラベル文字が表示されてしまうので、「個別記事が表示されたときだけ」という条件を追加しています。
それから、新たな日本語表記の関連記事の文字をCSSで指定した related_poss_label クラス付きで追加します。最後にオリジナルのコード１行。
HTML最後にオリジナルと同じスクリプト２行も忘れずに追加します。
オリジナルコードの導入方法の解説を読むと、最初にサイドバーガジェットを追加して、それを記事下に移動して・・・と書かれているのですが、そのガジェットのコードと上記（オリジナル）でHTMLに追加するコードが重複するので、何のためにガジェットでコード追加をしているのか理由が分かりませんでした。
従い、ここではSNAPSHOTに書かれているようなガジェットの追加は割愛しています。もしかすると、がジェットの追加を省略しているのでラベル変更のパラメータが効かないのかなと考えました。が、オリジナル手順のやり方でも変更できませんでしたから、日本語のラベル表示はこんなやり方で表示されていればいいや的な解決方法でした。
0 comments:
コメントを投稿