>--> 2005-08 | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

Home > 2005-08

2005-08

Feed2JS を活用する

Posted at: 2005-08-31 8

Feed2JS サイドバーに「最近リンクしてくれた人たち」というのをつけてみました。
ここでは BlogPeople の BlogPeopleTags でつくったリストを Feed2JS のスクリプトで表示させる、ということをしています。

BlogPeopleTags の方でリストを編集すれば、ブログのサイドバーに表示される内容も変更されるので超便利。

BlogPeopleTags に限らず RSS を書き出すものであれば、Feed2JS を利用してページに表示させることができます。

:: H & A :: blog さんのように、はてなブックマークに最近追加したページを表示させるというのも、おもしろいですね。

このような仕組みを導入するには…。

１．コードを生成する
Feed2JS ＞ Build の URL 欄に 表示させたい RSS の URL を入力して Generate JavaScript ボタンを押すと、スクリプトを呼び出すコードが生成されます。Preview Feed ボタンで見た目が確認できるので、色々設定を変えて比べてみるといいと思います。

２．コードを貼り付ける
そのコードを、ブログのテンプレートの表示させたい部分に挿入します。

今やニュース、天気予報ほか様々なものが RSS で配信されています。自分のブログにお気に入りの役立つ情報を貼り付けてみてはどうでしょうか。


追記

@aka さんも記事に書かれているように、Feed2JS の設定では UTF-8 Character Encoding 欄にチェックをしないと日本語がちゃんと表示されないので、ご注意を。

追追記

上記 @aka さんの記事にもコメントとして書いたんですが…。
Feed2JS のサーバーは、反応しないことが結構あって困ります。のでミラーサイトを紹介しているページを載せておきます。それと、サーバーが反応しない時にはそのページ自体も見られないので、ミラーサイトによるミラーサイト紹介も載せておくことにします。ミラーサイトは 10 近くもあるので、好きなのを選んでください。

Blogger 関連リンク集

Posted at: 2005-08-28 Off

ここに、クリボウが利用しているものを中心に、Blogger 関連のリンク集をつくっておきます。

 Blogger 

 ATOM から RSS 
  • 2RSS.com　簡単に RSS を生成。英語。
  • FeedBurner　アカウントをとる必要はあるが多機能。英語。
 ブログランキング 
 ブログリンクリスト 
  • BlogPeople　登録ブログへのリンクをリストにしてくれる。便利ツールも。
  • MyBlogList　上に同じ。登録ブログを表示するリーダあり。
  • BlogRolling　日本語タイトルブログは文字化けするとのウワサ。英語。
 アフィリエイト 
  • AdSense　Google 社のアフィリエイト。テキスト広告が主体。
  • Amazon　本やＣＤ、ＤＶＤなどの商品を紹介するにはこれ。
  • A8.net　多種多様な広告。審査なしで簡単登録。
  • LinkShare　月額報酬１円から。振込み手数料も LinkShare もち。
  • ValueCommerce　ローテーションバナーが特長。審査は厳しい…。
 レンタルサーバー 
 その他 
  • 忍者ツールズ　無料、高機能のアクセス解析。カウンター他も。
  • Technorati　自分のサイトにリンクしているブログを検索。英語。
  • はてな　アンテナ、ブックマーク他、各種便利なサービス。
  • Feed2JS　RSS のデータをページに書き出すスクリプトを生成。英語。
  • FeedSweep　同上。Advanced FeedSweep では細部まで設定可。英語。
  • feed meter　RSS を利用して人気度、更新頻度を表示するパーツ。
  • PageRank　Google の PageRank を表示するパーツ。英語。
  • Logogle　Google 風のロゴを作成するツール。
  • ACR WEB　現在の閲覧者表示、アクセス解析ほか多彩なパーツ。

Bog が懐かしかったりして

Posted at: 2005-08-27 4

