【無料はてなブログ】【Minimalism】ブログ名 タイトル 画像 を横いっぱいに広げて 下の余白を消す

適用しているデザインテーマは Minimalism 。

Brooklyn の場合はこちら。

Page移動

• 【Brooklyn】ブログ名 タイトル 画像 を横いっぱいに広げて 下の余白を消す

ググると標準機能を殺して設定しているものばかり。

標準機能を殺すと、画像を変えたいときにCSSを編集し直す必要があるので、標準機能を使った画像変更だけで行えるようなカスタマイズにした。

環境によって数字は変える必要がある。

編集先

デザイン > カスタマイズ > デザインCSS

ブログタイトルのヘッダ画像を横いっぱいに広げる

以下のコードを書き加える。

/* タイトル画像を横いっぱいにのばす */
#blog-title-inner{
	overflow-x: hidden;
	width: 100%; /* 幅100%に */
	background-size: cover;
	margin: 0 auto;
	padding: 0;
	top: 0;
}

ヘッダ画像とグローバルナビゲーションメニュの間の余白を消す

以下のコードを書き加える。

本当はPCとタブレット縦、スマートフォンで余白が違うので、それぞれに設定が必要だが、PCとスマートフォンの余白を消すための数値。

様々な設定に数値は依存するので、環境により数値は変更すること。

/* タイトル画像とグローバルヘッダの間の余白を消す */
#blog-title{
	height:135px;
}
/* ブログ説明文を上にずらす */
.header-image-enable #blog-description {
	margin-top: -30px;
}
/*タブレット*/
@media screen and (max-width: 968px){
	/* タイトル画像とグローバルヘッダの間の余白を消す */
	#blog-title{
		height:170px;
	}
}

Page移動

• ホームページへ戻る