サイトの操作性ちょっと上げました。

サイトの更新を行いました。
http://antenabibibi.web.fc2.com/

具体的には、各記事の文字部分をクリックしないとこれまではリンク先に飛びませんでしたが、今後はそのブロックをクリックすることでリンク先に移動することが可能になりました。

■技術的な話
テーブルタグを使うと「vertical-align:middle」が使えるので、文字を中央に揃えることができます。
しかし、ブロック単位でリンクしたいとなると、よくネットで説明されているのが、「display:block」でテーブルセルの中身をブロックにする、という方法です。

ところが、block要素にしてしまうと、「vertical-align:middle」が使えない、つまり、中央に揃えることができない問題が出てきます。
positionで寄せるという方法が考えられますが、如何せん面倒です。

ということで、今回取り入れた方法は、tdなどの要素にopen.windowを入れます。
例えばこんな感じです。「td onclick="window.open('リンク先','_blank');"」

このままでは、td要素のa要素をクリックすると、リンク先が２つ開く問題が出ます。（多分）

ここで解決する方法として、a要素を消すということが挙げられますが、そうするとa:visitedなど指定していた部分が無効になり、既に訪問したリンクかどうかがわからなくなってしまいます。

ということで、a要素はやはり必要で、a要素をクリックしてもリンク先に飛ばないようには出来ないかということで探してみたところあるんですねこれが。
「a href="リンク先",onclick="return false"」とするとクリックしても飛ばなくなります。

そしてテーブルをブロック要素のように見せかけるために、オンマウスするとマウスカーソルが変化して欲しいということで、
cursor:pointer;
をクラスなどで定義して、td要素のクラスにコレを入れると、それっぽくなります。

これで完了です。やったね！
どこにもこんな説明がなかったのでまとめてみました。