質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1688閲覧

Wordpressの3カラム表示について

alesta

総合スコア16

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/11/20 02:22

編集2016/11/20 07:09

###前提・実現したいこと

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)・・・左サイドバー

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/11/20 02:26

使用されているテーマは自作テーマでしょうか?その場合HTMLを質問文に追記されたほうが回答を得られやすいと思います。
guest

回答2

0

自己解決

3カラムをあきらめ2カラムに戻した。

投稿2016/11/24 01:37

alesta

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

どんな状況かわかりませんが、まず大枠だけで組んで、内容を詰め込んで見て動作確認すれば解決するかもですね。

それかjavascriptで要素置き換え。

投稿2016/11/22 05:58

KatsukiSugiura

総合スコア335

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問