2010年10月16日土曜日

デザイン変更中:経過3

スポンサーリンク

Bloggerのデザインの変更過程その3です。

前回に引き続き、忘備録的に。

今回は課題は最終的に妥協をしてしまいました。


Bloggerにはてなブックマークのボタンを付ける


Bloggerにはてなブックマークを付ける方法はいろいろなところで説明されています。

はてな自体が説明をしているページもありますが、情報が古く、そのままでは使えません。
具体的には、< >の中に< >がある為にエラーになるようです。

参考サイト

今回参考にさせて頂いたのは、下記のサイト様です。
感謝。


実際のコード

実際には下記のコードを書き込みました。
ブックマーク用のアイコンは事前に用意し、必要な場所にアップロードしておく必要があります。


<a expr:href='"http://b.hatena.ne.jp/append?" + data:post.url'>
<img alt='このエントリーをはてなブックマークに追加' height='画像の高さ' src='はてブの画像へのパス' style='border: none;' title='このエントリーをはてなブックマークに追加' width='画像の幅'/>
</a>


ブックマーク数を表示する場合には、以下のコードを書き込みます。


<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'>
<img alt='このエントリーを含むはてなブックマーク' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' title='このエントリーを含むはてなブックマーク'/>
</a>


サイドバーにはてなブックマークを付ける


このコードをBloggerの「ページ要素」で追加できる「ガジェットを追加」に記入しても作動しません。
実装するには、下記の対処法が必要になります。

尚、対処法は「Blogger カスタマイズ情報ブログ」のChocoさんに教えて頂きました。

ありがとうございます!

準備

「ガジェットを追加」でサイドバーに「HTML/Javascropt」を追加します。

中身は何を入れていてもかまいません。
今回は>p<を入れました。

「HTMLの編集」で必要な箇所を探す

「HTMLの編集」に移動し、「ウィジェットのテンプレートを展開」にチェックをいれて展開します。

その後、サイドバーの部分であるglt;b:section-contents id='sidebar-right-1'>を探します。

続いて、その下に「ページ要素」での並び順通りにウィジェットを出力する為のタグが並んでいますので、先ほど追加したウィジェットの部分を探します。

ソースを追加する

見つけたら、下記のソースを探します。


<div class='widget-content'>
<data:content/>
</div>


このソースの中のglt;data:content/>を削除し、下記のソースを追加します。


<a expr:href='"http://b.hatena.ne.jp/append?" + data:blog.url'>
<img src="はてブの画像へのパス" />
</a>


ポイント

重要なポイントは以下の2点です。

  • 「ガジェットの追加」で追加した部分を「HTMLの編集」で上書きする
  • data:post.urlではなくdata:blog.urlを使う

尚、この2点をChocoさんに教えて頂いたので実装できました。
重ねてお礼を申し上げます。

結び


以上、今回の覚え書きでした。

画像が用意できればサイトの雰囲気に合ったボタンが使えますので、積極的に画像を変えても面白いと思います。

デザイン重視でも、実用性重視でも、自由に出来ます。

スポンサーリンク

2 件のコメント :

  1. こんにちは。
    いつも楽しく拝見していてます。

    解決策になるかはわかりませんが、「data:post.url」を「data:blog.url」に変更して、[HTML の編集]から追加するとうまくいくみたいです。

    「post.url」は、投稿エリア(ブログの投稿)だけに使えて、
    「blog.url」は、ブログ全体(グローバルに利用可能なデータ)に使えるみたいです。

    返信削除
  2. こんにちは。

    と、言いますか、お世話になってます!
    見て頂けてとても嬉しいです。


    なるほど、タグ自体の問題だったのですね。

    ChocoさんのブログからBloggerのレイアウトを知り見るようになっていたのですが、基本的なところを理解していなかったのですね...。

    ありがとうございます!

    ....作業中....

    できました...。

    おお!これが出来ると言う事は、他にもできる!

    早速記事を修正します。

    重ね重ね、ありがとうございました!

    返信削除