サイドバーを左右に配置する

このテクはblugさんを参考にさせていただきました。ここのblogはクロスブラウザ対応もしっかりしていると思うので、その点でも、とても参考になります。感謝。

では、その方法。

</DIV></DIV><DIV id="links-right"><DIV>

このタグを左側の一番最後のリンクグループのメモ欄の最後に入れます。

そして、CSSの設定で、

#links-right {
width:160px ;
position : absolute ; TOP : 130px ; left : 620px ;
}

といった感じで、新規にclass「links-right」を追加して、設定を入れます。ほとんどの場合は、横幅の指定と、場所の指定をだけでいいと思います。


より詳しい説明。

このテクは、強制的にタグを閉じ、意図したタグを割り込ませて、閉じたタグを再開することで実現しています。

まず、改造したいページのHTMLを解析し、改造したい場所はどこか見つけます。

例えば、seesaaが吐き出すHTMLに

<B>ようこそ！ブログへ！

とあるとします。この文字の前に文字を斜体で追加したいと思ったら、

前にあるBを</B>で強制的にタグを閉じ、
<I>ウェルカム！</I>と意図したタグを割り込ませて、
<B>閉じたタグを再開する

<B></B><I>ウェルカム！</I><B>ようこそ！ブログへ！

とすることで実現しています。
サイドバーの分割は、classを追加するタグを割り込ませて、場所の指定はCSSですることで実現しています。なので、それ以降のサイドバーを追加しても、この割り込ませたclassを継承するようになっています。

って書いていますが、これはボクが発明した方法ではないので、blugさん他先人者達に感謝してつかってくださいまし。

Comments

サイドバー２分割に苦しんでいた、びおびおと申します。
一度チャレンジして、放り出していたんですが、
こちらの記事をお見かけして、再度挑戦しましたら、
できてしまいました。。
同じ事をしているつもりですが、初回はできず、２回めはできる。。。
たぶん、細かいところが、違ってたんでしょう。。（涙）
どうも、ありがとうございました。

うちのブログでちょこっと、書かせていただいてます。

Posted by びおびお at 2004.03.26 07:21