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

画像全てを 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さんのものを元に改変しました

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

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


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

  • http://d.hatena.ne.jp/UserID/yyyymmdd
  • http://d.hatena.ne.jp/UserID/yyyymmdd/permalink

最短のケースは、はてなユーザーIDが3文字以上なので

  • http://d.hatena.ne.jp/abc/20080408

でしょうか。


では最長の場合は？というと、はてなユーザーIDに使える文字数の上限が32文字

ユーザー名の文字数制限の緩和
これまでユーザー名で使用可能な文字数の上限は半角英数字で15文字でしたが、32文字までご使用いただけるようになりました。

はてなのユーザー登録システムを刷新しました - はてなの日記 - 機能変更、お知らせなど

というのが一点。


もう1つは Permalink はユーザーが自由に決められることが大きなポイントになります。
通常見出し記法で何も設定せずに書いた場合

  • http://d.hatena.ne.jp/UserID/yyyymmdd/p1

などとなりますが、これを

*permalink*見出し

とすることで、任意に変えることが出来ます。

で、これが何文字ぐらいできるかというと、下の見出しで試してみました。


http://d.hatena.ne.jp/rikuo/20080408/pi_3_141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067982148086513282306647093844609550582231725359408128481117450284102701938521105559644622948954930381964428810975665933446128475648233786783165271201909145648566923460348610454326648213393607260249141273724587006606315588174881520920962829254091715364367892590360011330530548820466521384146951941511609433057270365759591953092186117381932611793105118548074462379962749567351885752724891227938183011949129833673362440656643086021394946395224737190702179860943702770539217176293176752384674818467669405132000568127145263560827785771342757789609173637178721468440901224953430146549585371050792279689258923542019956112129021960864034418159813629774771309960518707211349999998372978049951059731732816096318595024459455346908302642522308253344685035261931188171010003137838752886587533208381420617177669147303598253490428755468731159562863882353787593751957781857780532171226806613001927876611195909216420198938095257201065485863278865936153381827968230301952035301852968995773622599413891249721775283479131515574857242454150695950829533116861727855889075098381754637464939319255060400927701671139009848824012858361603563707660104710181942955596198946767837449448255379774726847104047534646208046684259069491293313677028989152104752162056966024058038150193511253382430035587640247496473263914199272604269922796782354781636009341721641219924586315030286182974555706749838505494588586926995690927210797509302955321165344987202755960236480665499119881834797753566369807426542527862551818417574672890977772793800081647060016145249192173217214772350141441973568548161361157352552133475741849468438523323907394143334547762416862518983569485562099219222184272550254256887671790494601653466804988627232791786085784383827967976681454100953883786360950680064225125205117392984896084128488626945604241965285022210661186306744278622039194945047123713786960956364371917287467764657573962413890865832645995813390478027590099465764078951269468398352595709825822620

ちゃんと調べてはいませんが、おおよそ2000文字程度はできそうです*1。


もちろん、こうした使い方はレアなケースではありますが、そこら辺を考慮すると、難しいなぁという辺り。

*1:ユーザーIDの文字数に応じて変化するかもしれませんが

Permalinkを過度に長くしてみました

長い Permalink のテスト。2000字程度の適当な半角英数文を思いつかなかったので、円周率で。
ちなみにこれだと、はてなブックマークでブックマークは出来ないでしょう。

><