【WordPress】【JIN】サイドバーのウィジェットの余白を調整するCSSカスタマイズ

こんにちは😀広瀬ユキです。

今回は、サイドバーのウィジェットの余白を調整するCSSカスタマイズをご紹介します。

カテゴリーやアーカイブなどをサイドバーに設置すると思いますが、デフォルト（初期設定）だと余白がちょっと広いな、または部分的に狭めたいなという場合に有効なカスタマイズです。

ウィジェットをサイドバーに設置する

ウィジェットをサイドバーに設置する方法は、下記の記事を参考にしてください。

【WordPress】【JIN】ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法【WordPress】有料テーマ【JIN】を使っている方向けに、ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法をご紹介します。...

サイドバーのウィジェットの余白を調整するCSSカスタマイズ

では、CSSにコードを追加して、サイドバーのウィジェットの余白をカスタマイズしてみましょう。

CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。

【WordPress】【JIN】ブログのデザインをカスタマイズする方法：2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法：2種類について書きました。【追加CSS】...

コード

/*---サイドバーのウィジェットの余白---*/
#sidebar .widget{
/*外側*/
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
/*内側*/
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
}
/*---サイドバーのウィジェットの余白---*/

#sidebar .widget{
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
}

説明

• 上記のコードはデフォルト（初期設定）の値になっています。お好みの数値を入れてください。
• px＝ピクセル

marginとpaddingの違い

• paddingは枠線の内側のことで、コンテンツ（内容）と枠線との余白のことです。
• border（枠線）はデフォルト（初期設定）で設定されています。サイドバーのスタイルによっては、borderが透明な場合もあります。
• marginは枠線の外側の余白のことです。
• marginには、色を付けることができません。（画像は分かりやすくするために赤にしています。）

サイドバーのウィジェットの余白を調整することができました‼

当ブログのCSSカスタマイズ

当ブログでは、サイドバーのウィジェットの余白を以下のコードで調整しています。

#sidebar .widget{
padding: 15px;
margin-bottom: 15px;
}

このように「padding」だけ使うと、上下左右同じ余白になります。

また「margin-bottom」のように、上下左右のどれか１つのみカスタマイズすることができます。

編集後記

余白を狭めたかったので、このカスタマイズをしてみました。

【WordPress】【JIN】フッターのアーカイブの表記を非表示にする方法【WordPress】有料テーマ【JIN】を使っている方向けに、フッターのアーカイブの表記を非表示にする方法をご紹介します。...

【WordPress】【JIN】ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法【WordPress】有料テーマ【JIN】を使っている方向けに、ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法をご紹介します。...

【GoogleAdsense】アドセンス広告を中央寄せにする方法【GoogleAdsense】アドセンスやアフィリエイトなどの広告を中央寄せにする方法についてご紹介します。...