shinobi access log

web Font

2011年1月28日金曜日

【はてなスター】 Bloggerに“はてなスター”を設置する方法(How to put Hatena Star.)

Stars'n balls
Stars'n balls Photo by brockvicky



ブログに“はてなスター”を付けてみましょう!

前回“はてブ”をbloggerサイトに設置&表示させたので今回は“はてなスター”を設置してみようと思います。

前回エントリ
[はてブ] Bloggerに“はてなブックマーク”を設置する方法a??a?Re¨?ao?a?Ra? ̄a?|a?ae¢≪a??a??a? ̄a??a??a? ̄a?°


ではさっそく始めましょう!
流れを説明します。

1.はてなスターにアクセスし、ログイン
2.外部のブログサイトを登録
3.ブログに貼り付けるHTMLのコードが発行される
4.blogger(自分のブログサイトに行く)ログイン
5.テンプレートの内容を編集する
6.一部HLMLタグの書き換えと追加を行う
7.完成



1.はてなスターにアクセスし、ログイン
まずは「はてなスター」にアクセスし、ログインします。そしてトップページ中央にある「ようこそ、○○さん」のリンクまたは右上のメニューの「ホーム」をクリックして、ユーザーページにアクセスしましょう。



2.外部のブログサイトを登録
「外部のブログサイトを登録する」の下の欄にご自分のブログのトップページのURLを入力して「追加」ボタンを押してください。



3.ブログに貼り付けるHTMLのコードが発行される
すると、ブログが登録されて「トークン」が発行され、ブログに貼り付けるHTMLのコードが表示されます。
トークン = Hatena.Star.Token)



4.blogger(自分のブログサイトに行く)ログイン
自分のブログサイトに行ってログインしてください。

5.テンプレートの内容を編集する
ダッシュボードから以下の用にクリックして進みます。
ブログを管理 > デザイン > HTML の編集 > テンプレートを編集



そして「ウィジェットのテンプレートを展開」にチェックを入れます。ここがポイントです!



6.一部HLMLタグの書き換えと追加を行う
そしてまず</head>をさがして直前に、貼り付け用コードをペーストします。



次に<h3 class='post-title entry-title'>を探して以下の用に書き換えます。

<h3 class='post-title'>
<a expr:href='data:post.url' style='display:none;' title='permanent link'></a>




最後に「テンプレートを保存」をクリック


7.完成

Befor


After


Bloggerをお使いの皆さんも“はてなスター”の設置でお気に入りのスターマークを付けてもらいましょう♪


【あとがき】

実は“はてなスター”の付け方をGoogle先生に聞いていたところここに来ました!

はてなスターをブログに設置するには - はてなスター日記a??a?Re¨?ao?a?Ra? ̄a?|a?ae¢≪a??a??a? ̄a??a??a? ̄a?°

今読むと最初のところに書いてあったのですが「Hatena.Star.Token」の取得方法を飛ばして中盤のbloggerに設置する方法まで読み飛ばしてました<( ̄□ ̄;)>

なので遠回りですがココを見て初めて「Hatena.Star.Token」の取得方法が分かりました!

はてなスターをlivedoor Blogに設置する方法 - PictorialConnect
まず「Hatena.Star.Token」を取得するために、以下にアクセスする必要がある。
http://s.hatena.ne.jp/自分のはてなID/blogs
※ちなみに私はここでつまずいた。「Hatena.Star.Token」をどうやって取得するか検索しただけではわかりづらかったからだ。

私もつまずきました。そしてあちこち探してやっとここにたどり着いたわけです!




Kazwoo


関連する記事
はてなスターをブログに設置するには - はてなスター日記a??a?Re¨?ao?a?Ra? ̄a?|a?ae¢≪a??a??a? ̄a??a??a? ̄a?°
はてなスターとは - はてなキーワードa??a?Re¨?ao?a?Ra? ̄a?|a?ae¢≪a??a??a? ̄a??a??a? ̄a?°



2011年1月25日火曜日

【はてブ】 Bloggerに“はてなブックマーク”を設置する方法(How to put Hatena Bookmarks.)

Frayed
Frayed Photo by nyello8



あなたのブログに“はてなブックマーク”は付いていますか?

以前読んだエントリがずっと気になっていました。はてブがあると読者の興味数がわかる!

ブログを短期間で月間10万PVにする方法を公開します 僕の18個の戦略 | Last Day. jp
ボタンを導入した後からは、はてブされる数そしてTweetされる数が格段にアップしました。



“はてなブックマーク”と“ブックマーク数”の設置と表示は色んな方に読んでもらうのにとても便利な指標となります。

今回はBlogger(ブロガー)で“はてなブックマーク”と“ブックマーク数”を設置する方法をご紹介します。

ではさっそく始めましょう。

ログインそしてHTML編集

1.ダッシュボードからデザインをクリックします。



2.デザイン > HTMLの編集 と進みます。



3.ウィジェットのテンプレートを展開にチェックを入れます。ここがポイントです!



4.下の枠内に表示されているHTMLタグから <div class='post-header-line-1'/> と言う文字列を探します。(Windowsの場合はCtrl+F、Macintoshの場合はcommand+Fで検索できます。)

それを以下の文字列に置き換えます。難しいことは考えずにそのままコピペ(コピー&ペースト)してみてください。

<div class='post-header-line-1'> <span class='hatena-entry hatena-append'> <a expr:href='"http://b.hatena.ne.jp/append?" + data:post.url'> <img align='absmiddle' alt='このエントリーをブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをブックマークに追加' width='16'/></a> <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'> <img align='absmiddle' alt='このエントリーを含むはてなブックマーク' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' style='border: none;' title='このエントリーを含むはてなブックマーク'/></a> </span> </div>

画面上ではこんな感じとなります。

文字列の検索:

そのまんまコピペ:


5.最後に「テンプレートを保存」をクリック


6.するとブログのエントリタイトルの下に“はてなブックマーク”と“ブックマーク数”が表示されます。

Befor


After


これで完成です。


私のブログはBlogger(ブロガー)と言うレンタルブログサービスを使用しています。Googleのアカウントでそのまま使える言う単純な理由でこのブログサービスを選びました。

しかし使い勝手がいまひとつ悪かった。。。

と言うのもヘルプが英語だったり、何かカスタマイズしたいと思った時に検索をかけても良いノウハウがみつからない。日本ではユーザ少ないのかな?

上手くカスタマイズ出来ずにいたところ同じBlogger(ブロガー)で私のやりたいことをいとも簡単にやっている方がいたので教えていただきました。

それはtwitter知り合いのYuichi (@flavour47) さんです。ありがとうございました!

Yuichiさんのブログサイト
Yu_notes 


そしてYuichiさんがココを参考にするといいよって教えてくれたのがこのサイトでした。
Web Cafe Blog: Blogger に「はてなブックマーク,はてなスター」ボタンを設置する
今日は「Blogger で、はてなブックマークとはてなスターを使う」場合のメモを残して置きます。




Bloggerをお使いの皆さんも“はてなブックマーク”と“ブックマーク数”の設置と表示でアクセス数アップを目指しましょう♪

Kazwoo

2011年1月20日木曜日

【Flickr】 再配布可能な写真を検索する方法。(How to find photos that can be redistributed.)

My bulletin board
My bulletin board Photo by inhisgrace



ブログトップにそのエントリをイメージさせる画像を入れることはデザイン的にも美しく、またその後の記事をスムースに読んでもらうことにとても役立ちます。

出来ればブログエントリにあった素敵な写真を貼りたい!
そこで皆さんご存じの写真宝庫Flickrを活用します。

Flickr(フリッカー)は写真を共有するコミュニティサイト。ここにある写真から再利用可能のモノを選んでブログトップに張り付けてみましょう。

