[텍스트큐브]텍스트큐브에 로고를 이미지로 바꿔보자!

텍스트큐브 제공형(?)의 블로그 로고를 이미지로 바꾸는 방법입니다.

 

텍스트 큐브닷컴은 아직 beta 버전이라 스킨편집 기능을 지원하지 않습니다.

그래서 이만 저만 불편한게 아니지요..  다행이도 html 코드위젯은 지원함으로, 그걸이용하는 방법입니다.

예전에 텍스트큐브닷컴 블로그 수정하기 라는 글을 포스팅한적이 있습니다. 꼭참고 하시길 바랍니다.

 

텍스트 로고를 이미지로 바꾸는 방법은 다음과 같습니다.

 

먼저 원하는 로고이미지를 만든후 아무곳(?)이나 업로드합니다. 계정이 있으면 자신의 계정에 올리셔도 됩니다만, 저같은 경우는 아래와 같은 방법을 이용했습니다.

 

 

공지사항에 이미지를 업로드후 해당 이미지 주소를 복사하는 방법입니다.

 

 

이렇게 업로드된 이미지의 주소를 알기위해 이미지 속성을 확인합니다.

 

 

주소는 이런식으로 알아두시면 됩니다.

 

그런 다음 html 코드위젯에 이미지를 넣도록 하겠습니다.

코드위젯은 관리자 > 꾸미기 > 위젯에 위치해 있습니다.

 

 

html 코드위젯을 선택하시고 style을 주시면 됩니다. 예전에 포스팅 했을때도 언급했지만, 스타일의 우선순위는 인라인 > 내부 > 외부 로 인식을 하기때문에 외부보다 먼저인식하는 내부스타일을 이용하는 방법입니다.

 

 

소스는 다음과 같습니다.

 

<style type="text/css">
#header h1 {width:220px; height:35px; background:url(http://fs.textcube.com/blog/0/2036/attach/XA7VmjmTfX.png); text-indent: -99999px;}
* html #header h1 {background:none;  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://fs.textcube.com/blog/0/2036/attach/XA7VmjmTfX.png, sizingMethod=crop);}
</style>

 

저같은 경우는 로고를 투명 png 로 저장했기에, 위와 같이 IE6 핵을 사용했습니다. [참고글]

이미지 주소는 처음 알아낸 이미지 경로를 적어주시면 됩니다.

 

/* 주의 */

1. 로고사이즈(가로,세로)를 꼭 적어주세요.

2. 텍스트를 없애야 하기때문에 text-indent (들여쓰기)를 -99999px 로 주고, 텍스트를 숨깁니다.

3. png가 아닐경우 스타핵을 사용할필요는 없습니다.

4. 스킨마다 class 또는 id 명이 다르니 해당 명을 정확히 입력하셔야 합니다. (여러 방법이 있죠? 소스보기나, 파폭 부가기능을 이용하시면 됩니다.)

 

응용해 보세요.^^