###前提・実現したいこと
Wordpressを使用してテーマを作成しています。3カラム表示にしたいのですが、両側にサイドバー・真ん中にメインコンテンツを表示したいです。
###発生している問題・エラーメッセージ
コンテンツ・サイドバー1・サイドバー2のようにコンテンツが真ん中に表示されません。
###該当のソースコード
2. Layout #page{background: url(images/bg_header_line.png) no-repeat top center; } #wrapper{width: 950px; margin: 0 auto;} #header{width: 950px; height: 150px; margin-bottom:35px; padding-top: 27px; margin:0 auto; position:relative;} #contents{border: 1px #ddd solid; min-height: 600px; background: rgba(255, 255, 255, 0.7) url(images/bg_contents_top.png) no-repeat bottom center; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#70ffffff,endColorstr=#70ffffff); /* IE */ zoom: 1; /* IE */ } #main{width:300px; padding:25px 20px; float: left;} #side{width:250px; padding:20px 20px 20px 0; float: right;} #left{width:200px; padding:20px 20px 20px 0; float: right;} #footer{ background: url(images/bg_contents_bottom.png) no-repeat top center; padding-bottom:55px; } *:first-child+html #footer{margin-top:-5px;} 4. Main /*** Blog info ***/ div.blog_info{ background: rgba(0, 0, 0, 0.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20000000,endColorstr=#20000000); /* IE */ zoom: 1; /* IE */ color: #5a79ba; font-size:85%; padding: 5px; margin: 0 0 20px; } div.blog_info ul{margin:0;} div.blog_info li{ float: none; padding-left:20px; margin:0 15px 0 5px !important; list-style: none !important } div.blog_info li a{color: #666} div.blog_info li a:hover{color: #333} div.blog_info li.cal{background: url(images/icon_cal.png) no-repeat 0 2px;} div.blog_info li.cat{background: url(images/icon_cat.png) no-repeat 0 2px;} div.blog_info li.tag{background: url(images/icon_tag.png) no-repeat 0 2px;} /*** Contents ***/ img.attachment-post-thumbnail{float: left; margin:0 15px 0 0 !important;} a.more-link{ background:url("images/page-next.png") no-repeat right top; color:#333; font-size:85%; padding:2px 20px 5px 10px; text-align:right; text-decoration:none; margin-left:480px; display:block; } a.more-link:hover{color: #999} /*** Bottom Navigation, Comment Navigation ***/ div.nav-below{margin: 40px 0 0;overflow:auto;} div.navigation{overflow:auto;} div.navigation a{margin-bottom:10px} .nav-previous a, .nav-next a, div.navigation .alignleft a, div.navigation .alignright a{ color:#333; font-size:85%; text-decoration:none; } .nav-previous a:hover, .nav-next a:hover, div.navigation .alignleft a:hover, div.navigation .alignright a:hover{ color: #999 } .nav-previous a, div.navigation .alignleft a{ float:left; padding:2px 10px 2px 20px; background:url("images/page-prev.png") no-repeat left top; } .nav-next a, div.navigation .alignright a{ float:right; text-align:right; padding:2px 20px 2px 10px; background:url("images/page-next.png") no-repeat right top; } 7. widget #side h3{ background: rgba(0, 0, 0, 0.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20000000,endColorstr=#20000000); /* IE */ zoom: 1; /* IE */ margin:20px 0 10px; padding:5px 0 3px 10px; } #side li:first-child h3{margin-top:0;} #left h3{ background: rgba(0, 0, 0, 0.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20000000,endColorstr=#20000000); /* IE */ zoom: 1; /* IE */ margin:20px 0 10px; padding:5px 0 3px 10px; } #left li:first-child h3{margin-top:0;} #footer h3{ background: url(images/bg_footer_title.png) no-repeat; padding-left:15px; height: 42px; } .widget-container a{text-decoration:none;} .widget-container ul li{ list-style: url(images/arrow_list.png); margin-left:20px; } /*** Calendar ***/ #wp-calendar {width: 100%;} #wp-calendar caption { color: #222; font-size: 14px; font-weight: bold; padding-bottom: 4px; text-align: left; } #wp-calendar thead {font-size: 11px;} #wp-calendar tbody {color: #aaa;} #wp-calendar tbody td { background: #f5f5f5; padding: 3px 0 2px; text-align: center; } #wp-calendar tbody .pad {background: none;} #wp-calendar tfoot #next {text-align: right;}
https://gyazo.com/99bfdf2229c1c996601a7b4d527e4872
上のような状況です。
###試したこと
#main,#side,#leftのfloatを変えても解決しない。
###補足情報(言語/FW/ツール等のバージョンなど)
style.cssファイル Wordpress最新版
(#main・)・・メインコンテンツ(中央に表示したい)
(#side)・・・右サイドバー
(#left)・・・左サイドバー
回答2件
あなたの回答
tips
プレビュー