[스킨] 티스토리 Portfolio 스킨 수정하기 (커버에 링크 연결하기)

※ 본 게시물은 티스토리에서 제작 한 Portfolio 스킨을 기준으로 작성되었습니다.

최근 블로그를 다양하게 꾸미기 위해 노력하고 있는데 그중 커버 아이템의 타이틀에 링크를 연결하는 방법을 소개해드리겠습니다.

수정 방법

방법은 매우 간단합니다. 우선 스킨 편집 화면에서 홈 설정을 커버로 변경합니다.

스킨 편집 > 홈 설정 > 커버

이후 취향에 맞게 커버 아이템을 추가하고 타이틀을 입력합니다.

커버 수정 > 타이틀 입력

타이틀 입력 후 HTML의 a 태그를 이용하여 타이틀 내용을 감싸줍니다.

그리고 href 속성에는 이동하고자 하는 페이지의 링크를 작성하고, 새로운 페이지에서 창이 열리기를 원하면 target 속성에 "_blank" 값을 입력하면 됩니다.

아래 예시는 타이틀 제목을 클릭 시 새 창에서 https://blog.siyeol.com/ 으로 이동되는 코드입니다.

예시) <a href="https://blog.siyeol.com/" target="_blank"> 타이틀 제목 </a>

커버 수정 > 타이틀 편집

위 단계까지 마무리하고 저장을 하게 되면 아래와 같은 결과 화면을 보실 수 있습니다.

기존의 검은색으로 나오던 커버 아이템 타이틀이 링크로 변경되면서 파란색으로 변경되었습니다.

파란색으로 나오는 타이틀을 다시 기존 색상으로 돌리기 위해서는 CSS 수정이 필요합니다.

결과물 (CSS 적용 전)

개발자 도구를 통해서 확인해보니 커버 아이템 타이틀을 감싸는 클래스는 title_section입니다.

우리는 title_section 내부에 <a> 태그를 작성하였기 때문에 .title_section의 a 태그에 기존 색상을 넣는 코드를 삽입하여야 합니다.

해당 코드는 아래와 같습니다. 코드는 CSS 편집에서 추가해주시면 됩니다.

※ 코드의 위치는 미디어 쿼리에 속하지 않는 부분에 추가해주세요.

.title_section a, a:hover, a:visited, a:link, a:active{
	color: #333; }

최종 결과물

이 과정을 모두 따라하면 위와 같은 결과를 얻을 수 있습니다.

저는 큰 분류로 두가지 카테고리를 메인 화면에 배치하였고 각각의 타이틀을 클릭하면 해당 카테고리 상세 페이지로 이동하도록 설정해두었습니다.