Harukiya Archives

2006/09/18

category / HTML

ここ10年ほど、ドライビング BGM(主に発進のテーマ)はヴァン・ヘイレンの Jump(iTMS) と トップ・ガンの Danger Zone 他を愛用している。というか、後のはあーちすと名じゃない気がする今日この頃。皆様、いかがお過ごしでしょうか。

というわけで、今回装備した”リンクでジャンプ”の小ネタ2題。

個別記事から月別ページへのジャンプ

今回、パン屑ナビを新たに設置して、インデックスと個別記事の間の(仮想)階層に月別ページを挟んだのですが、ユーザが個別 → 月別へと移動する場合には、今読んでいる個別ページの周辺の記事が読みたいという理由が大きいのでは?と考えて、月別ページの該当位置(直前に読んでいた記事の頭)までジャンプするようにしました。これはFC2単変数<%topentry_no>を使うと簡単にできます。

  1. <!-- アンカー側 -->
  2. <!--topentry-->
  3. <p><%blog_name>
  4. &gt; <a href="./">Index</a>
  5. &gt; <a href="./blog-date-<%topentry_year><%topentry_month>.html#entry<%topentry_no>day">
  6. <%topentry_year>-<%topentry_month></a>
  7. &gt; entry#<%topentry_no></p>
  8. <!--topentry-->
  1. <!-- リンク側 -->
  2. <ul>
  3. <!--topentry-->
  4.     <li id="entry<%topentry_no>day">
  5.         <p><%now_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>+9:00 <strong><a href="<%topentry_link>"><%topentry_title></a></strong></p>
  6.         <p><%topentry_discription></p>
  7.     </li>
  8. <!--/topentry-->
  9. </ul>

気をつける箇所は、個別記事には<%topentry_no>を使った ID がすでに存在する可能性があるのでダブらないようにすること。

トップ-本文から個別記事-追記の頭だしジャンプ

多くのテンプレでは<%topentry_more><div>要素で囲み、それに ID を振る場合が多いと思います。前回まで春木屋風テンプレは<hr>要素を好んで使っていました。

  1. 前略
  2. <%topentry_body>
  3. <hr id="more" />
  4. <%topentry_more>
  5. 後略

これでもいいのですが、スタイルシートを切って見ると水平線がうるさく感じるんですね。ワシ、記事の中でも普通に水平線使うし、特に本文が短い場合(一行とか)だと煩雑な感じになります。で、試しに強制改行を当ててみました。

  1. 前略
  2. <%topentry_body>
  3. <br id="more" />
  4. <%topentry_more>
  5. 後略

わー、一文字しか変わってないし。スタイルシートを切った場合は、一行分よけいに間が空きますから、この辺は、水平線を取るか間を取るかの好みの違いとしかいいようがないかも。では、何故書くのか。ひとつだけ良い点を上げるとすれば<br id="more" />のデフォルトスタイルを殺す(前後の要素のマージンを相殺させる)のに CSS の記述が一行で済むこと。

  1. br#more {
  2. position: absolute;
  3. }

こちらも気をつける箇所がひとつあり、<br>要素はインラインなので<body>要素直下には置けません。なんらかのブロック要素の中に置くことになります。<div>要素を使うのなら、最初に挙げた多くの例にならえば良いのでは?というオチでした。

ただ、アンカーのためだけにディブ( ← こう暗唱しながらHTMLを書いている)ってゆうのもなぁ。テンプラーの皆さん、この辺のこだわりはありますか?とか、ウヤムヤに終ってゆくのであった。


writeback

  1.  


< 本文と概要とタイトルと私 | 301 > | 表紙へ戻る | 探す | 案内


ホームページ アフィリエイト レンタルサーバー FC2ブログ キャッシング