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

2019/2/9

ルクセリタスのサイドバーは、タイトルの左右に余白ができます。

見やすくて綺麗なのですが、

こうしたい人もいるかと思います。

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

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

サイドバーの余白を無くす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;
	}

例3:カテゴリウィジェットの場合

/* カテゴリーウィジェットタイトルの余白を無くす */
#categories-2 {
	padding: 0 !important;
	}
 
#categories-2 ul {
	margin:0 20px 0 20px; /* 左右余白の調整 */
	}
 
#categories-2 .cat-item-15 {
	margin-bottom:15px; /* 一番下のカテゴリの下部余白 */
	}

カテゴリウィジェットは、ulに対してmargin-bottomを指定すると少し表示が崩れたので、一番下のカテゴリのセレクタに対して単独で指定しました。

他の方法がわかりませんでした(　；∀；)素人なんです。

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

セレクタの調べ方

cssに記述するセレクタの調べ方ですが、意外と知らない人もいるので簡単な方法を書いておきます。

Chromeブラウザで、自分のブログを開いた状態でF12を押します。

するとデベロッパーツールが開きます。

デベロッパーツール左上のアイコンをクリックします。

この状態で、セレクタを知りたい部分をクリックします。

こんな感じで出てきます。オレンジの部分がそうです。

これを参考にcssを記述してみてください！

もしおかしなところや、こんな説明じゃわかりにくい！

気になるところ等あればtwitterやお問い合わせからお気軽にお問い合わせください。

この記事のカテゴリとキーワード

PCLuxeritas, WordPress