サイドバーの各コンテンツ間の高さ・スペースを調整【Cocoon】

サイドバーにtwitterやページランキングなどのウィジェットを表示させていますが、そのコンテンツ間の高さ・スペースが狭くて少し窮屈に感じたので調整してみました。

カスタマイズコード

.widget-sidebar {
  padding-bottom: 30px;
}

上記のコードを追加CSSか子テーマのstyle.cssに追加し、数値はバランスを見ながら調整してください。上手く反映されない場合はコード内のスペース(改行)を消したり、最悪は手入力すれば大丈夫かと思います。

あまりスペースを空けすぎると間延びしてしまうので、20～50pxくらいが良いと思います。

タイトルのカスタマイズ

各コンテンツのタイトルや背景をカスタマイズする事によって他のコンテンツとの差別化を強調する方法もあります。色を付けたりフォント変えたり・・強弱というやつですね。

.sidebar h3{
  line-height: 10px;
  padding: 8px;
  font-weight: bold;
  font-size: 18px;
  color: #5f5f5f;
  background-color:transparent;
  border-bottom:none;
  text-align:center;
  font-family: 'Baloo Thambi 2', cursive;
}

最初はこの[sidebar h3]のコード内に{padding-bottom}を入れてスペースを確保していたのですが、ここに入れるとサイドバーの一番上から最初のコンテンツの間のスペースも空いてしまうので少しカッコ悪くなってしまいます。

※[Font-Family]は Google Fonts を使っています