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

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

ただいまの
回答率

89.69%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 675

alesta

score 14

前提・実現したいこと

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/11/20 11:26

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

    キャンセル

回答 2

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.69%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる