拙作スクリプトの内、本文をいじるタイプのものは、右サイドバーが無いと使えませんでした。そこで、CSSでサイドバーの位置を入れ換えてみることにしました。
(livedoor blogなどでは当り前の手法ですが。。。)
試してみた結果、ココログ(Typepad)でも一応できたので、そのCSSをここに記しておこうと思います。
(普通、Typepadでそんな必要はないので、そんなことを書いている所がないかもしれないので。)
▼両サイドバーの左右を入れ換えるには:
現在、ここが両サイドバーのスタイルなので、まずは両サイドの入れ換えから。
CSSは、下記の通り。
800pxとか200pxとか400pxとかのところを御自分のテンプレートに合わせて調整してください。
----
Typepad系ブログでは普通、左→本文→右の順で読み込まれますが、ここを読み込むと、右→本文→左の順で読み込まれるようになっているのがわかると思います(2005-05-08現在)。
CSSを書く位置ですが、できるだけ読み込み初期に表示される位置がよいので、左サイドの一番上に配置するのが良いでしょう。
このブログでは現在、<!-- myStyles --> という名前でリスト型のマイリストを作り、左サイドバー(現在、見た目は右サイドバー)の最上部に配置し、メモ欄をテキスト表示に設定した上で、styleタグを使って直接スタイルを書き込んでいます。
▼右サイドバーのみを左サイドバーのみに見せるには:
次に、右サイドバーのみのスタイルを、左サイドバーのみに見せかけるためのCSSです。
700pxや500pxや200pxの部分は、適宜調整してください。
こんな感じなのですが、この場合、(本当は)右サイドしか存在しないため、そこの最上部にマイリストを配置してそこにCSSを書いても、CSSが効くまでにタイムラグがあって「ん?」って感じになります。
CSSをサブタイトルに書いてしまうという手がありますが、サブタイトルはメンテが面倒なのと、文法的に良くないということなどもあり、おすすめはしません。
サブタイトル欄を使う場合は、linkタグで外部ファイルを指定してやり、CSS自体は外部ファイルで管理する、という手がよいのではないでしょうか。
(詳しくは、「詞織」さんなどが詳しいので、そちらでどうぞ。)
他にも方法があります。
たとえば、左右を入れ換えるのではなく、両サイドバーにしておき、左サイドを見えなくしてしまう、という方法です。
▼両サイドバーを右サイドバーのみに見せかける
左サイドにはスタイルを設定するためのマイリストを一つだけを置くようにし、そこでCSSを使って左サイドの幅を0にし、あたかも左サイドが無いように見せかける、という方法です。以前は、この手法を使っていたことがあります。
CSSは、以下のようになります。
こんな感じです。これも、700pxや500pxや200pxの部分は適宜調整してください。
----
以上、Firefox 1.0 とInternet Explorer 6 (IE6)で確認しましたが、ブラウザによっては問題が起こるかもしれません。何か問題がありましたら御一報ください。
また、不明な点がありましたら、お気軽にコメントください。
最近のコメント