Blog tip

타이틀을 없애고 이미지로 바꾸기.

손 사랑 2014. 3. 19. 18:04

저는 처음에 이 타이틀이 싫어서 여러번 스킨을 바꾸곤 했어요.

결국은 이미지로 바꾸기로 마음을 먹고 만들기까지..ㅎㅎ


지금 상태는 헤드 부분에 이미지가 드러가 있고 타이틀이 있는 상태에요.

타이틀을 이미지로 바꿔주고 뒷배경 이미지도 없앨 거예요~ 잘 따라 해보아요^0^




우선은 HTML/CSS 편집하는 곳에 들어가야겠죠?

HTML 창에서는 블로그 제목 부분에 이미지 소스를 넣어주는 거예요.


<img src="./images/파일이름" Width="000px" heigth="00px"/><span>    </span></a></h1>

*여기서 파일 이름은 파일 업로드에 올린 파일 이름을 넣어야겠죠? (원하는 이미지를 파일 업로드에 먼저 올리셔야 해요)

*사이즈는 임의로 해두셔도 되고, 올리시는 이미지 사이즈로 맞춰두셔도 돼요.


CSS창에다가는 타이틀 글씨를 나타내지 말라고

#header h1 a span{display:none;} 를 /헤더/ 부분에 h1 가장 윗부분에 넣어주시면 돼요.

*여기서 파일 이름은 파일 업로드에 올린 파일 이름을 넣어야겠죠? (원하는 이미지를 파일 업로드에 먼저 올리셔야 해요)

*사이즈는 임의로 해두셔도 되고, 올리시는 이미지 사이즈로 맞춰두셔도 돼요.

(파일 업로드에 관한 내용은 배경 바꾸는 방법을 다룬 게시물을 보시면 될 거예요.)

미리 보기를 누르시면 이미지가 들어갔고 타이틀 글씨가 없어진 걸 볼 수 있어요.

다음으로 헤더 부분의 타이틀 배경으로 넣어주었던 이미지를 없애고 사이즈를 맞춰볼게요.





CSS에서 헤더 부분의 백그라운드 이미지와 관련된 것을 모두 지워주면 화면과 같이 뒷배경이 사라졌습니다.




아까 HTML에 넣어주었던 소스에서 이미지 사이즈를 여러분이 올린 이미지 사이즈로 맞춰주세요.

헛.. 겹쳐 버렸습니다..-0-;




전 타이틀을 조금 올리고 밑에 간격을 두어야겠어요.

다시 CSS로 가서 padding을 조절해서 탑 부분으로 올리고 밑에 간격을 조금 두었어요.


짜잔~ 타이틀이 올라갔습니다~ㅎㅎ

타이틀을 이미지로 바꾸는 방법이었습니다. 

전 제 블로그를 꾸미면서 후기를 남기는 거라서 기본 스킨이 다르면 소스들도 다를 수 있다는 점 참고하세요~