はてなブログテーマ「stripes」のカスタマイズ（サイドバー編）

はてなブログテーマ「stripes」を、もっとシンプルなデザインにしたい。そんな方のためのカスタマイズです。

いずれのカスタマイズも、管理画面 > デザイン > カスタマイズ (スパナのアイコン) > 「デザインcss」に投入します。投入手順の詳細については、こちらをご参考ください。

※ 2023.7.9 更新
デフォルトのストライプの太さを変更しました。プレビューよりちょっと太め・薄めです。

デザイン & css

サイドバーを白背景に変える

#box2 {
	background: none;
}
@media (min-width: 961px) {
	#wrapper {
		padding-right: 0;
	}
	.entry-footer-modules {
		margin: 0 0 0 -4.8rem;
	}
	#box2 .hatena-module:first-child {
		padding-top: 0;
	}
}
@media (max-width: 960px) {
	#box2 {
		border-top: 1px solid #ccc;
	}
}

サイドバー白背景の、どシンプルバージョン。スマホ側ではサイドバーの上にボーダーが表示されます。

はてな共通ヘッダーとフッターは、現状と同じうすいグレーです (以下共通)。

サイドバーを白背景 + ボーダーに変える

#box2 {
	background: none;
}
@media (min-width: 961px) {
	#box2 {
		border-left: 1px solid #ccc;
	}
	#box2 .hatena-module:first-child {
		padding-top: 0;
	}
}
@media (max-width: 960px) {
	#box2 {
		border-top: 1px solid #ccc;
	}
}

サイドバーの白背景に、境界線を引いたバージョン。

ちなみに「stripes」公開直前までこのデザインでした。

サイドバーを灰背景に変える

#box2 {
	background: #f7f7f7;
}

うすいグレーの背景バージョン。はてな共通ヘッダーとフッターと同じ色にしてあるため、統一感があります。

サイドバーをグラデーション背景に変える

#box2 {
	background-image: linear-gradient(-58.2deg,rgba(40,91,212,.43) -3%, rgba(171,53,163,.15) 49.3%, rgba(255,204,112,.17) 97.7%);
}

グラデーション例はこちらをご参考ください。

全体の背景色を変える + サイドバーにボーダーをつける

はてな共通ヘッダーからフッターまで、まるっと一色に染めるcssです。

見出しストライプの色味も調整ずみ。

body {
	background: #e4dcd3; // このカラーコードが全体の背景色になります
}
#container {
	background: transparent;
}
#box2,#box2::after {
	background: none;
}
.entry-footer-modules {
	background: transparent;
}
.entry-content h2,
.entry-content h3 {
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, #eee 4px, #eee 10px);
}
@media (min-width: 961px) {
	#box2 {
		border-left: 1px solid #ccc;
	}
}
@media (max-width: 960px) {
	#box2 {
		border-top: 1px solid #ccc;
	}
}
#footer {
	border-top: 1px solid #ccc;
}

不具合があればご連絡ください

カスタマイズcssが間違っているなど、不具合がございましたらメールフォームよりご相談ください。

メールフォーム