ブログ

サイドバーのウィジェット間の隙間を埋める方法

10ec6370710648014640a335dc2eedc5-1.png

ブログを初めてまだ本格的に見た目を変えてないのですが、変なところがありました。
サイドバーの各項目間の隙間、広くね?

スクリーンショット 2016-01-17 18.11.55-min

前々から気づいてはいたけども、そろそろなんとかしたいと思い、やってみました。

スポンサードリンク


原因

とにかくいろんなサイトをググりました。
「サイドバー 隙間」、「ウィジェット間 スペース」とか。

なんも出てこない。これって俺だけの現象なのか・・・?

でも、何かしらの定義をしてるはずなんで、プログラム読むか!!

ということで、数カ月ぶりにプログラムの中身見ると、ありました。

スタイルシート (style.css)の中にそれっぽいの発見!!!

スタイルシート (style.css)

/*——————————–
サイドバー
———————————*/
#side aside ul li {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#side aside h4 {
font-size: 14px;
font-weight: bold;
line-height: 25px;
margin: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 0px;
}
#side aside #mybox ul li ul li {
font-size: 14px;
line-height: 27px;
}
#side aside #mybox ul {
margin-bottom: 100px;
}

一生懸命sidebar.phpをみてて、サイドバー消したり、ウィジェット再構成したり・・・
あの時間を返してほしい。

ということで、怪しいのは赤字の部分。

これを触ってみました

プログラム編集

スタイルシート (style.css)の下の内容を変えます。

変更前:margin-bottom: 100px;

スクリーンショット 2016-01-17 18.31.41

変更前:margin-bottom: 10px;

スクリーンショット 2016-01-17 18.35.21

 

キターーー\(^o^)/

ブログ始めてからの悩み解消!!!

プログラマーにとってこういうデバック的な作業ってすごい気持ちいいんですよ。

まとめ

サイドバーの空白設定はSidebar.phpじゃなくて、style.css!!

その中のmargin-bottomってところの数値をいじくればサイドバーの謎の空白は治ります!!

同じ悩みに苦しんでいる人に届けばいいな・・・

ABOUT ME
もってぃー
26歳ブロガー/会社に縛られずに生きる働き方を提供。嫌だなーを世の中から少しでもなくして楽しい仲間とともに”全力”で働き、”全力”で遊ぶ人生にチャレンジし続けてます!後悔のない最高の人生へ!!