블로그 본문 내용에 따라 첨부한 이미지에 내부 또는 외부 링크를 걸어야 할 때가 있을 것이다. 이미지에 링크를 걸면 그냥 글자만 있는 것보다 사이즈가 커서 방문자에게 더 효과적일 수 있다.
아래부터 블록/클래식 에디터 설정 내용을 정리했는데 지금 사용 중인 에디터의 내용을 참고하면 된다. 만약 본문 링크 글 요소에 배경색을 추가했다면 링크를 건 이미지에도 영향이 있어서 이를 해결하는 방법도 추가하였다.
1. 블록 에디터 설정 방법
본문에 넣은 이미지를 클릭하면 위쪽에 옵션 창이 나타날 것이다. 차례로 링크와 연필 모양 아이콘을 클릭하고 원하는 url을 입력하면 된다.
이때 주의할 점은 도메인 앞에 https://를 꼭 같이 입력해야 한다. 만약 입력하지 않으면 자신의 블로그 도메인 + 해당 url을 조합한 주소로 이동하는데 아무런 콘텐츠가 없을 테니 빈 화면이 나오게 된다. 만약 이전 글을 첨부한다면 제목을 검색해도 된다.
또한 Open in new tab 버튼을 활성화하면 새 창에서 열리게 할 수 있다. 그 외 아래 LINK REL이라고 보일 텐데 보안과 개인 정보 보호 측면에서 안전한 설정이라 그대로 두면 된다.
2. 클래식 에디터 설정 방법
국내 네이버나 티스토리 블로그를 사용해봤다면 클래식 에디터 메뉴에 익숙할 것이다. 먼저 원하는 이미지를 마우스로 선택 후 위쪽 링크 아이콘을 클릭하면 url 입력란이 나타난다. 블록 에디터와 마찬가지로 https://를 포함한 전체 도메인 주소를 입력한 다음 엔터 키 아이콘을 누르면 설정이 완료된다.
빈 칸에 블로그 이전 글 제목 키워드를 입력하면 선택할 수 있으니 이 점도 참고하면 좋다. 그리고 엔터 옆에 보이는 설정 버튼을 누르면 링크 페이지의 현재 창/새 창 설정도 진행할 수 있다.
3. 링크 이미지 배경색 삭제 방법
본문 영역에서 링크 요소에 배경색과 아이콘을 추가하면 좀 더 방문자가 쉽게 알 수 있는 장점이 있다. 하지만 배경색을 넣은 CSS 클래스 이름이 본문 영역에 모두 적용되기 때문에 위처럼 링크를 건 이미지에도 원치 않는 아이콘과 배경색이 생겨버렸다.
GeneratePress 마테터 테마의 본문 이미지 클래스 이름은 .gb-container .wp-block-image이다. 따라서 해당 이름 앞에 링크(a), 아이콘(::before), 마우스 효과(a:hover)를 설정하면 된다. 이렇게 하면 기존 링크 글 설정은 유지하면서 링크를 추가한 이미지에 있는 아이콘과 배경색을 감출 수 있다.
참고로 사용 중인 워드프레스 테마에 따라 본문 이미지의 클래스 이름이 다를 수 있으니, 개발자 도구로 검사해서 확인하는 것이 가장 좋다.
– transition: transform 0.3s ease-in-out;
– transform: scale(1.05);
추가로 위 두 개 요소는 링크 이미지에 마우스를 올렸을 때 이미지가 천천히 확대되는 애니메이션 기능이다. 마우스를 올려봐도 아무 변화가 없어서 허전해서 추가했는데 필요 없다면 제외하면 된다.
아래 코드를 복사해서 블로그의 설정에 맞게 변경한 다음, CSS 입력란에 넣고 저장하면 적용할 수 있다.
관련 글
GeneratePress 본문 링크만 색깔 바꾸는 방법
워드프레스 본문 페이지 링크 글자 highlight 효과 적용 방법
워드프레스 설정 방법 글 모음
