WordPressのデフォルトテーマTwenty Tenのコンテンツとサイドバーのレイアウトの仕組みと、幅の変え方について考えたので、次はコンテンツとサイドバーの左右を入れ替えてみたいと思います。
サイドバーを左に
サイドバーに当たる「primary」が、右にfloatしていましたので、まず、左にしてみます。
#primary { float: left; }ところが、この状態では、サイドバーの位置は動きません。「container」とそのなかの「content」がまだ左にいるので、それ以上は左に行けない訳です。
#container { float: right; }さて、どうでしょうか。ここまででも、サイドバーが左に、コンテンツが右に移動したように見えます。
マージンを調節
「content」のマージンはどうなっていたでしょうか。右に280px、左に20pxでした。右に移動したわけですから、左マージンもいらないし、右に右に280pxも多いですね。幅を全部使いたいので、マージンを0にしてしまいます。
#content { margin: 0 ; }もし、インターネットエクスプローラー以外のブラウザで作業していたら、「よし、これでOK!」となることでしょう。ところがインターネットエクスプローラーで見ている方は、多分サイドバーとコンテンツが重なって表示されてしまったのではないかと思います。
#container {margin: 0 -240px 0 0 ;}これはもともと設定されている上記の「container」のマージンの仕業です。またまた厄介なマイナスのマージンですね。さて、これをどうしたらよいのでしょうか。
全部逆にする
左右を逆にしたい訳ですから、単純に該当部分の左右を入れ替えていけばうまくいくはずです。もう一度やってみましょう。
- サイドバーを左にする
#primary { float: left; } - containerを右にして、マージンも逆にする。
変更前
#container { float: left; margin: 0 -240px 0 0; }↓↓↓↓↓
変更後
#container { float: right; margin: 0 0 0 -240px; } - 最後に「content」のマージンを調整する
変更前
#content{ margin: 0 280px 0 20px; }↓↓↓↓↓
変更後
#content{ margin: 0 0 0 280px; }「content」の右のマージンは特に必要がないので0にしました。
少し回り道をしましたが、これで、Twenty Tenのレイアウトが、サイドバー左、コンテンツ右、に変わりました。このような感じになります。
他にも方法はあるかと思いますが、CSSのみ、修正箇所をなるべく少なく、ということでこの方法にしてみました。
実際に必要なのは最後の部分だけですが、CSSに興味のある方は、始めから試してみても面白いかと思います。
■はじめまして
現在、twenty ten にてＨＰを制作中のものです。
カスタマイズ作業にて、大変参考にさせて頂いております。
■さて
「サイドメニューのドット消去」、
すなわちWebourgeonさんの「リストマーク」と言われる
マークが消えてくれず、数時間詰まっています。。
■経緯
widgetにより設定したサイドメニュー
にプラグインのCategory & Page I c o n sにより
150×50のバナーを9つ導入しました。
この時点で、画像導入は出来ましたが、マーク
は消えません。
次に、ＣＳＳにて下記のみ変更しました。
/* =Widget Areas
————————————————————– */
.widget-area ul {
list-style: none;
margin-left: 0;
}
.widget-area ul ul {
list-style: square; ←←←←←←ココをlist-style: none; にしました。
margin-left: 1.3em;
}
なお、Webourgeonさんの「カスタムメニューウィジェットで自由度の高いメニューをつくる 実践編 その1」～投稿日: 2011年1月27日の中程に記載されている、
「リストマークを画像に変える」
次にリストマークを画像にします。まず、list-style: none でもともとのリストマークを消し、background: url(img/menu1-list.gif) でリストマークを背景画像として表示させます。background-positionやpaddingなどを使ってちょうど良い場所に表示させましょう。
123456 .widget-area .widget_nav_menu li { list-style: none; background: url(img/menu1-list.gif) no-repeat; background-position: 0 8px; padding: 5px 0 5px 15px; }
ここに記載されている箇所のように list-style: none を参考にさせて頂きました。
※他参照
http://d.hatena.ne.jp/paraches/20110304
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1150983451
長くなりましたが、可能であればリストマーク消去の方法をお知らせ頂けないでしょうか？
よろしくお願い申し上げます。
tracks おかもと
tracks さん
いろいろありまして、更新、お返事が滞っておりました。
すみませんでした。もう解決されてしまったでしょうか。
おたずねの件ですが、
.widget-area ul ul を
.widget-area ul li ul li
に変えてみてもだめですか？
もしくはwidget-area の前に
#primary
を付け足してみるとか？
書き出されたHTMLをみて
リストの入れ子の状態や、周辺のクラス名などを確認してみてください。
他の部分との兼ね合いでCSSがうまく効かなくなっていることや、
プラグインの導入によってその辺りのHTMLなどの構造が変わっている事などが考えられます。
もし、まだ解決されていないようでしたら、
またご連絡下さいね。
サイドバーを左にしたくてたどり着きました！
わかりやすいし、どのトピックもすごく参考になります。
このサイトもTwenty Tenを使っているのでしょうか？
ナツコさん
コメントありがとうございます。
このサイトもTwenty Tenの子テーマとして作っています。
ウィジェットをちょっ付け足したりしています。
wpswamp3col のテーマを使っていrのですが、2つあるサイドバーの1個を左側に移動させ、両側にサイドバーを移動するにはどうしたらいいですか？style.cssを変更しましたが、float: left → rightでは、コラムまで左右に移動するだけでサイドバーが、両側に移動できません。
ありがとうございます。
コメントありがとうございます。
ご質問の件ですが、WordPressには本当にたくさんのテーマがあって、テーマの名前を伺っただけですと、どのテーマなのか、どのように使ってらっしゃるのかがわからず、お答えすることが、難しいのです。
特別にカスタマイズしていない、Twenty TenやTwenty Elevenでしたら、ある程度お答えできるのですが….
wordpress-theme.jpのフリーテーマ ４コラム目、１１列目のテーマです。
ダウンロードしたものをそのまま使っています。
john3825さん
ざっとサイトのソースを見させていただきました。
3カラムにしにくい仕組みになっているようですね。
テーマに変更を加えるか、マイナスのマージンを使って実現するか、という感じのようです。
マイナスのマージンの考え方は
Twenty Tenのレイアウトを変える(5)〜コンテンツ中央の3カラムにするの方に書いてあります。
参考にしてみてください。
または、テーマを編集して、コンテンツ部分とサイドバー1をdivで囲ってしまえば比較的簡単にできると思います。
（テーマを作成された方にサポートを受けてみる、などの方法もあるかもしれませんね。）
john3825さん
お使いのテーマのダウンロードへリンクですが、wordpress-theme.jp さんに掲載の許可を頂いていませんので
念のため削除させていただきました。事後報告になって申し訳ありませんが、ご了承ください。
ピンバック: ちょっと分かったかも | 丸型テーブル
ピンバック: 無駄な改造日記 - twentytenを左サイドバーにする