大輔べ

登山・写真・チェンマイ・台湾が好きな「たしろだいすけ」のブログ

Zenbackの関連する記事で横がくっついていた!原因はBootstrapだった!

このブログでは「Zenback」を利用して、関連する記事(画像+テキスト)を表示しています(2016年11月23日時点では利用していません)。

たぶん、Bootstrapを3.0.3にしたときからなのでしょうが、その関連する記事同士の横の空きがなくなり、くっついた状態で表示されていました。

今回はその原因と、修正方法を紹介します。

くっついた原因を探る

まずは、くっついた原因を探ります。こんなときは「Firebug」の出番です!

ポチ、ポチッとして、CSSをいじってみると原因が判明しました。

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

どうやらbox-sizingプロパティの値がborder-boxになっていたからのようです。

box-sizingプロパティをcontent-boxにする

ということで、Zenbackの関連する記事の部分だけ、box-sizingプロパティの値がcontent-boxになるようにしました。

#zenback-related-article .hasthumb {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

以上で、横が離れて表示されるようになりました。