※Flickrのサービスを使うにはYahoo.comのアカウントが必要です。

しかし普通に検索をかけると、あまりにも写真がたくさんあるのでどれが再利用可能なのか分かりません。

そこで検索時に少し手を加えると再利用可能な写真から検索をかけることが出来ます。

再利用可能な写真を検索するための方法


まずはFlickrトップページへ。



右上のSearchのボタンを空欄のままクリックします。
すると検索だけのページになります。ここで“SEARCH”ボタンの右にある“Advanced Search”をクリックします。


次に開いたAdvanced Searchのページ。


一番下へスクロールすると「Creative Commons」と書かれたところあります。
ここで次の様にチェックを入れてその下にある“SEARCH”を押すと再利用可能な写真を探すことが出来ます。


「Creative Commons」下のTip: Find content with a Creative Commons license. Learn more...のリンクから「Flickr: Creative Commons」のページを開くことも可能です。

その後は検索単語を入れて普通に検索をかければOKです。
検索の下部分に「Showing Creative Commons-licensed content[x]」と表示されているはずです。


ちなみにCreative Commons(クリエイティブ・コモンズ)のライセンスの表記についてはこんな感じです。


詳しくはクリエイティブ・コモンズ・ライセンスとは - クリエイティブ・コモンズ・ジャパンa??a?Re¨?ao?a?Ra? ̄a?|a?ae¢≪a??a??a? ̄a??a??a? ̄a?°をご覧ください。


今回のTipsはグーグル先生で検索をかけて探しました。
そして教えていただいたのがこのページ。さらに詳しく書いてあります。
ありがとうございました♪

Flickr(画像サービス)で利用フリーの画像を検索する方法
まずは最小限、再利用可能な画像を探す方法から学習してみた。

活用させて頂きました!



ブログトップに素敵な写真を貼ってエントリを華やかに演出しましょう♪

Kazwoo

追記
クリエイティブ・コモンズ・ジャパンサイトトップにある「作品検索」を使うとflickrだけではなく、Google検索イメージ他。再配布可能なモノを探せます。
Creative Commons Searcha??a?Re¨?ao?a?Ra? ̄a?|a?ae¢≪a??a??a? ̄a??a??a? ̄a?°


2011年1月18日火曜日

【Dropbox】DropboxQuestクリアでDropbox容量1GBUp!

Box with Marbles
Box with Marbles Photo by Minnesota Historical Society



くらちゃん(@kuracyan)のK'sチェックから気になったDropboxQuestをやってみました。

なんとクエストを全クリアすると1GBの容量アップできるんです!

DropboxQuest が難しいぞ 今日のk’s check Singer Song iPhoneこの記事のはてな被ブックマーク数


ただし、クリアするのがハンパ無く難しい。。。なのでこちらを参考にさせていただきました!

Dropbox を無料で1GBゲットする | 酔いどれオヤジのブログwpこの記事のはてな被ブックマーク数

酔いどれさん(@yoidoreor)のサイトにあったチートを使って何とか制覇しました!

Erroneus - An erroneous trophy hunter...この記事のはてな被ブックマーク数

全部英語なので分からないところもあったけどなんとかクリア。
ありがとうございますo(≧▽≦)o

これがクリア後の画面!1GBゲットしました♪
Dropbox使ってる方は無料で1GB容量アップのチャンス。是非お試しを!




Dropboxをまだインストールされていない方は是非こちらから⇒ ここからDropboxをダウンロードするとあなたと私に250MBのボーナスが入ります♪

追記:
Dropboxの容量を1GB増やすことができるゲーム「Dropquest」の日本語版攻略ガイドを作ったよー | KUMALOG
これからDropquestに挑む人のためにDropquest攻略ガイド(日本語版)を作ってみました。コレを参考にしてサクッとクリアしちゃってください!

ついに日本語版攻略登場!
英語が苦手な方、こちらで断然早くクリアできます!



Kazwoo