takumart.net link

takumart.net - Takuma saitou Art works |  Art Works  |  Photo Works  |  Profile  |  Download  |  Mail  |  Blog  |  Link  |  Sitemap  

2010年3月23日火曜日

「エントリー毎のはてなブックマーク数をテキストで表示する」

はてなブックマーク使っています。
エントリーにブックマークして頂ける事があります。
Takumaです。
 

【エントリー】
��名](スル)競技会・コンテストなどへの参加の申し込み。また、その参加登録。参加者名簿。「全日本選手権に百余名が―した」(by Yahoo!辞書)
 


通常、はてなブックマークAPIから該当記事のブックマークを読み込み表示する場合は、大抵は画像にて表示されます。

これをテキスト(HTML+CSS)で表示する形で追加したいと思い、調べてみました。
下記のページを参考に、その方法で実装。

▼ピックアップ▼
WordPress の個別記事にブックマーク件数を埋め込む : zontheworld

まず、記事毎の表示領域についてはこれにて完了。
次は、wordpressプラグインの以下二つの表示結果へのブックマーク反映。

・Popular Posts:人気エントリーを表示するwordpressプラグイン
・Similar Posts:関連エントリーを表示するwordpressプラグイン

実装した当時の記事は、以下参照。

▼takumart.net:過去記事▼
「ブログを表も裏もカスタマイズ中なのです:前半」 | takumaの「デザインはあれでアートはそれで」in takumart.net


この二つのプラグインは姉妹のようなもので、片方のライブラリを参照する作りになっているようなので、二つプラグインストールされる事が多いです。本サイトもそうなので、single.php(各エントリーページ用テンプレートPHP)の下部に上記表示領域を設けています。

この二つの領域のエントリー名の横にもテキストベースのはてなブックマーク数を表示するために、カスタマイズしたコードが以下です。
��※素人がカスタマイズしたものなので、自己責任で実行してください。スミマセン)


▼コード▼---------------------------------------

<li>{link}<strong class="hb_users">
<a href="http://b.hatena.ne.jp/entry/{url}">
<script type="text/javascript" src="http://api.b.st-hatena.com/entry.count?url={url} &amp;callback=document.write"></script> users
</a>
</strong></li>

--------------------------------------------------

これを以下の手順で、対象のフォーム内に入力して実行します。


(Step.1)「WordPress内の管理画面→設定→Similar Posts」を開く
 (※「Popular Posts」の場合も項目は同じなので、下記同内容を実行。)
(Step.2)「Output Settings タブ」を開く。
(Step.3)「Output template:」テキストボックスに上記コードをコピペ。
(Step.4)「Save Output Settings」ボタンをクリック。

なんとか、実装完了。

その他の箇所もちょこっと改修しました。
・サイドバーの月別アーカイブをプルダウンフォーム化(※省スペース化)

▼参考記事▼
peacock union【Web Designing Laboratory】 : Blog Archive : WordPress 2.0.2 アーカイブリストをドロップダウンメニューにする

・上記に伴うサイドバー×2内パーツの移動。

・テキストの脱デバイスフォント指定。

という訳で、見やすくなったでしょうか?
しばらく、機能面でのwordpressカスタマイズをしていませんでしたが、近々はちょくちょく変えたいと思っています。ではでは。



■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
【味の素KK】「味の素」|NEO TAMAGO KAKE GOHAN
●んで、一言

step.1:白身の量 / step.2:醤油の量 / step.3:味の素の量 / step.4:まぜる時間
をスライドバーと選択で指定すると、作っている動画を生成してくれる。。。そんなコンテンツ。

ただし、このコンテンツ「ネオ」なのだ。デザインが先進的すぎる。黒ベースに赤でライティング要素をあしらった、未来系でざいんなのだ。ちなみに、
http://www.ajinomoto.co.jp/aji/egg/generator/#/process/1-3-2-3-Takumart
が、おいらの作ったバランスだ。適当なので味の保証はしませんがw

あと、Twitterに投稿できたり、ブログパーツが生成できる。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■