2008-04-08

トラックバックとリンク元の画像表示を分ける

画像全てを id:tureusaさんがはてなハイクで描いた公開デザイン

 公開デザイン「草原ゆるゆるスケッチ」 - はてなダイアリー
が素敵なのですが、
こちらで
草原ゆるゆるスケッチ - そこのけそこのけ兎が通る

トラックバック・リンク元のどちらにも表題に「トラックバック」のイラストが出てしまう件をどうにかしたい。
草原ゆるゆるスケッチ - そこのけそこのけ兎が通る

ということなので、ちょっと考えてみました。
コメント欄に書いても良かったのですが、長いのとややこしいので、トラックバックで

http://d.hatena.ne.jp/sample/20071112/p1?publicdesignset=997#tb
実際にこの公開デザインでどのように表示されているかは、こちらを参考に。

で、問題のトラックバック・リンク元の個所の構成の簡略な解説

+div.hatena-body
 +div#days
  +div.day
   +div.refererlist
    +div.caption
     +a name=tb : トラックバック
      +http://d.hatena.ne.jp/UserID/yyyymmdd/permalink
    +ul
     +li
   +div.refererlist
    +div.caption : リンク元
    +ul
     +li

まァ、こんな感じです。

ただこれが、常にこの状態であれば

div.refererlist{
  background-image: url(トラックバックの画像);
}
div.day > div.refererlist + div.refererlist{
  background-image: url(リンク元の画像);
}

モダンブラウザ以上対応とは言え、こんな感じですっきりと書けるのですがトラックバックを表示しないという設定を行うと、トラックバックの div.referlist は挿入されないので、ダメ。

で結局思いついたのが、これ

div.refererlist{
  margin: 15px 0px 15px 5px;
  padding: 10px 0;
  width: 100%;
  color: #333333;
  background: transparent url("http://f.hatena.ne.jp/images/fotolife/r/rikuo/20080408/20080408211632.gif") no-repeat left 10px;
  color: #333333;
  font-size: 85%;
  text-align: left;
}

div.refererlist div.caption{
  margin: 0;
  padding: 0 5px 20px 0;
  text-align: right;
  font-weight: bold;
}

div.refererlist div.caption a{
  color: #333333;
  margin: 0;
  padding: 5px 0 20px 0;
  display: block;
  background: transparent url("http://f.hatena.ne.jp/images/fotolife/r/rikuo/20080408/20080408211631.gif") no-repeat left top;
}

つまり、両方の div.caption の背景画像にこちらを表示させ、トラックバックの方は上から背景画像*1を重ねて隠しているということになります。
コツは両方とも透過gif画像なのでうまく重ねることでしょうか、ここでは割と適当に作ったので白枠がきれいではありませんが。

とりあえず思いついた回避案はこんなところ。……うーん、もう少しエレガントな手法が無いかと考えたのですが、ちょっと考えつかなかったです。
誰か他にいい方法あるでしょうか？

[アイデア募集]

追記：おとなり日記のことを忘れてた

そう言えば、おとなり日記ってありましたね。このダイアリーはキーワードのリンク閾値を上げているのと、検証用のダイアリーではプライベートなので、すっかりその存在を忘れていました。

*1:この画像はid:tureusaさんのものを元に改変しました

2008-04-08

はてなダイアリーのPermalinkについて

上の案では「トラックバック - permalink」が2行になってしまっているのですが、これももうちょっとどうにかしたいと考えたものの、いいアイデアがないのでやむなくそのままに。
というのも、Permalink の仕様が結構メンドイので。

トラックバックの欄に表示されるPermalinkのurlは