解決済
2カラムのサイドバーを移動したい＞＜
スタイルシートのカスタマイズに挑戦中なのですが、どうしても2カラムのサイドバーを
左から右に移動することができません。
あちこちのサイトを回って移動する方法はわかったのですが、
公式のテンプレートの
シンプルの『Blackframe』
だけはちょっと異質で、
ボックスの項目も、『float』という単語も、
見つかりませんでした。
お手上げです。
移動方法がありましたらどうかお願いします。
回答(2)
2.
いやいや、
結果としては問題解決になってますし、
それに今回のことで
CSSの仕組みを理解しようとする糸口になりました。
ありがとうございます＞＜
1.
#links{
position:absolute;
top:110px;
left:20px;
…
}
.blog{
position:absolute;
top:97px;
left:230px;
right:0px;
}
のところが位置決めしている部分だと思います。簡単な説明：
position:absolute;
表示される位置をブラウザの表示領域の親要素を基準に絶対的な位置を指定して表示する指定。
top:97px;
上部の位置（書き出しの位置）を左上隅から下に９７ｐｘの位置にする
left:230px;
左部の位置（書き出しの位置）を左上隅から左に２３０ｐｘの位置にする
（左に空間を作る）
right:0px;
同様に親要素の右から自分の右まで０ｐｘの位置
ありがとうございます＞＜
コメント(9)
さっそくの回答ありがとうございます。
さっそくここの数値などをいじってみたのですが、
これは、
記事の文章の部分とサイドバーの文字列の部分の位置が
全体的に移動されるだけでした。
うーん、、むずかしい。
これはいよいよ
CSS系の本を手に入れないといけないかもしれませんｗ
このあと他にも
『position』の単語があるか調べてみたのですが、
あとはカレンダー(かな？)の所だけでした。
いやいやもうちょっとがんばってみたら・
では、もう少し調べてみます。
サイト巡りはもう周りきってしまったので、
だめもとでCSSデータをexcite翻訳に突っ込んでみました。
結果は、
少しCSS弄りがわかりやすくなったのですが、
カラム移動が分かるまでにはいたりませんでした；
もしかしたら
なにか文字列を追加しなきゃいけないのかもしれません。
っとCSS4日目の自分が勝手な判断をしてみる。
もう少し調べてみます。
だめなようなら、
回答１の絶対位置による位置指定はやめにして
float 指定でやってみたら・
#links を
top:125px;
right:0px;
.blog を
left:0px;
right:200px;
ぐらいにして
bodyにある background は切り取って #links に入れてしまうといいかも知れません。
うさこさんありがとうございます＞＜
うーん、でも、それもだめなようでした；
#links{
position:absolute;
top:125px;
left:20px;
right:0px;width:190px;
padding:25px 0px 30px;
background:#fff url('http://image.blog.livedoor.com/img/usr/blackframe/...') repeat-y 0 0;
}
.blog{
position:absolute;
top:97px;
left:0px;
right:200px;
margin:0 auto 30px;
padding:0 20px;
text-align:center;
上のように直してみたところ、
本文のほうは左端のほうにちゃんと寄ったのですが、
サイドバーが固定されたままになってます。
結果http://blog.livedoor.jp/nerido/
CSSは難しい。
やはり無知の状態ではカスタマイズは
思うようにいかないものです；
それで、すいません、本買っちゃいました；
技術評論社の
「スタイルシート上級レイアウト」と
エクスメディアの
「すぐに使えるブログカスタマイズブック」
ちなみにLinkのところが、
#links{
position:absolute;
top:125px;
left:0px;
width:190px;
padding:25px 0px 30px;
background:#fff url('http://image.blog.livedoor.com/img/usr/blackframe/...') repeat-y 0 0;
}
でもだめでした。
BLUEPIXYさんのfloat指定のやり方は、
ちょっと自分には難しかったです；
すいません、もう少し勉強してから挑戦してみます。
#links の
left:20px;
は消しちゃってください。
！？
サイドバーが移動しました！
…しかしあれ以降、
いろいろ改造できるようになってしまって；
すいません。
BLUEPIXYさん
うさこさん
貴重な時間を分けてもらって
ありがとうございました＞＜
ところで、
うさこさんのほうで
『この回答で解決』を選びたいのですが、
コメントのほうで回答してもらってるので、
選択できません。
どうしましょうか。50ナレ。
