상세 컨텐츠

본문 제목

블로그 메인에 텍스트로 되어 있을때 이미지를 넣는 방법

블로그 만들기/기본,수정,활용

by CHO KYUNG WON 2010. 9. 17. 23:21

본문


예전에 블로그 메인에 이미지를 넣는 방법을 알려 드렸습니다. 그러나 그때는 메인 자체에 이미지를 사용하고 있어서 메인 이미지 위치만 알면 파일 업로드를 해서 사용할 메인 이미지의 파일명으로 소스를 수정하면 간단했습니다.

그러나 블로그 메인이 텍스트로 되어 있는 경우가 티스토리 블로그 스킨에서는 상당하게 많습니다. 텍스트로 되어있는 메인을 자신이 좋아하는 사진이나 자신의 블로그 컨셉에 맞는 이미지를 넣는 방법을 알려드리겠습니다.
우선 간단한 예를 들기 위해서 저의 티스토리 애드센스 메인에 이미지를 넣기 전의 참고 이미지입니다.

예제로 사용할 저의 블로그 스킨은 3단형 스킨 NaVyMoD  입니다. (티스토리에 제공하는 스킨 소스가 모두 같지는 않습니다. 스킨마다 소스코드가 다르기 때문에 우선 제가 사용하는 블로그 스킨으로 우선 알려드리도록 하겠습니다.)

블로그 메인에 텍스트로 되어 있을때 이미지를 넣는 방법

먼저 관리자(ADMIN) → 스킨 → HTML/CSS 편집으로 갑니다. skin.html 소스창이 아닌 style.css으로 이동합니다. 그리고 아래의 참고로 올려 놓은 이미지 부분으로 이동합니다.
style.css 소스창에서 위 부분을 찾기가 어렵거나 불편할 경우 저번에 말씀드렸지만 Ctrl+F 단축키를 이용하여 단어 찾기로 하면 찾고자 하는 곳을 쉽게 찾을 수 있습니다.

위에서 찾은 #header h1 a 영역 부분을 아래와 같이 바꿔 주시면 됩니다.

#header h1 a {

width: /*@post-width:400*/ 1006px /*@*/;
height: /*@title-height:-56*/ 78px /*@*/;
        background: url("images/main img 1.jpg") no-repeat top center;
color: /*@title-color*/  /*@*/;
font-family: /*@title-font-family*/ "돋움", dotum, sans-serif; /*@*/;
font-size: /*@title-font-size*/ 20px /*@*/;
letter-spacing: -1px;
        position: absolute; 50%
}

소스코드를 위와같이 수정해 주시면 아래의 참고 이미지처럼 메인에 적용된 것을 확일 할 수 있습니다.
참고로 위 소스 부분에서 간단하게 몇 가지 알려 드리면 no-repeat top center;에서 top center을 삭제하면 좌측으로 자동 배치됩니다. 그리고 font-size에서 20px값을 수정하면 수정한 값에 맞게 사이즈가 수정됩니다.

후에 메인 이미지를 넣었지만 텍스트는 그대로 남아있을 것입니다. 텍스트를 삭제하거나 안보이게 하는 방법을 설명해 드리겠습니다.
writen by 7istory.tistory.com


         

관련글 더보기