「再構築後に出る画面って」で話題にした、管理画面で再構築後に表示される「Bog が公開されました」の文字が、とうとう「Blog」に直されました。

この部分だけ直されたのではなくて、全体的に日本語表記がバージョンアップした様子。ここのところずっと英語表記だったのは、この準備だったようです。

文字の確認「コメントで Word Verification するのだ」で書いた、コメントの文字画像による認証機能も、もう完全に日本語になっているので、導入へのためらいが大分少なくなるかと思います。


feed meter を利用する

Posted at: 2005-08-25 4

RSS feed meter for http://www.kuribo.info今回は Blogger に貼り付ける、おもしろパーツ feed meter について。

上記サイトでブログの RSS の URL を入力するだけで、画像のコードが生成されます。この手軽さが売りなんでしょうね。
表示される画像は、星の数でブログの人気度を、中央のブロックの数で記事の更新頻度をそれぞれ表しています。
また、この画像をクリックすると人気度をもとにしたランキングも表示されます（上位 300 件）。

自分のブログがどれくらいのランクなのか、視覚的にパッとわかるのがもちろんメインですが、Google のロゴのようにたまにデザインが変わるのも、このパーツのおもしろいところです。

ともかく…このメーターを設置して、星の数を増やすこと、ランキングに表示されることを目指して、ブログ運営してみてはどうでしょうか。


追記

上でも書きましたが、feed meter の画像表示・コード生成には RSS が必要です。
みなさんご存知のとおり、Blogger は ATOM のみで RSS を生成してくれないので、FeedBurner や 2RSS.com を利用して ATOM から RSS を生成しておく必要があります。

追追記

ちょっとやってみたんですが、Atom ファイルを指定してもちゃんと人気度、更新頻度が表示されました。ブログ URL は正しく表示されませんが…。

追追追記

Blogger の Atom ファイルにも対応して、ブログ URL も正しく表示されるようになりました。

コメントで Word Verification するのだ

Posted at: 2005-08-21 3

Commentokanomail.com さんの記事を読んで知ったんですが…。

記事へコメントする人に画像上の文字を入力させ認証する機能ができました。

これは自動化されたスパムコメントを防ぐためのもの。この機能の詳細は Blogger Help（英語）に出ています。

この機能はデフォルトでは OFF になっているので、利用する場合には Blogger 管理画面の SETTING → Comments の Show word verification for comments? 欄を Yes にする必要があります。

okanomail.com さんが「普通にコメントする人にとっては余分な手間がかかることに」と書かれていますが、プラスこの英語表記…。
Anonymous だけでも？？？な人がいるのに、この機能を導入するとさらにコメントがつきにくくなる気がします。

やっぱり日本語になってから導入しよっと。
それはそれで、いつになることやら、ですが。

クリボウの都合ばかり書きましたが、スパムコメントで困っている方はぜひぜひどうぞ。


追記 08-26

「いつになることやら」などと書きましたが、コメントの文字画像による認証は、あっという間に日本語になりました。
この機能を導入するには 設定 → コメント の「コメントの投稿者に確認用文字を入力させますか？」欄を はい にしてください。

FLAG? ボタンにご注意

Posted at: 2005-08-20 5

FLAG?Blogger Navbar に新しいボタンが追加されているのにお気づきでしょうか？

この新しい機能は
Flag As Objectionable というそうです。この機能でどんなことができるのかというと…以下のページに詳しく載っています（どちらも英語です）。

クリボウも英語は適当にしかわからないのですが、この新しい「FLAG?」ボタンは、好ましくない、有害なブログを見つけた時にポチッと押すもののようです。そして

This feature allows the blogging community as a whole to identify content they deem objectionable.
この機能によって、ブログのコミュニティ全体でみんなが好ましくないと考えているコンテンツを特定することができます。
Blogger Buzz ＞ Flag As Objectionable?

みんなが好ましくないと考えているコンテンツを特定して…

