【ブログ】ココログプロで「はてブ」できるようにしてみた

「ココログプロ」で、「はてブ」こと「はてなブックマーク」へブックマーク登録できるリンクを配置してみました。

この記事を書いている時点では、「ココログ」には「はてブ」との連携機能はありません。Twitterにつぶやくことはできますけど。ということで、ならば自前で入れてしまえとやってみました。

まず最初に。テンプレートがカスタマイズできるココログプロでないと、ここで書く内容は使えません。ココログフリー、ココログプラスでは、「リスト」機能を使って「はてブ」連携する方法が紹介されていますよ。

さて、まずは情報集めです。「はてブ」の本家サイトに行きますと、このための情報がしっかりありますので、基本としてマークしておきましょう。

自分のブログに「↑B」「B!」アイコンを表示する
自分のブログに「○○users」を表示する

それぞれのページに、「ココログプロ」という項目がありますので、そこを見て下さい。基本的に、ここに書かれているとおりにやればよいはず…。なのですが、実際はそうは行きませんでした。

どうやら、テンプレートの構造が変化したか、私のテンプレートが古いのか、いずれにしろそのままでは適用できませんでした。

常人ならそこで諦めてしまうのでしょうが、私は超人です。または往生際が悪いともいえましょう。テンプレートを解析して、然るべき場所に然るべきアンカータグを入れることで目的を達成できました。

まず、「はてブ」のためのアンカータグを作っていきましょう。上記の2つのページから入手できますから、こんな感じでまとめておいて下さい。まとめておけば、あとはテンプレートの然るべき場所にこれを貼り付けるだけで結構です。

ここでは、追加ボタン、エントリー表示ボタン、ユーザ数表示ボタン、3つ並ぶようにしてみました。ちなみにボタンのアイコン画像は上記のページから入手して、自分のブログの適当な箇所にアップロードしておいて下さい。

私は、ブログサイトのトップに置いておきました。GIFファイルのURLに注意して下さい（上のマークアップのままですと、私のブログにある画像が表示されます。笑）。

マークアップの準備ができたら、いよいよテンプレートを触りましょう。テンプレートを触るときの基本、わかっていますか？そうです、作業前のテンプレートのバックアップは必ずとっておく、です。何か訳のわからないことになっても、少なくとも作業前に戻せますから。

触るテンプレートは、

• Main Index Template
• Category Archives
• DateBased Archives
• Indivisual Archives

の4種類です。それぞれ、トップページ、カテゴリ別アーカイブページ、日付別アーカイブページ、個別ページに相当します。他にもあったような気がしますが、これだけやっておけば十分でしょう。

それぞれのテンプレートで、触る箇所は同じです。ただし、Main Index Templateだけは2箇所触ります。2箇所ですが、同じような場所を触ります。触る、触るというと何となく淫靡な雰囲気になってきますね。

それぞれのテンプレートをココログデザインページから開いたら、こんな場所を探して下さい。

これは、記事の最後に表示されるリンク群を自動発生させる部分です。Twitterの投稿ボタンも、ここで自動発生されます。ここの直後に「はてブ」リンクを設置してみましょう。置き方は簡単で、この直後に上記のマークアップを入れるだけです。

Main Index Templateについては2箇所ありますから注意して下さい。

それぞれのテンプレートは保存し、最後に一括で「反映」しましょう。オススメは、上の順番でテンプレートを書き換えて、最後のテンプレート（Individual Archives）を保存した直後に「全ファイル」へ反映するのがよいでしょう。

記事数が多いと、この反映作業だけで相当時間がかかります。

反映が終了すれば終わりです。ブログのトップページを表示させてみて、こんな感じで「はてブ」のボタンが出ていれば成功です。

ちなみに、ユーザ数は0の場合には見えません。縦横1ピクセルの透明画像になるということなので、要するに何も見えません。

すでに「はてブ」にブックマークされている記事があれば、ユーザ数が出るでしょう。私のブログで随一の人気記事？ではこんな感じでした。

この記事が役立ちましたら、どうぞ「はてブ」して下さいね。