[blogteam 블로그 만들기] 타이틀 이미지에 홈페이지 링크달기 (3편)

안녕하세요. [blogteam 블로그 만들기] 타이틀 이미지에 홈페이지 링크달기 편입니다. 후니훈!이 진행하는 티스토리 블로그 만들기 시리즈는 총 15편으로 기획되어 있으며 이번 편부터는 약간의 코딩이 들어갑니다. 저도 전문 프로그래머가 아닌데도 큰 어려움 없이 준비했으니 여러분들께서도 쉽게 블로그를 꾸밀 수 있으시리라 생각합니다. 

이번에는 티스토리 블로그에서 타이틀이미지를 선택하였을 때 홈페이지로 연결시키는 방법에 대해 알아보겠습니다. 사실 어떤 홈페이지를 가더라도 상단 타이틀 이미지를 선택하면 홈페이지로 연결되는 것이 약간 정석이라고 생각되는데.. 티스토리 블로그는 그렇지 않더라고요^^

지금부터 블로그 타이틀 이미지에 홈으로 가는 링크를 걸어보겠습니다. 이번 작업에서는 HTML을 편집해야 하는데 이런 작업을 할 때에는 사전에 스킨을 저장해두는 것이 좋습니다. 혹시라도 잘못했을 경우 복원해야 하는데 꽤나 까다로운 작업인 것 같아요. 스킨 저장은 관리페이지 >> 꾸미기 >> 스킨 페이지에서 가능합니다. 저장시 작업명, 또는 오늘 날짜를 적어주면 나중에 복원하기 편하겠지요?? 

우선 자신이 대문에 등록할 이미지를 업로드 합니다. 관리 >> 꾸미기 >> HTML/CSS 편집에서 두번째 메뉴에 있는 “파일업로드” 화면을 열고, 하단부의 “추가” 버튼을 통해 타이틀에 사용할 이미지를 등록합니다. 이 이미지는 좀 이따 홈페이지로 링크를 걸 때 사용해야 하니 기억하기 쉬운 것을 설정해 두세요. 이미지의 크기는 스킨별로 다르겠지만, 제 경우에는 920 x 170 px을 사용했습니다. 

이미지 등록을 위해 [병로거의 블로그 만들기] 2편에서 보여드렸던 스킨위자드를 다시 실행해 보겠습니다. 스킨위자드는 관리 >> 꾸미기 >> 스킨에 있다는 것 잊지 않으셨죠??

스킨위자드 2번째 메뉴인 “타이틀”에서 직접 올리기를 이용해 이미지를 등록합니다. 스킨마다 최적화된 이미지 크기가 다르기 때문에 분명히 말씀드릴 수는 없지만, 제가 설정한 이미지는 920 x 170 px 입니다. 아쉽게도 현재 스킨의 높이가 사진과 맞지 않네요. 이런 경우에는 어떻게 해야할까요? 

적용을 마치기 전에 타이틀의 마지막 메뉴인 “텍스트”를 들어갑니다. 그리고 높이를 현재 등록한 이미지와 같게 170으로 적용해주면 타이틀 이미지가 이쁘게 나타나는 것을 확인하실 수 있습니다. 

또 한가지 문제가 생겼네요. 이미지는 이쁘게 들어갔는데.. 쌩뚱맞은 블로그 타이틀이 제 눈을 가립니다. 이건 또 어떻게 해결해야 하지요?! 

이제 HTML/CSS 편집으로 넘어가겠습니다. 관리페이지 >> 꾸미기 >> HTML/CSS편집 화면을 접근하여 Ctrl+F를 눌러 <h1> 태그를 검색합니다. <h1>태그 위를 보면 blogTitle이라고 쓰여있지요? <h1><a href="https://blogteam.tistory.com/">blogteam</a></h1> 이 부분을 과감히 삭제해 줍니다. 

적용하기 전에 가장 하단부에 위치한 “미리보기” 버튼을 통해 제대로 등록되었는지 보니 아주 만족스럽습니다^^

이제는 우리의 타이틀 이미지를 블로그 홈으로 연결시키는 링크를 삽입해야 합니다. 방금 <h1> 태그를 삭제한 자리에 다음 코드를 입력해 주세요. 여기서 “파일이름”의 자리에 아까 등록한 이미지의 경로를 적어줘야 합니다. 만약 가운데 정렬이 싫으시면 양 끝의 <center> & </center>를 지워주시면 됩니다. 

<center><a href="https://blogteam.tistory.com/"><img src="./images/파일이름"></a></center>

이렇게 [blogteam 블로그 만들기] 타이틀이미지 홈페이지 링크편을 마칩니다. 정말 메인화면 이미지에 링크가 제대로 적용되었는지 확인하고 싶으시다면 지금 당장! 맨 위로 돌아가 한번 눌러보세요^^ 여기까지 후니훈!이었습니다~~