For more serious cases, such as spam blogs or sites engaging in illegal activity, we will continue to enforce our existing policies (removing content and deleting accounts when necessary).
より重大なケース（スパムブログや非合法サイト）のために、既存のポリシー（必要なときに内容を除去する、アカウントを削除する）を実施し続けます。
When the community has voted and hate speech is identified on Blog*Spot, Google may exercise its right to place a Content Warning page in front of the blog and set it to "unlisted."
コミュニティが投票し、憎しみのスピーチが Blog Spot で特定された時、Google は Content Warning ページをブログの正面に置いて、ブログを unlisted に設定する権利を行使するかもしれません。
Blogger Help ＞ What is the "Flag" button?

…だそうです。なんだか物騒な話にも思えるけれど、いやな思いをせず快適に NEXT BLOG を楽しめるってこと、なのかな？

そんなこととはつゆ知らず「なにこのボタン？」と自分のブログ上でポチポチと「FLAG?」ボタンを押してしまったクリボウなのでした…。

ちなみにこのボタンを Blogger Navbar に表示させるには、ブログを再構築する必要があります。

はてなブックマークではてなポイントを贈ってもらう

Posted at: 2005-08-14 4

今回も宮本さんの九十九式のブログから
はてな投げ銭機能、Bloggerではてな投げ銭機能の両エントリーを読んで、うちでも導入。

はてなのユーザーは、はてなポイントなる換金可能なポイントを、ほかのユーザーに送信することができます（はてなのヘルプ）。

そして最近、気に入ったページをはてなブックマークに追加する際に、そのページの作者にはてなポイントを送信することができるようになりました。

登録されるページが Blogger のようにはてなダイアリー以外の場合は、登録されるページの方に少し準備が必要です。詳細ははてなブックマークのヘルプをご覧あれ。

Blogger の場合
１．はてなユーザーでない場合は、はてなのアカウントをとりましょう。
２．ブログのテンプレートを編集しましょう。
<head> 内に

<rdf:RDF
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:foaf="http://xmlns.com/foaf/0.1/">
<rdf:Description rdf:about="<$BlogURL$>/">
   <foaf:maker rdf:parseType="Resource">
     <foaf:holdsAccount>
       <foaf:OnlineAccount foaf:accountName="あなたのはてなアカウント名">
         <foaf:accountServiceHomepage rdf:resource="http://www.hatena.ne.jp/" />
       </foaf:OnlineAccount>
     </foaf:holdsAccount>
   </foaf:maker>
</rdf:Description>
</rdf:RDF>
を挿入します。

以上で終了です。
これだけでメイン・アーカイブ・アイテムページどのページも、はてなブックマークに追加する際に「このエントリーの作者にポイントを送信する」チェックボックスや、既に登録されている場合は「このエントリーの作者にポイントを送信する」リンクが表示されるようになります。

あとはどこかの奇特な人が、ポイントを送信してくれるのを待つばかりですが、まあいい記事をのんびり書いていれば、いつか送信してもらえるのでは？と思います。

「はてなアンテナに追加」ボタンの表示

Posted at: 2005-08-12 6

はてなアンテナ先日の記事では、はてなブックマークへのリンクボタンの表示について紹介しました。
今回は、はてなアンテナのボタンについてです。はてなアンテナの概要ははてなアンテナってなに？をどうぞ。

ブログをはてなアンテナに登録するボタン このブログをはてなアンテナに追加 は、実は宮本さんの九十九式で使用しているを見つけ、いいなと思ってうちにもつけることにしたのです。

このボタンを表示させるには、テンプレートに次のコードを挿入します。

<a href="http://a.hatena.ne.jp/append?<$BlogUrl$>/" target="_blank"><img src="http://a.hatena.ne.jp/images/append.gif" width="16" height="12" style="border: none;" alt="はてなアンテナに追加" title="はてなアンテナに追加" align="top" /></a>


