- date
- 050202
ナビバーの位置を変更する
2カラムのテンプレートで、記事部分とサイドバーの左右の配置を入れ替えるカスタマイズ。
floatとmarginを使っているタイプ
例） 針ねずみのノート#003
#main {
float:left; → float: right;
border-left:1px solid #999;
border-bottom:1px solid #999;
border-right:1px solid #999;
width:480px;
background:#fff;
}
#navi {
margin: 0 0 0 490px; → margin: 0 490px 0 0;
}両方にfloatをかけているタイプ
#main {
float: left; → float: right;
width: 550px;
}
#navi {
float: right; → float: left;
width: 220px;
padding:10px 10px 10px 0;
}
これで記事とナビバーの位置が入れ替わります。
基本的にはfloatやマージンの方向をそれぞれ左右逆にするだけです。
デザインによってはアイコンやボーダーの位置なども左右逆にしてあげないといけないものもあります。テンプレートに合わせて他の部分も調整してあげて下さい。
Blog Feed
Comments
コメントエリアをスクロールする / スクロールを解除する
ナビバーの位置替え、これがずっと知りたかったのですよ～。
こんなに簡単にチェンジできるとは！
有難うございます(´∀｀)
こちらのページは大好きでよく覗いています。
ブログのテンプレートを配付されているので、とあるブログからsbに変更しました。
いつかこちらのテンプレートを使ってみたいと思っています。
ところでTOPのデザインが素晴らしいのですが、似たようなテンプレートがあれば凄く嬉しいなと思います。
（私もTOPページに使いたいなと思っているので。）
追記ですいません。
今配付されているテンプレートでTOPページのように配置することができれば嬉しいのですが。
そういうテンプレートが欲しいです。
●小夜さん
早くゆってくださいYO!（笑）
CSSだけで制御すると、変更も簡単でよいですよね～
●chocoさん
ええと、トップページというのはblog*citronのことではなくて、web*citronのトップページのことでしょうか？
たとえば小梅のデザインで、3カラム（エントリー部分1本と、ナビゲーションバーが2本の3部構成のもの）がほしいということでしょうか。
それならば出来ますが、3本立てになるためエントリー部分やナビゲーション部分がちょっとずつ狭くなります（笑）
web*citronのトップという事です。
エントリー部分1本と、ナビゲーションバーが2本の3部構成のものが欲しいです。
ちょっとずつ狭くなりますよね．．．
でもエントリー部分は更新履歴にしようと思っているので大丈夫かなと思っているのですが。
無理を言ってすいません。
またまた追記ですいません。
全体の幅を広げるのは、素人では難しいのでしょうか。
●chocoさん
web*citronのトップデザインは配布できませんが、従来のテンプレの3カラム版は考えておきます。
全体の幅を広げるには、それぞれのナビバーやエントリ部分の幅、他数箇所をすべて修正する必要があります。
CSSの知識があればそう難しくはありませんが、間違えるとデザインが大きく崩れます。
ありがとうございました。
出来る日を楽しみにしています。
初心者のくせに、こちらのテンプレートに一目ぼれしてなんとかsbを設置しました。
ナビバーを左側にしたくてCSSを書き換えたいのですが、ユヅさんが教えてくださっている部分が見つかりません。
何行目にあるか教えてもらえませんか？
こんなことまで聞いてしまってごめんなさい m(__)m
●tomoさん
こんにちは。
verupでCSSを書き直していたため見つからなかったのだと思います、こちらの記事の修正が遅れてすみません。
今のバージョンにあわせた説明に変更しておきましたので、これで大丈夫かと思います＾＾
ユヅさん、ありがとうございます。
無事に左側に変更できました。
まだまだ分からないことだらけ...
奥が深いですね ^^;
ユヅさんこんにちは
いつも参考にさせていただいています。今回はナビバーの位置替えとっても参考になりました。ありがとうございます。
今日はプルダウンプラグイン に挑戦してみました。
これからも楽しみに拝見させて頂きます(o*。_。)oペコッ
ユヅさんおはようございます。
私も3カラムにしたくて少しいじったらA^^;;
とんでもない事になりました。
左に移動は出来るのですがw｣w｣w｣
やっぱり3カラムのテンプレートが欲しいです。
ごめんなさい！ちゃんと見ないで
針ネズミの方で3カラムありました。
ちょっと挑戦してみます。