wordpressのテーマを制作しているのですが、Bootstrapに苦戦しています。
php
1<div class="container"> 2 <!--↓コンテンツ↓--> 3 <div class="row"> 4 <!--↓記事一覧↓--> 5 <div class="col-md-8 col-xs-12"> 6 <div class="row"> 7 <?php if(have_posts()): while(have_posts()): the_post(); ?> 8 9 <div class="col-xs-12 col-sm-4" style="margin-bottom: 30px; padding: 0 10px 0 10px;"> 10 <div class="row"> 11 <div class="col-sm-12 col-xs-4"> 12 <a href="<?php the_permalink() ?>"> 13 <?php the_post_thumbnail( 'thumbnail', array('class' => 'thumbnail img-responsive', 'style' => 'margin:0 auto;') ); ?> 14 <!--サムネイル--> 15 </a> 16 </div> 17 18 <div class="col-sm-12 col-xs-8"> 19 <a href="<?php the_permalink() ?>"><h2><?php the_title(); ?></h2></a> 20 <p><?php the_excerpt(); ?></p> 21 </div> 22 </div> 23 </div> 24 25 <?php endwhile; else: ?> 26 <p>投稿記事はありません。</p> 27 <?php endif; ?> 28 </div> 29 </div> 30 <!--↓サイドバー↓--> 31 <div class="col-md-3 col-md-offset-1 col-xs-12" style="background-color: #fff;"> 32 <sidebar> 33 <div class="row"> 34 <div class="col-xs-12" style="margin-bottom: 30px"> 35 <h3>カテゴリ</h3> 36 <ul> 37 <li></li> 38 </ul> 39 <h3>アーカイブ</h3> 40 <ul> 41 <li></li> 42 </ul> 43 </div> 44 <div class="col-xs-12" style="margin-bottom: 30px"> 45 <h3>おすすめトピック</h3> 46 <div class="col-xs-6">タイトル</div> 47 <div class="col-xs-6">タイトル</div> 48 <div class="col-xs-6">タイトル</div> 49 <div class="col-xs-6">タイトル</div> 50 <div class="col-xs-6">タイトル</div> 51 <div class="col-xs-6">タイトル</div> 52 <div class="col-xs-6">タイトル</div> 53 <div class="col-xs-6">タイトル</div> 54 <div class="col-xs-6">タイトル</div> 55 </div> 56 </div> 57 </sidebar> 58 </div> 59 </div> 60 </div>
まだテンプレートタグに置き換えきっていないですが、主要部分は上記のとおりです。
カラム一つ一つにpaddingを左右につけてカラムとの間を確保しています。
このカラムの背景に色を付けたいのですが、カラム間はbodyの背景色のままにしたいです。
ですがこのままbackground-colorをカラムにつけてしまうとみっちりくっついたように見える着色になってしまいます。
この場合どうしたら良いでしょうか?
なお、Bootstrap初心者のため間違ったことをしてるかもしれませんので、そういった部分がありましたらご指摘いただけるとありがたいです。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー