「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

スマホ表示時の黒の背景色を異なる色に変更する方法

Q.スマホ表示時の黒の背景色を異なる色に変更したい

デフォルトではスマホ表示時は、ヘッダーの背景と一番下部のcopyrightの背景、いくつかの見出しの背景色が黒色になってますが、この色を変更する以下の方法で可能です。

A.下記ファイルの該当箇所を編集します

編集するファイル:style_sp.css
編集する箇所:

下記のコードを変更して下さい。

 

30行目

.headline1 {
	margin:0;
	padding:0 15px;
	height:36px;
	line-height:36px;
	font-size:16px;
	background: #222;
	text-align: center;
	color: #fff;
	font-weight: normal;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.headline1 {
	margin:0;
	padding:0 15px;
	height:36px;
	line-height:36px;
	font-size:16px;
	background: #●●●;
	text-align: center;
	color: #fff;
	font-weight: normal;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

 

497行目

#header { background:#000; width:100%; min-height:32px; padding:9px 0; position:relative; text-align: center;}

#header { background:#●●●; width:100%; min-height:32px; padding:9px 0; position:relative; text-align: center;}

 

1058行目

#copyright {
	width:94%;
	height: 40px;
	color:#fff;
	font-size:10px;
	text-align: center;
	background:#000;
	margin:0;
	line-height: 40px;
	padding:0 3%;
}

#copyright {
	width:94%;
	height: 40px;
	color:#fff;
	font-size:10px;
	text-align: center;
	background:#●●●;
	margin:0;
	line-height: 40px;
	padding:0 3%;
}

※●●●はご任意の色番号を記述して下さい

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事