JINカスタマイズ

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

 

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

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

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

WordPress有料テーマ【JIN】を使っている方向けの記事です。

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

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

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

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

では、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;
}
/*---サイドバーのウィジェットの余白---*/

/* */ で囲ってある部分はメモ書きなので、削除してもOKです。

【メモ書きなしver.】

#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-bottom外側下
margin-left外側左
margin-right外側右
margin-top外側上
padding-bottom内側下
padding-left内側左
padding-right内側右
padding-top内側上

marginとpaddingの違い

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

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

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

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

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

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

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

編集後記

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

【WordPress】【JIN】フッターのアーカイブの表記を非表示にする方法【WordPress】有料テーマ【JIN】を使っている方向けに、フッターのアーカイブの表記を非表示にする方法をご紹介します。...
【WordPress】【JIN】ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法【WordPress】有料テーマ【JIN】を使っている方向けに、ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法をご紹介します。...
【GoogleAdsense】アドセンス広告を中央寄せにする方法【GoogleAdsense】アドセンスやアフィリエイトなどの広告を中央寄せにする方法についてご紹介します。...

☆クリックで応援お願いします☆

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