워드프레스 블로그 헤더 header 편집 수정 삭제 없애기 / 원하는 곳 수정하기 (간단 CSS 코드 이용)

오늘 진행할 내용 (이미지 설명)

.site-header {       <------ '.'을 찍고 찾은 이름을 그대로 넣어줍니다.
	display: none;   <------ 해당 부분을 숨기는 코드입니다.
}

본 글은 워드프레스 블로그 원프레스(onepress) 테마에서 작업한 내용을 바탕으로 작성 되었습니다.

그러나 다른 테마의 블로그, 웹사이트, 페이지 등에서도 본 글에서 확인할 수 있는 동일한 CSS 코드를 사용하여 수정하기 때문에 어떠한 웹 페이지에서도 CSS 수정 및 접근이 가능하다면 모든 곳에 적용 가능합니다.

본 글에서 설명드리는 추가 CSS 코드 작성은 사이트의 전체적인 코드를 건드리는 것이 아닌 그저 코드를 덮어서 설정 한다고 생각하시면 됩니다. 때문에 수정을 통해서 문제가 생길 일은 없으니 안심하고 적용할 수 있습니다.

CSS 코드를 통해서 블로그 페이지에서 원하는 부분을 삭제처리 (안보이게)할 수 있습니다.

본 글에서는 헤더 header를 보이지 않게 처리하는 과정을 설명 드리고 있습니다.

이번 CSS 코드를 통해서 헤더( header) 뿐만 아니라 없애고 싶은 모든 부분에 적용 가능합니다.

‘외모’ > ‘추가 CSS’를 선택하여 CSS 코드를 추가하는 페이지로 접근이 가능합니다.

다른 테마나 블로그, 웹사이트 등 에서는 해당 웹을 통해서 ‘추가 CSS’를 수정 할 수 있는 경로를 찾아서 CSS 페이지에 접근할 수 있습니다.

저는 위 이미지에서 헤더 header 부분이 거슬렸는데요. 해당 부분을 삭제 해보겠습니다.

1. 수정을 원하는 페이지에서 키보드 ‘F12’를 눌러서 페이지 코드를 확인할 수 있는 창을 불러옵니다. (구글 크롬 웹 이용)

2. 그 다음 위 이미지에서 화살표로 가리키는 부분을 누릅니다.

3. 수정하고 싶은 A부분에 마우스를 가져다 올려 놓은 후에 해당 A부분을 클릭하여 선택합니다.

그럼 오른쪽 코드창에 파란 배경이 생기면서 강조가 되는데요. 강조되는 부분에서 변경할 A부분의 ‘이름’을 찾습니다.

위 이미지와 같이 코드를 보면 대부분 ‘Class=’ 옆에 있는 이름이 웹 페이지에서 선택했던 A부분에 지정된 이름 입니다.

따라서 ‘site-header’가 웹 페이지에서 선택했던 A부분의 이름이라고 볼 수 있습니다.

.site-header {       <------ '.'을 찍고 찾은 이름을 그대로 넣어줍니다.
	display: none;   <------ 해당 부분을 숨기는 코드입니다.
}

위에 코드를 CSS 편집 창에 넣어 주면 적용이 완료됩니다.

모바일에서 거슬렸던 헤더 부분을 삭제(가리기) 처리를 간단하게 CSS 코드를 넣어 안보이게 적용했습니다.

위에서 부턴 차근차근 따라서 해보면 쉽게 따라해서 적용할 수 있는 부분이니 한번 따라서 적용해 보세요.

관련글