워드프레스 홈페이지 미디어 쿼리 사용법(GeneratePress 테마)

워드프레스 홈페이지 미디어 쿼리 사용법(GeneratePress 테마).

워드프레스는 네이버, 티스토리만큼 이웃, 팔로우가 활성화되어 있지 않은데
댓글 다는 게 왜 있나 궁금하셨던 분들 계시죠?
이 글에서는 미디어 쿼리를 사용하여 댓글을 없애보겠습니다.


워드프레스 홈페이지 미디어 쿼리 사용법


미디어 쿼리란?

미디어 쿼리는 CSS2부터 시작되어 CSS3에서 본격적으로 쓰이기 시작한 웹 기법이다. 디바이스의 폭이나 높이 등의 정보를 가지고 스타일을 개별적으로 줄 수 있다.

@media 미디어 타입 (너비 및 높이) {
(CSS 입력)
}

출처:나무위키


미디어 쿼리 사용법 모바일 버전

GeneratePress 테마 기준으로 설명하겠습니다.

GeneratePress 테마 외모
외모 → 사용자 정의하기(Customise) 를 클릭합니다.

 

GeneratePress 테마 Additional CSS
하단에 Additional CSS 를 클릭합니다.

 

워드프레스 홈페이지 미디어 쿼리 모바일 화면
모바일 화면에선 굳이 없어도 될 것 같은 댓글

 

모바일에선 자리만 차지하고 굳이 없어도 될 것 같은 댓글을
숨겨보겠습니다.

워드프레스 홈페이지 미디어 쿼리 댓글 숨기기
댓글이 숨겨지고 인기 글이 눈에 더 잘 띄게 됨.

 

미디어 쿼리를 사용하여 댓글 창을 숨기니
인기 글이 눈에 더 잘 띄게 되어
왠지 모르게 사용자의 체류시간이 늘어날 것만 같은 느낌입니다.

모바일 화면으로 전환은 어떻게 하는지,
.comment-area(댓글의 class명)를 어디서 볼 수 있는지 모르시겠다고요?

클릭↓
워드프레스 크롬 개발자 도구 활용법 코딩 몰라도 쉬워요





PC 버전

PC 버전에서 댓글 숨기는 방법도 간단합니다.

워드프레스 홈페이지 미디어 쿼리 Additional CSS
다시 Additional CSS로 들어옵니다.

 

워드프레스 홈페이지 미디어 쿼리 PC 버전 숨기기
댓글 창이 숨겨집니다.

 

PC 버전은 미디어 쿼리 없이 .comment-area display : none 만 입력해줘도 댓글 창이 사라집니다.


코드 공유

@media screen and (max-width: 768px){
.comments-area {
display : none;
}
}


끝으로

댓글 외에도
크롬 개발자 도구의 ‘검사할 페이지 요소 선택’을 활용하여
거추장스러워 숨기고 싶은 것의 class명만 아시면
위 공유해 드린 코드의 comments-area 대신 넣으셔서
여러분이 원하시는 대로 워드프레스 홈페이지를 마음껏 꾸밀 수 있습니다.

추천 글
워드프레스 크롬 개발자 도구 활용법 코딩 몰라도 쉬워요

오늘 글은 여기까지입니다. 읽어주셔서 감사합니다.