追記
検索で、この記事を訪れる方も多いかと思います。このブログでは Blogger ブログでのカスタマイズ方法を紹介しています。もし Blogger ブログでない方は、上記コードの <$BlogUrl$> を自分のブログの URL に書き換えて利用してください。

HTML ソースを投稿するために

Posted at: 2005-08-10 2

HTML や JavaScript のコードを記事上で紹介する際、<、>、& を &lt;、&gt;、&amp; と書き換えたり <br /> を各行に加えて投稿しています。

その作業自体はエディターでうりゃ、とやれば済むのだけれど、それも億劫に感じてきたクリボウはこんなものをつくりました。

変換したいコードを上のテキストエリアに入力し、「変換」ボタンを押すと、下のテキストエリアに変換された文字列が表示されます。



注意：　JavaScript をオンにしてご利用下さい。

他にこんなツールがあるかも知れないのだけれど…。

Technorati と はてなブックマーク

Posted at: 2005-08-08 4

okanomail.com さんの記事 を読み、各投稿を参照しているブログを検索するための Technorati へのリンクを、各投稿の最後に張っていたのだけれど…。

Technorati でサイトのルートを検索すれば、以下のページを参照しているブログも全部表示できる模様。そこで、検索用のリンクはトップページに一つだけ置くことにしました。okanomail.com さんもいつからかそうしているようだし。

その代わりに、というわけでもないのだけれど、はてなブックマークへのリンクを各投稿末尾につけました。リンクをクリックするとその投稿をブックマークしているはてなユーザーがわかるというわけ。
Technorati と同様、自分の記事がどれだけ注目されているかの目安になるかな、と。

どうやって設置するかは、はてなブックマークのヘルプの方に書いてあります。クリボウは <a> に target="_blank" だけ加えました。

はてなブックマークちなみに、ちょっと考えてみたんですが、各投稿をブックマークしている人を表示するのではなくて、直接各投稿をブックマークさせるリンクも作成できます。以下はそのリンクを記述するコードです。

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<$BlogItemPermalinkUrl$>" target="_blank"><img src="http://b.hatena.ne.jp/images/append.gif" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" style="border:none;" /></a>


追記
検索で、この記事を訪れる方も多いかと思います。このブログでは Blogger ブログでのカスタマイズ方法を紹介しています。もし Blogger ブログでない方は、上記コードの <$BlogItemPermalinkUrl$> を自分のブログエントリの URL に書き換えて利用してください。

Amazon 画像に効果をつける

Posted at: 2005-08-07 3

今回紹介するのは Amazon 広告画像の効果について、です。

Amazon のアソシエイトに参加している Blogger もいるかと思いますが、実は画像の呼び出し方を工夫すれば、画像が回転したり、文字が描かれたり、影がついたり、値引きシールが張られたり、と色々な効果をつけることができます。

Book Image Book Image Book Image Book Image
注意：　これらの本は、実際には値引きも売り切れもしていません。念のため…。

影、回転がとても便利です。影は全方向、回転は度単位で指定可能。
好きな色・サイズで文字を入れられる機能はおもしろいけれど…何に使おう？

ともかく、効果をつけるには画像の URL につけたい効果のパラメータを加えるだけ。しかも、これをつけてあれをつけてと効果を重ねることも出来ます。

Peek-a-boo comments

Posted at: 2005-08-06 7

まずここをクリックしてみてください。

2 Comments:

  • 表示が変わりましたでしょうか？
  • もう一度同じリンクを押すと、非表示になります。

以前の記事コンディショナルタグとスタイルシートでは、メイン・アーカイブページとアイテムページとで投稿本文の表示される内容を切り替える方法を紹介しました。
今回もスタイルシートを使いますが、今回は同一ページ内でユーザーの操作によって、投稿内容の表示を切り替える方法を紹介します。

仕組みだけ、説明しますと…。

テンプレート側に２つ準備をしておきます。
１．スタイルシートを追加します。
　<head> 内の <style> 中に次のコードを挿入します。

