티스토리 타이틀에 링크걸어서 홈으로 이동하기

티스토리 타이틀에 링크걸어서 홈으로 이동하기

네이버에서 티스토리로 넘어온 다음 가장 어려웠던게 이거다.

네이버 블로그도, 아메바 블로그도

타이틀을 누르면 블로그 홈으로 돌아가는게 당연한건데

티스토리는 타이틀을 아무리 눌러도 반응하지 않았다...

그래서 네이버에 열심히 찾아봤는데

방법이 있긴 있었다.

다만 다들 설명이 엄청 어려웠을뿐...

한 달쯤 되니 어떻게 바꾸는지

뭐가 어려웠는지 알게 됐다.

그리고 블로거들이 그냥 막 쓰다보니

쓸데없는 것까지 해야되는게 있었는데

그런거 없이 그냥 바로 하는 방법을 적어야지.

+ 얼마전에 HTML&CSS 편집창까지 바뀌는바람에 못따라하고있는 블로거분들이 많으실 듯..

기초 스킨 변경 가이드까지 함께 기재하였습니다.

단순히 링크를 거는 방법이 필요하신 분이라면 "[2] 타이틀에 이미지걸고 링크걸기" 부터 참고하시면 됩니다.

[1] 기본 스킨 변경

먼저 틀을 잡아줄 스킨을 정합니다.

저는 Photo Essay 스킨을 사용하였습니다.

그냥 단순히 저장하고 다시 블로그로 와보면

이런식으로 표시됩니다.

그치만 저는 위에 있는 글씨도, 글을 표시하는 공간도, 배경도 바꾸고 싶어요.

바꾸기 위해서 다시 관리탭으로 들어가서 "스킨 위자드"를 클릭해줍시다.

스킨 위자드를 클릭하시면

블로그 화면과 아래와 같은 창이 새로 뜨는데

우선 배경색을 없애고 싶으니 이미지 사용을 체크 해제

체크해제하면 이렇게 하얗게 변해요.

배경색상을 클릭해서 원하는 색상으로 변경하실 수 있습니다.

그리고 타이틀 탭을 눌러주세요

타이틀 탭에서도 이미지 사용 해제

그리고 글 영역 넓이에서 넓이를 1000으로 넓게 조정!

그럼 제가 원하는 기본 틀은 잡혔습니다.

쉽다 쉽다

[2] 타이틀에 이미지 걸고 링크 걸기

검색해서 들어오시는분들은 아마 이것때문에 오시는게 많을 것 같아요.

위에 있는 기본적인 변경은 블로그를 하시던 분들이라면 누구나 하실 수 있을 것 같아서..ㅎ

스킨을 고르고 타이틀을 보면 Photo Essay, Tick Talk 같은 글씨가 남아있죠...

그치만 이런 글씨를 클릭하면 블로그 홈 화면으로 돌아오게 됩니다.

따라서 이 글씨들 자리에 타이틀을 넣을건데요.

잘 따라오시기 바랍니다.

우선 꾸미기에 있는 HTML/CSS 편집을 클릭해주세요.

클릭하시면 왼쪽에 블로그 화면이

오른쪽엔 알 수 없는 화면이 뜨는데

그 중 파일 업로드를 클릭하시고

가장 아래있는

추가 버튼을 클릭해서

만들어놓으신 타이틀 파일을 업로드 해주시면 됩니다.

타이틀을 업로드 하고 나면

목록들중에 업로드한 파일이 올라가있는걸 확인하실 수 있습니다.

그리고 다시 CSS를 클릭해주세요.

CSS창 아무곳이나 마우스로 한번 클릭해주신 뒤 Ctrl 키와 F키를 같이 눌러주시면

아주 작은 창이 하나 뜨는데

그 창에다가 저처럼 title.png 를 입력하신 뒤 엔터를 쳐주시면

CSS에 있는 title.png 라는 부분이 하이라이트 됩니다.

그 중에 분홍색 화살표로 표시한 images/title.png 에서 title.png를 지우시고

아까 업로드한 파일명을 그대로 입력해주시면 됩니다.

저는 44.jpg 였으므로 44.jpg를 입력했습니다.

확장자 명에 주의하세요. 확장자(jpg, png...)를 잘못 입력하면 이미지가 나오지 않을 수 있습니다.

그리고 HTML/CSS/파일업로드 왼쪽에 있는 새로고침 버튼을 클릭해보면

(F5 클릭하지마세요...;)

짤린 파일을 확인하실 수 있습니다...;;

걱정마세요.

크기만 조절해주면 됩니다.

아까 올린 이미지파일과 이전에 있던 Photo Essay, Tick Talk 같은 글씨와의 크기가 같지 않기때문인데요.

단순히 자리만 확보해주면 아무문제 없습니다.

자리를 확보하기 위해선 타이틀 이미지 파일의 사이즈를 알아야겠죠!

제 파일은

 

가로 1000

세로 405의 파일입니다.

따라서 다시 CSS 쪽으로 돌아와서

사진에 보이는것과 같이 

width:408;px;height:45px를

(width : 가로 height : 높이 입니다.)

width:1000;px;height:405px 로 바꿔줬습니다.

저랑 똑같이 하지마시구 각자의 이미지에 맞게 바꿔주세요.

그리고 다시 확인해보면!

짜잔! 완성! ㅎㅎ

+ 혹시 궁금해할까! 타이틀 없애기!

아까 찾았던 title.png중

background:url(images/title.png) 를 통째로

지워버리시면 타이틀도 사라집니다.

추가로 궁금하신 점이 있다면 덧글 남겨주세요~

SNS에서도 함께해요!

►Twitter: https://twitter.com/taeheon94

►Facebook: https://www.facebook.com/realtaeheon

►Instagram: http://instagram.com/taeheon94