블로그에 작성하는 내용에 따라 이전에 작성한 글 링크나 외부 주소 글을 첨부해야 할 때가 있을 것이다. 이때 링크 글자 색깔만 다르게 해도 좋지만, 배경색 highlight 효과를 주면 마치 형광펜처럼 글자를 더 돋보이게 할 수 있다.
이 글에는 GeneratePress 마케터 테마로 적용하는 방법을 정리했지만, 다른 테마라도 CSS 설정이 가능하다면 충분히 적용할 수 있다.
* 본문 내용 확인 후 맨 아래 첨부한 복사 가능한 코드를 활용해주세요.
위는 본문 글자 검은색에 링크가 옅은 보라색으로 되어 있는 모습이다. 이렇게 하면 글자 색깔은 다르지만, 방문자가 보기에 이것이 링크인지 잘 구분이 가지 않을 수 있다.
하이라이트를 적용하려면 먼저 개발자 검사로 링크 글의 클래스 이름을 확인해야 한다. 보통 이름은 a로 되어 있을 텐데, a만으로 코드를 만들면 블로그 내 모든 클릭 가능한 요소에 배경색이 생겨버린다.
또한 본문 영역에서도 다른 클릭 요소가 있는지 확인이 필요하다. 예를 들어 위처럼 본문 내 모든 영역을 검사해서 코드를 짜면 브레드 크럼과 작성자 이름 주변에도 배경색이 적용된다.
대신 본문 글이 있는 영역만 검사 후 이름 뒤에 a를 붙이면 된다. 위 예시에서는 div.dynamic.entry-content에 a를 붙인 ‘div.dynamic.entry-content a’가 클래스 이름이 되는데, 블로그마다 다를 수 있으니 직접 확인해야 한다.
참고로 위는 앞서 GeneratePress 마케터 테마로 직접 만든 글 페이지인데, 이렇게 검사하면 브레드 크럼, 작성자, 태그를 제외한 본문 영역만 확인 가능하다. (마우스를 잘 움직여서 영역을 확인하자)
관련 글
GP 마케터 테마 글 본문에 브레드 크럼 태그 만드는 방법
워드프레스 페이지 기능으로 공지사항이나 글 모음 페이지를 만들었다면 페이지 영역 이름 확인도 필요하다. 테마에 따라 다를 수 있겠지만, GP 마케터 테마의 경우 따로 검사해서 코드를 적용해야 한다.
관련 글
워드프레스 페이지로 공지사항 만드는 방법 안내
블로그 개발자도구 검사로 CSS 요소 확인하는 방법
페이지 본문의 클래스 이름은 글 화면에 나오는 div.entry-content 또는 개발자 창의 .entry-content:not(:first-child)으로 하면 된다. (뒤에 a 추가) 그리고 아래 설명하겠지만, 링크 글 앞에 아이콘을 적용했는데 이름은 후자로 해야 아이콘까지 잘 나오는 것 같았다. (테마에 따라 다를 수 있음)
글 본문, 페이지 본문 두 개 이름 뒤에 a를 더해서 아이콘과 배경색을 적용하면 위와 같은 모습이 나온다. (아이콘은 인터넷에 특수 문자 복사 검색) 아이콘이 필요 없다면 화면 CSS 창 파란색 여백 위의 ‘::before’에 해당하는 코드 전체를 빼면 된다.
그리고 하이라이트를 적용했는데 글자 줄 바꿈이 있을 때 여백 없이 잘리는 게 싫다면 ‘display : inline-block’을 추가하면 된다. 이렇게 하면 링크가 있는 줄 전체가 하나의 박스처럼 나타난다.
PC 화면에서는 크게 상관없을 지 모르겠지만, 화면 폭이 좁은 모바일에서 유용할 수 있으니 확인하면 좋다.
그런데 본문 영역에 목차 TOC 플러그인을 설정했다면 배경색이 같이 적용되어 버린다. 이건 클래스 이름 자체가 div.dynamic.entry-content a라서 본문 영역에 있는 모든 클릭 가능한 요소가 적용된 이유이다.
다행히 추가 코드를 적용하면 목차 부분의 아이콘과 배경색은 제외할 수 있다.
방법은 간단했는데 목차 박스 이름에 클릭 가능 요소인 a를 붙여 위처럼 설정하였다. (TOC a = 헤딩 글, 접기 박스)
하지만 이렇게 적용하면 약간의 문제가 있는데 기존에 목차 TOC에 적용한 padding과 margin 값이 미세하게 영향을 받는 것 같다. 그래서 목차 박스 이름(Table of Contents)과 헤딩 글자의 간격이 약간 좁아지는 현상이 있는데 아쉽게도 정확한 이유는 알지 못한다.
다만 그 영향이 크지는 않아서 기존 TOC 박스의 CSS 값을 조금만 수정하거나 그대로 사용해도 큰 문제는 없어 보인다. 만약 본문 영역에 TOC처럼 클릭 가능한 요소가 더 있다면 같은 방식으로 진행하자.
위는 전체 코드인데 아래 설명을 참고해서 블로그 CSS 영역에 넣고 저장하면 된다.
– 적용 방법 : (Post Area Name)과 (Page Area Name) 부분에 각각 글 본문과 페이지 본문 이름을 괄호까지 삭제하고 입력
– 글 본문만 설정 시 : ,(쉼표)와 (Page Area Name) a::before 부분 삭제
– (Post Area Name) a:hover : 링크를 클릭했을 때 나타나는 색 (필요 없다면 삭제)
그 외 highlight 간격이나 색깔, 글자 굵기 등은 취향에 따라 변경하면 된다.
관련 글
워드프레스 TOC 쉬운 목차 플러그인 설정 방법
쉬운 목차 TOC 박스 디자인하는 방법
워드프레스 블로그 링크 밑줄 없애는 방법
GeneratePress 마케터 테마 선택 이유와 설치 방법
워드프레스 본문 글 볼드체 이탤릭체 highlight 효과 적용 방법
