読者です 読者をやめる 読者になる 読者になる

錆は眠らない、コタツで

suchi today hatenablog

サイドバー編集機能にトライ

f:id:suchi:20120218191210j:image:w480

先日 サイドバー編集の使い方☆ が難しすぎる、星とか書いてごまかさないで! などと書いたのですが、以前少しトライしてみたのを、記録しておきます。

まずは基本。「デザイン設定」→「カスタマイズ」タブから「サイドバー」を選びます。そこで「+モジュール追加」を選ぶと、エディットボックスが現れます。ここに何かを追加すればいいようです。でも「モジュール」ってなんでしょうか。残念ですが、どこにもそんな定義は書かれていません。まあ何か「ユニット」か「ウィジェット」か「機能要素」かそんな意味なんじゃないかと思います。仕事ではこういう用語のブレにはこだわってしまうほうです。ブレがわかったその場で全員でどっちにするか決めます。Extreme Programmingの「メタファー」「共通の用語」プラクティスもありますしね。

ここに普通にHTMLを書くと、それがサイドバーに現れます。おそらくモジュールというのは、サイドバー全体を一度に編集するとグチャグチャになってしまうので、サイドバーを構成する単位みたいなものじゃないかと思います。ここにHTMLで

<ul>
<li><a href="http://www.hatena.ne.jp/suchi/">profile</a></li>
<li><a href="http://www.suchi.org/">suchi.org</a></li>
<li><a href="http://d.hatena.ne.jp/suchi/">hatena</a></li>
<li><a href="http://theinterviews.jp/suchi/">interview</a></li>
<li><a href="http://twitter.com/suchi">twitter</a></li>
<li><a href="http://www.facebook.com/suchiorg">facebook</a></li>
<li><a href="http://suchi.tumblr.com">tumblr</a></li>
<li><a href="http://hondana.org/suchi">hondana.org</a></li>
<li><a href="http://amzn.to/suchiorg">wishlist(kurekure)</a>
</ul>

こんな感じに書いたら表示されました。けっこう簡単なのかな。この喜びをわかちあいたい方は↑のwishlistというリンクを開いてみたりすると良いかもしれません。

せっかくなのでタイトルの「Link」も表示したいのですが、この表示方法がわかりません。どこにも書かれていないので、しかたないのでソースを見て

<div class="hatena-module-title">Link</div>
<ul>
<li><a href="http://www.hatena.ne.jp/suchi/">profile</a></li>
<li><a href="http://www.suchi.org/">suchi.org</a></li>
<li><a href="http://d.hatena.ne.jp/suchi/">hatena</a></li>
<li><a href="http://theinterviews.jp/suchi/">interview</a></li>
  :
  :
</ul>

こんな感じに hatena-module-title というクラス指定をしてみました。セオリではその下を hatena-module-xxxx というdivで囲みそうですがよくわかりません。

次は一番下のカウンタです。980円/月のはてなブログProを購入するとカウンタを付けて、詳細なアクセス解析を見ることができますが、それだけのために980円は少々お値段が張りすぎます。ということで、まずは60はてなポイント/月で新しいカウンタを契約しましょう。そうするとカウンタIDというのが決まりますのでそれを覚えてください。

カウンターの設定を見ると下の方に、はてなのページに貼り付ける場合ということで

<hatena name="counter" cid="11">


こんなコードが書かれていますのでモジュールを新たに作って書いてみました。しかし残念ながらカウンタは表示されませんでした。もう一つある「はてな以外に貼り付ける場合」というscriptタグなどが入った以下のようなコード(省略してます)をコピペしてみると、ようやくうまくいきました。

<script type="text/javascript"><!--
    hatena_counter_name = "suchi";
    :
    :
</noscript>    


こんな感じでがんばれば、いつかカレンダーとかも作れるかもしれません。私はもう少し初心者向けの所を探してがんばろうと思います。


などと書いていたらちょうどいいタイミングで、はてなのデザイナの方らしいid:uedayさんがはてなブログで使える非公式ウィジェット置き場というエントリを書いていらっしゃいました。ウィジェットとモジュールの関係はよくわかりませんが(はてな社内でも統一されてないみたいですね)、がんばればこんなかっこいいこともできるんですね。すごい。

サイドバー編集機能で、こんないろいろなモジュールが自由に選択できたら画期的なシステムになるんじゃないでしょうか。