ルクセリタスのサイドバーの余白を無くしてSANGO風に

2019/2/92019/4/23

ルクセリタスのサイドバーは、タイトルの左右に余白ができます。
見やすくて綺麗なのですが、

こうしたい人もいるかと思います。
誰かの役に立つかと思いましたので、私が記述したcssを置いておきます。

ルクセリタスと書いていますが、cocoonとかでもいけます。

1. サイドバーの余白を無くすCSS
2. セレクタの調べ方

サイドバーの余白を無くすCSS

基本

/* サイドバータイトル文字 */
#side .widget h3 {
	color:#fff; /* 好きな色 */
	text-align:left !important; 
	}

/* サイドバータイトル背景 */
#side .side-title {
	margin:0 0 15px 0;
	padding: 10px; /* 背景の幅 10～15がオススメ */
	background: #f27398; /* 好きな色 */
	}

/* サイドバーウィジェット間の余白調整 */
#side .widget { 
	margin-bottom: 35px;
	}

まずはこれをコピペして、管理画面 → Luxeritas → 子テーマの編集 → スタイルシートに貼り付けてください。

サイドバーのタイトル文字にimportantがあるのは、GoogleAdSenseの広告を中央に寄せた時、タイトルも一緒にセンタリングされるからです。
AdSense広告を中央に寄せない人や、そもそもAdSenseのタイトルが中央に来ないよ！って人は必要ありません。

次に、タイトルの余白を消していきます。

タイトルの余白を無くす

#ここにセレクタ名 {
	padding: 0 !important; /* 余白を無くす */
	}

これが基本の形になります。
サイドバーウィジェットのタイトルのセレクタを1つずつ指定していきます。

例えば、このブログでカテゴリーウィジェットと人気記事のタイトルの余白を無くしたい場合は、

#wpp-3 {
	padding: 0 !important;
	}

#categories-2 {
	padding: 0 !important;
	}

こうなります。
まとめて記述してもいいですがわかりやすくしました。

それぞれのセレクタの右にある数字は、人によって違います(ウィジェットを追加した回数で違います)。
自分で調べてください。※ 調べ方は後述します。

ウィジェットの内側のコンテンツの余白調整

ウィジェットの内側のコンテンツに対する余白も一緒に書いていきます。

わかりやすいように例を記載しておきます。
全部このブログのものなので、数字は自身で変えてくださいね。

例1：タグクラウドウィジェットの場合

/* タグクラウドウィジェットのタイトルの余白を無くす */
#tag_cloud-3 {
	padding: 0 !important;
	}

/* タグリストの余白調整 */
#tag_cloud-3 .tagcloud {
	margin:0 20px 15px 20px;
	}

例2：カスタムHTMLウィジェットの場合

/* カスタムHTMLウィジェットタイトルの余白を無くす */
#custom_html-9 {
    padding: 0 !important;
	}

/* カスタムHTMLウィジェットの余白調整 */
#custom_html-9 {
	margin:0 20px 15px 20px;
	}

例2：カテゴリウィジェットの場合

/* カテゴリーウィジェットタイトルの余白を無くす */
#categories-2 {
	padding: 0 !important;
	}

#categories-2 ul {
	margin:0 20px 0 20px; /* 左右余白の調整 */
	}

#categories-2 .cat-item-15 {
	margin-bottom:15px; /* 一番下のカテゴリの下部余白 */
	}

カテゴリウィジェットは、ulに対してmargin-bottomを指定すると少し表示が崩れたので、一番下のカテゴリのセレクタに対して単独で指定しました。
他の方法がわかりませんでした(　；∀；)

他に方法があるかもしれませんが、ぜひお試しあれ。