HTML/CSS 편집 메인 타이틀 이미지를 삭제하거나 간격을 줄여 수정하는 법

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

이 전 글에서 메인 타이틀에 이미지가 없고 텍스트로 되어 있을 경우 메인 이미지를 HTML/CSS편집에서 적용하는 방법을 설명했습니다.

이번에는 적용했던 HTML/CSS 소스를 수정하여 이미지를 삭제하고 타이틀 메뉴창 간격을 줄이는 소스 수정 방법을 설명하겠습니다.

위 참고 이미지는기존의 제가 타이틀 이미지를 적용했던 스샷입니다.

위 참고 이미지는 기존의 타이틀 이미지를 삭제하고 상단 타이틀 창을 수정한 후의 스샷입니다.

티스토리 애드센스의 타이틀 이미지의 높이(height)는 78px이고 이미지를 삭제하고 타이틀 메뉴창 간격을 좁힌 높이(height)는 35px입니다.

간격을 더 줄일 수 있지만 NaVYMoD의 시킨은 상당 우측의 방문자(카운터 모듈) 수와 티스토리의 링크 모듈이 겹치기 때문에 35px로 수정하였습니다.

상단 타이틀 메뉴 창 사이즈를 저와 같이 줄일 수도 있고 반대로 늘릴 수도 있습니다. 우선 관리자 페이지의 HTML/CSS 편집창에서 style.css소스창으로 이동합니다.

/* 블로그 레이아웃 */의 소스 목록 중에서 #header 소의 height의 px값을 수정하여 크기를 조절하시면 됩니다.

#header {

clear: both;

width: /*@post-width:400*/ 1006px /*@*/;

background: /*@title-background-color=*/ #f5f5f5 /*@*/ /*@title-background-image=*/ /*@*/ /*@title-background-image-position=*/ /*@*/ /*@title-background-image-repeat=*/ /*@*/;

height: /*@title-height*/ 69px /*@*/;

position: relative;

}

그리고 한 가지 더 해 주셔얄 할 것이 있습니다. 타이틀 폰트 사이즈를 수정해 주셔야 합니다.

style.css 소스 창에서 #header h1 a 목록으로 이동하여 폰트 사이즈를 수정하시면 됩니다. 타이틀 폰트는 기본적으로 스킨에 따라 다르기는 하지만 NaVyMoD 스킨의 타이틀 폰트는 30px입니다.

#header h1 a {

        color: /*@title-color* / #27517e /*@*/;

        font-family: /*@title-font-family*/ "돋음", dotum, sans-serif; /*@*/;

        font-size: /*@title-font-size*/ 30px /*@*/;

        letter-spacing: -1px;

}

굳이 폰트 사이즈를 수정할 필요가 없다고 생각하시면 수정하지 않으셔도 됩니다. 블로그 레이아웃을 맞추려면 수정하는 것이 좋기 때문에 그런 것 뿐입니다. (메인 타이틀을 삭제를 하면 되지 않냐 고 하 실 수도 있습니다. 이 방법은 다음 기회에 설명하도록 하겠습니다.)

참고로 제가 지난 번 NaVyMoD 스킨에서 이미지를 삽입하고 수정한 소스에서는 하나더 수정해 주어야 합니다.

NaVyMod 스킨은 메인 이미지가 없는 스킨이기 때문에 이미지를 넣기 위해서 소스 코드를 수정했던 소스의 스샷입니다.

/* 블로그 레이아웃 */에서 height의 px값을 수정하고 같은 값을 #header h1 a 목록에서 height의 값은 수정해야 합니다...

#header h1 a {

width: /*@post-width:400*/ 1006px /*@*/;

height: /*@title-height:-56*/ 78px /*@*/;

        background: url("") no-repeat top center;

color: /*@title-color*/  /*@*/;

font-family: /*@title-font-family*/ "돋움", dotum, sans-serif; /*@*/;

font-size: /*@title-font-size*/ 1px /*@*/;

letter-spacing: -1px;

       position: absolute; 50%

}

/* 블로그 레이아웃 */ 값이 35px이고 #header h1 a 목록의 height의 px값이 78이면 43px의 값이 차이가 생기는데 NaVyMoD 스킨 상단 링크 메뉴에 영역을 침범하여 상단 메뉴 클릭이 안되는 오류가 생깁니다.

그럼 좋은 하루 되시길...

writen by 7istory.tistory.com