비지니스 블로그 스킨은 티스토리 스킨으로 비지니스블로그를 타켓으로 제작된 스킨입니다.

현재 계속 업데이트 중이며, 사용자편의성에 맞쳐 수정중입니다.


하지만 현재 사용하시는분들의 대한 가이드가 없어 이렇게 하나 하나 포스팅을 합니다.

먼저 오늘은 비지니스 블로그 스킨의 로고부분을 본인것으로 수정하는 방법을 알려드립니다.


1. 이미지를 수정해서 업로드 하는 방법.

2. 이미지를 사용하지 않고 제목을 글로 사용하는 방법.



1. 이미지를 수정해서 사용하는 방법.

비지니스 블로그 스킨에 포함된 로고는 HTTP 요청 횟수를 줄여줄 수 있는 CSS Sprites 기법으로 제작되었습니다.

즉 이미지 한장으로 두가지 효과를 주는 기법입니다.


높이가 150px 이고, 너비가 전체폭너비인 960px 입니다.

그래서 두개의 이미지 크기가 될려면 높이 300px 가 되어야겠지요...


스킨에 포함된 로고를 포토샵에서 열어봤습니다.




1번에 해당하는 것이 평상시에 보여지는 부분입니다.

2번에 해당하는 부분이 마우스를 올렸을때 보여지는 부분입니다.


그래서 본인의 블로그 로고로 수정을 하실경우는 위와같은 형식으로 이미지를 만들어서 올려주셔야 합니다.

이미지 이름은 logo.png 입니다.


2. 이미지를 사용하지 않고 제목을 글로 사용하는 방법.

이 방법은 제가 css코드를 압축해서 배포를 하기 때문에 수정하기가 좀 어려울겁니다.

하지만 잘 따라하시면 할 수 있으니 해보시기 바랍니다.


이 방법은 제목을 이미지로 사용하지 않고 글자로 보여지게 하는 방법입니다.

해당 스타일을 찾아서 수정해줘야 합니다.

스타일코드를 에디터에서 열어서 #header h1 a 를 검색하세요.





그럼 검색이 될겁니다. #header h1 a {....} 부분과 #header h1 a:hover {....} 부분을 모두 지우세요.

그런 다음 맨 아래에 추가적으로 아래의 코드를 삽입하세요.

#header h1 a {
    display: block;
    height: 150px;
    letter-spacing: 1px;
    line-height: 150px;
    width: 100%;
	font-size: 1.6em;
}
#header h1 a:hover {
	color: #06f;
}

그럼 아래처럼 보여집니다.




위 코드에서 font-size 나 color 정도는 원하는 대로 수정해도 됩니다.


참고.

검색리스트 수정.

자세한것은 배포글 하단에 보세요. http://demun.tistory.com/2188

신고

댓글