.commenthidden {display:none}
.commentshown {display:inline}

２．JavaScript の関数を定義しておきます。
　<head> 内に次のコードを入力します。

<script type="text/javascript">
function togglecomments (postid) {
  var whichpost = document.getElementById(postid);
  if (whichpost.className=="commentshown") {
    whichpost.className="commenthidden";
  } else {
    whichpost.className="commentshown";
  }
}
</script>


各投稿の方にも２つ、仕掛けが必要です。
１．表示・非表示と切り替える内容を記述します。
　class="commenthidden" とした、好きな ID をつけたインライン要素の中に、内容を記述します。

<span class="commenthidden" id="post050806">見えますでしょうか？</span>

２．切替をするためのリンクやボタンを記述します。
　この部品がさっき定義した JavaScript の関数を呼び出します。
　togglecomments() の引数には１で設定した ID を指定します。
<a href="javascript:togglecomments('post050806');">切替</a>


この例の場合、リンクがクリックされると、<span> のクラスが JavaScript によって書き換えられます。適用されるスタイルが変わることで、内容物が非表示・表示と切り替わるんですね。

この方法は結構色々なところで使えそうな気がします。ちなみに今回紹介した Blogger Help ではこれを投稿につくコメントを表示するのに利用しています。興味があればどうぞ。

Archive Links in a Menu

Posted at: 2005-08-03 5

（前回アーカイブリンクに関する記事を書いたのでついでに…。）

Blogger 歴が１年、２年と長くなるにつれて、アーカイブリンクのリストもどんどん長くなっていきます。リストをもっとすっきり表示したい、というときに便利なのが選択型のアーカイブリンクです。
これは Blogger Help でも紹介されています。

これに Current Posts のリンクを加えたのが Li Zhao さんのものですが、どちらにしてもページの移動を JavaScript に頼っています。
そのため、JavaScript が無効になっている場合には、アーカイブページにたどり着くすべがなくなるとともに、用をなさないセレクトボックスがさみしく表示される、ということになります。

クリボウも JavaScript を使わない簡単なページ移動の方法は思いつかないのですが、せめて JavaScript が効かないときには、従来のアーカイブリンクを表示するようにしたいのです。

結局どうするかというと、テンプレート中、アーカイブリンクが書かれている部分（おそらく <ul class="archive-list">）を

<script type="text/javascript">
document.writeln("<select name='archivemenu' onchange='document.location.href=this.options[this.selectedIndex].value;'>");
document.writeln("<option value='" + location.href + "' selected>- Archives -</option>");
<BloggerArchives>
document.writeln("<option value='<$BlogArchiveURL$>'><$BlogArchiveName$></option>");
</BloggerArchives>
<ArchivePage>document.writeln("<option value='./'>Current Posts</option>");</ArchivePage>
document.writeln("</select>");
</script>
<noscript>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</noscript>
に書き換えます。今回も長くなってしまいましたが、コピー＆ペーストして使って下さい。

ちなみにセレクトボックスの中で、前回記事のように、新しいものを上に、古いものを下に表示したい時には、同じところに

<script type="text/javascript">
var archives = new Array();
<BloggerArchives>
archives[archives.length] = new Array("<$BlogArchiveURL$>", "<$BlogArchiveName$>");
</BloggerArchives>
document.writeln("<select name='archivemenu' onchange='document.location.href=this.options[this.selectedIndex].value;'>");
document.writeln("<option value='" + location.href + "' selected>- Archives -</option>");
for (var i = archives.length - 1; i >= 0; i--) {
  document.writeln("<option value='" + archives[i][0] + "'>" + archives[i][1] + "</option>");
}
<ArchivePage>document.writeln("<option value='./'>Current Posts</option>");</ArchivePage>
document.writeln("</select>");
</script>
<noscript>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</noscript>
という、長い長いコードを書きます。

© 2005-2014 Kuribo. Powered by Blogger.