Bonjour!

« [在仏] 自動車運転免許証の書換えについて | トップページ | URL自動リンクのテスト »

2005-05-08

[Typepad] サイドバーの左右を入れ換える(使えなかったスクリプトを使う)

拙作スクリプトの内、本文をいじるタイプのものは、右サイドバーが無いと使えませんでした。そこで、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)で確認しましたが、ブラウザによっては問題が起こるかもしれません。何か問題がありましたら御一報ください。

また、不明な点がありましたら、お気軽にコメントください。

« [在仏] 自動車運転免許証の書換えについて | トップページ | URL自動リンクのテスト »

ウェブログ・ココログ関連」カテゴリの記事

コメント

facetさん、こんにちは。
例によって、Opera6.05での見え方をご報告させていただきます。何らかのお役に立てば、という気持ちで。。

◇Top画像の高さ幅がIEで見たときの3倍くらいあります。(^^;) ワンちゃんのイラストの上に水色の部分があって、イラストの部分があって、その下に白い余白が見えます。
◇イラスト下の白い余白の「余白」とは本文幅と右サイドバー幅のこと。余白の左側には本来の左サイドバー(プロフィールやGoogle検索など)が表示されています。
◇本来の左サイドバーの表示が終わった下に、本来の右サイドバーが左側に表示され、中央に本文が入っています。本文の右側にサイドバー幅の白は見えなくて、BGカラーの水色が見えています。

うわ~~っ。わかりにく説明ですね。日本語能力の低さを痛感してます(涙)。
本文読むのに支障はありません。
Opera6.05使いの人なら許容範囲かしら。(^^;)

→kuuさん、毎度ありがとうございます(^^)

Opera 6.05、やはり大きく崩れてますか。。。結局、どういう状態なのか想像できませんでしたけど(^^;

# トップのイラストがでかいってことだけは分かりました。

まあ、本文が読めているようなので、いつものように、ヨシとさせていただきます。_(._.)_

# イラストのでかさは、今回のCSSのせいじゃない気もする。。。

たぶん、‘position: absolute;’のように absolute を使っているのが原因だと思います。Opera だけでなく、IE でも微妙に変です。IE に関しては、width: の指定を px 単位で指定するのではなく、% 指定にすれば解決しそうですが。

→tsupoさん

IEでも変ですか?
ウチのIE6だと思った通り表示されているんですが。
どのあたりが微妙に変なんでしょう。。。

それに、position: absolute; 以外でこういうのをやる方法ってあるんでしょうか。。。

さっきrelativeにして%にしてみたら、めちゃくちゃになっちゃいました(^^;
また時間のあるときに試してみます。

どうも(^^)

> ウチのIE6だと思った通り表示されているんですが。
それなら問題ないような気もします。

サイドバー自体は IE、Firefox、Opera のどれで見てもちゃんと見えるんですが、サイドバーにはさまれた記事本文のところが、Opera (7.53 を使用)ではちゃんと見えるのに、IE や Firefox だと本文の右の方を見ようとすると、水平方向にスクロールしてしまいます(スクロールバーは表示されていません)。

あと position: absolute; の話ですが、IE だとマウスで記事本文がうまく選択できなくなるという欠点があります。IE の不具合なんですけどね (^^;

→tsupoさん

ご指摘の本文の症状、確認しました。これ、サイドバーを入れ換えてなくても以前からそんな感じに(水平スクロール&スクロールバーなし)になっていたように思います。もともとのテンプレCSSにoverflow:hiddenかなにかが指定されているのではないでしょうか。

個人的にはこれで別に構わないと思って放置してあったのですが(本文の記事自体が隠れることはなく、長いURLが隠れるだけなので)、今後は、長いURLなど裏に隠れる部分がある場合には、overflow:scrollされるよう、気づいた時点で修正しようと思います。

あと、position: absoluteでマウス選択がダメになっちゃうんですか。。。IEめ。。。

コメント、ありがとうございました(^^)

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/1941/4039780

この記事へのトラックバック一覧です: [Typepad] サイドバーの左右を入れ換える(使えなかったスクリプトを使う):

» ネ申 [自己満足なブログ]
またまたデザイン変更なんですが、『facet-divers』さんの、JavaSc [続きを読む]

» IE6でマウス選択ができない問題について [facet-divers]
InternetExplorer6でマウス選択が上手く出来ないというご指摘をいただいていたので、いろいろいじっていたのですが、なんとなくサイドバーの左右を入れ替 [続きを読む]

« [在仏] 自動車運転免許証の書換えについて | トップページ | URL自動リンクのテスト »

contact

検索

無料ブログはココログ
2017年8月
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    

BANNERS