CSSでカラム移動をしたい
- ブログを作成するために、Web Liberty様のWeb Diary Professionalを使用してデザイン変更を行っています。
- しかし、スキンのナビゲーションが右寄りのため、どちらかを左に移動させたいですが、CSSでの変更箇所がわかりません。
- また、カレンダーやプロフィールの位置をバーの中で上下に入れ替えたりする方法についても教えてください。
- ベストアンサー
ＣＳＳでカラム移動をしたい
ブログを作りたく、フリーウエアの Web Liberty様(http://www.web-liberty.net/)の Web Diary Professional(http://www.web-liberty.net/download/diarypro/index.html)をCGIとして使用し、 witchmakers様(http://www.usamimi.info/~witchmakers/)の 3カラムスキン(http://www.usamimi.info/~witchmakers/content/wdp3column.html) をお借りしてデザイン変更を行っています。 しかしこのスキンのナビゲーション(サイドバー)は2つとも右寄りなので、どちらかを左に移動させたいのですが、 ＣＳＳでの変更すべき箇所がわかりません。 一応floatと記述されている所は全て見ていったのですがうまくいきませんでした。 また、「カレンダー」や「プロフィール」の位置をバーの中で 上下に入れ替えたりするのはどうすれば出来るのでしょうか。 こちらにそのままコードをコピペするのは憚られたので念のため、 上記スキンの中のcommon.cssというファイルの中で変更しておりますのでご参照ください。 (お願いしておいて参照も失礼だとは思いますがどうぞよろしくお願い致します。) どうぞお知恵をお貸しください。
- orz1128
- お礼率66% (2/3)
- ブログ
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
確認してみたところ、これはhtml側にも修正が必要かと思います。 <div id="navigation1">内を<div id="logs">より上に移動して微調整すればよさそうです。 「カレンダー」や「プロフィール」の位置についても、html内の該当個所のdivを移動させればよいかと思います。
その他の回答 (1)
- lesstia
- ベストアンサー率45% (44/96)
ソース内容は見ていないのですが、「右寄り」を左に寄せたいとのことなので、CSS内の"right"を探して"left"に変更すれば出来るのではないでしょうか。
補足
ご回答ありがとうございます。 質問内容どおり、「right」と書いてある怪しい部分は 片っ端から「left」にしていったのですが成功せず… 厚かましいですが、具体的にどこの記述をどう直す、と 教えていただけたら幸いです。
関連するQ&A
- CSSでバックグラウンドの入れ方
HTML表示ページ http://www.loplopland.com/cgi-bin/blog/diary.cgi CSSページ http://www.loplopland.com/cgi-bin/blog/skin/common.css CSSで5行目のところにバックグラウンドで画像を置きたいんですが、画像を配置してみたところH3やH4の表題部分の色まで画像になってしまいます。 H3などの所は今のまま色つきの枠にしておいて白い部分だけに画像を配置するにはどうしたらいいでしょうか？
- ベストアンサー
- CSS
- 固定幅で3カラムの記述方法を教えて下さい。
ブログCGIを使おうと思うのですが 使わせて頂きたいスキンが、３カラム（可変幅）なので 中央固定幅の３カラムに変更したくて悩んでいます。 全く思い通りにいかず四苦八苦しておりまして 助言頂ければ大変助かります。 以下ソースですが 自分なりに調べてはみたものの 手を加えるとフッターが上にきたり 右バーが重なったりと、全く手におえず 助言お願いします。 /* ----- 基本構造 -------------------------------------- */ div#container { } div#mainbody { } div#header { float: none; clear: both; height: 80px; } div#menu { float: none; clear: both; height: 30px; } div#logs { margin: 0px 200px 10px; } div#navigation { width: 180px; position: absolute; left: 10px; top: 110px; } div#information { width: 180px; position: absolute; right: 10px; top: 110px; } div#diary, div#comment, div#trackback { } div#page, div#navi, div#work, div#canvas { float: none; clear: both; } div#comment, div#trackback, div#contents, div#form, div#env, div#status { float: none; clear: both; margin: 10px 10px 0px; padding: 0px 0px 5px; border: 1px solid #666666; background-color: #FFFFFF; } div#logs div#comment, div#logs div#trackback, div#logs div#contents, div#logs div#form { margin: 10px 0px 0px; } div#footer { float: none; clear: both; margin: 0px 200px; } div#work { width: 190px; position: absolute; left: 10px; top: 120px; } div#admin { margin: 10px 0px 0px 190px; } 本体CGIは web-liberty様のWeb Diary Professional http://www.web-liberty.net/ スキンをお借りしたのは 海月屋様のSimple1、３カラム http://kurageya.xrea.jp/pc/skinsample/wl/simple1/3.html
- ベストアンサー
- CSS
- オリジナルスキンの作り方
こんばんは。 ブログでオリジナルスキンを作ろうと思っています。 しかし、作り方がわかりません…CSSの知識や、HTMLの知識が無い初心者でも作ることは出来るでしょうか。また、そういったことを教えてくれるサイトを教えてください。探したんですが見付からないので… 因みに、デザインはシンプルな感じにしようと思っています。2カラムにしたり、本文やサイドバーの背景を変えたり出来るような感じにしたいです。 それでは、宜しくお願い致します。
- ベストアンサー
- ブログ
- ナビとコラムをくっつけたい
カテゴリ迷いましたが、こちらに投稿させていただきます。 現在HTML/CSSのタグ打ちでHPを作っています。 画像を参照していただけると幸いです。 今の状態は、ナビ・カラムのどちらかのピクセルを増やさないとヘッダーと同じ幅にならない状態なのですが、ヘッダーと同じ横幅にしようとピクセルを増やすとコラム（左側の広い幅の方）がなくなってしまうんです。 （意味がわからなかったらすみません） 素材を白系のものを使えばごまかせますが、今回は題材的にも画像のような暗めの素材を使いたく、どうにか直したいと思っています。 付け足しで、ページ両サイドの領域に背景や色を入れるにはどうしたらいいのでしょうか？ 無知で申し訳ないのですが、直し方などわかる方いらっしゃいましたら是非ご教示くださいませ。 また、「WEB上で見るとこうなってる」というように分かるようなソースをのぞけるツールなどありませんか？それを教えていただけるだけでもいいです。 補足が必要ならばいたしますので、どうかよろしくお願いします。
- ベストアンサー
- HTML
- Dreamweaver カラム落ち
CSSの勉強をしてまして、 Web標準xhtml+cssデザイン クリエイターが身につけておくべき新・100の法則。 の本の中で 法則50のサンプルデータ（index.html）を Dreamweaver 8 で開くと（デザインビュー） ＃main部分がカラム落ちしてしまいますが なぜでしょうか？ 改善する方法はありますでしょうか？ プレビューで確認すると（ＩＥ6）では問題無いのですが。 教えて頂ければ幸いです。 宜しくお願い致します。 サンプルダウンロードＵＲＬ http://web-100.jp/sample/050.shtml
- 締切済み
- HTML
- アメーバブログで記事とサイドバーの高さが合わない
アメーバブログの編集用CSSを使っています。 CSS編集用のデザインは「カテゴリから探す」→「カスタム可能」を選び、真ん中の列の一番下です。こちらを2カラム・メニュー右で使用しています。 記事とサイドバーの高さを合わせる方法があれば教えてください（画像参照）。
- ベストアンサー
- CSS
- CSSが突然部分的に効かなくなりました。
dream weaver CS5でサイトを製作中 突然部分的にｃｓｓが効かなくなりました。 このサイトです。 http://earthdrive.jp/testspace/tohon/ メインカラムの中の「ネットで申し込む場合はこちら」や フッターなどｃｓｓで装飾してあるのに全然反映してません。 しかしサイドメニューは正確に反映されてます。 リンク切れや綴じ忘れなど色々見ましたがどうしてもわかりません。 さっきまでできてたのに、急にだめになったのです。 メインカラムとフッターのとこだけです。 謎なのは、 dream weaver のプレビューではちゃんと反映されているけど アップして（またはデザインビューで）見ると反映されて無いのです。 すごく困ってます！ ソースとCSS見れる方、なにとぞよろしくお願いいたします。
- ベストアンサー
- CSS
- 3カラムのレイアウト、及びdivの入れ子等
初めまして。 とても基本的なことでお恥ずかしいのですが、 3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。 どうぞ宜しくお願い致します。 下記のように、3カラムの段組みレイアウトを行いました。 左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、 中心部分（#contents）は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。 HTMLでは、可変？させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。 ＜CSS＞ #contents { margin-left:155px; margin-right:155px; } #left { float:left; width:150px; } #right { float:right; width:150px; } ＜HTML＞ <div id="left>あああああああ</div> <div id="right">いいいいいいい</div> <div id="contents">ううううううう</div> ここまでは、問題なく配置させられたのですが、 【#contents】の中に、<div>や<ul>などを使用すると、画像（http://blog.goo.ne.jp/ray-chimin）のような現象が起きます。 ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。 と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;) そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…？ 可能な限りシンプルに、 正しいCSSの使い方でレイアウトしたいと考えております…！(>_<) divの不必要な多用？ （ひとつひとつの画像をdivの中に入れたり、 横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造） は避けたいと思っておりましたが、 もしかして、それがいちばん正しいのでしょうか…？ ご存じの方、どうぞご指南の程宜しくお願い致します！ 散文、失礼いたしました！
- ベストアンサー
- HTML
- 3カラムのカラム落ちについて質問です。
3カラムのカラム落ちについて質問です。 IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。 ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。 <div id="wrap"> <div id="left">左カラム</div> <div id="left">メインカラム</div> <div id="left">右カラム</div> </div> という形です。 --CSS-- #wrap{ width: 970px; margin: 0 auto; background-color: #FFFFFF; height: 100%; min-height: 100%; position:relative; overflow: hidden; } #left{ width: 175px; margin: 15px 15px 0 15px; padding: 0; float: left; display: inline; } #contents{ width: 560px; float: right; margin-top: 15px; display: inline; clear: right; } #right{ width: 175px; margin: 15px; float: right; display: inline; clear: right; } です。 それぞれの中にはmargin やpaddingを使っています。 2日間それで悩まされていますができずに困っています。 IE6以外はすべて大丈夫なので、分かるかた教えてください。
- ベストアンサー
- ホームページ作成ソフト
- 2カラムレイアウトでサイズ可変なCSSレイアウ
例えば、右、左の２つのエリアにわかれた２カラムレイアウトで、真ん中の境界線を右左にずらすことで、ウィンドウサイズはそのままでエリアの領域が可変になるようなレイアウトをCSSなどで実現したいです。 「ウィンドウサイズ 可変」などで検索すると、１つのウィンドウサイズの可変、レスポンシブデザインやリキッドデザインなどの解説はたくさん出てくるのですが、意図することのページがでてきません。 以下のページが実際にやりたいことに似ているのですが、４つのエリアに分かれた領域を自由にサイズを大きくしたり、小さくしたり変更できます。 http://jsfiddle.net/hrfmmymt/f8zs5wsv/ コードを読んでいけば、どうやってやればいいのかわかるかもしれませんが、できれば簡単なサンプルで解説したサイトがあれば助かります。 よろしくお願いします。
- ベストアンサー
- CSS
お礼
ありがとうございました、カラム移動ができました。 途中までhtmlは別ファイルだと思っていたので…orz カラム移動が出来たものの、望む形のデザインにどうしてもならず、 現在奮闘中です。 またご質問する機会があればどうぞよろしくお願い致します。 ありがとうございました。
補足
お手間をおかけしております、本当にありがとうございます。 ご回答下さったhtmlは、common.cssと同階層にあるnavigation.htmlでしょうか… せっかくお答えいただいているのに、こちらの理解力不足で申し訳ございません。 今一通り見て回ったのですが、<div id="navigation1">と<div id="logs">が一緒に記述されているhtmlファイルが見つからないのです。 初心者で、技術が追いつかず本当に恐縮です。 どうかよろしくお願い致します。