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

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

Minimalism の場合はこちら。

Page移動

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

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

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

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

編集先

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

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

Brooklynは、なぜかブログ説明文が 'max-width: 500px;' と定義されているので、幅を広げた。

意図が分からないので、不具合が出たら変更する。

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

/* ブログ説明文の幅を広げる */
#blog-description{
	max-width: 1280px !important;
}
/* タイトル画像を横いっぱいにのばす */
#blog-title-inner{
	overflow-x: hidden;
	width: 100%; /* 幅100%に */
	background-size: cover;
	margin: 0 auto;
	padding: 0;
	top: 0;
}

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

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

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

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

/* タイトル画像とグローバルヘッダの間の余白を消す */
#blog-title{
	height:185px;
}
/*タブレット*/
@media screen and (max-width: 968px){
	/* タイトル画像とグローバルヘッダの間の余白を消す */
	#blog-title{
		height:205px;
	}
}

Page移動

• ホームページへ戻る