하츠의 꿈

[블로그팁] 폰트변경·위젯·관심블로그 설정방법 본문

블로그&홈페이지 팁

[블로그팁] 폰트변경·위젯·관심블로그 설정방법

명섭이 2009. 9. 6. 11:07

텍스트큐브와 티스토리는 태생이 같기 때문에 유사한 기능이 많다. 특히나 두가지 모두 블로그화면 HTML 편집 기능을 제공하여 아는 사람들은 다양하게 블로그를 운영할 수 있는 자유를 제공한다.

하지만, HTML이나 CSS소스를 보지 못하는 분들은 기능이 있으나 마나지만 아래의 내용을 잘 보면 그리 어렵지도 않다.



텍스트큐브와 티스토리에서 간단하게 폰트모양과 위젯을 삽입할 때의 정렬에 대하여 설명한다. 위젯을 다루는 방법은 방법은 아래의 글을 참조하시길~

텍스트큐브 위젯 추가하기 : http://explanation.textcube.com/26
티스토리 위젯 추가하기 : http://basicengine.tistory.com/3

 

내 블로그 페이지의 관심블로그 순서는 어떻게 정해지나?

텍스트큐브를 사용하는 블로그들이 대부분 사용하는 '관심블로그'.  그런데, 내 블로그 사이드의 관심블로그들의 순서가 잘 바뀌지 않는 것을 알았다.

왜일까?

생각해 보니 얼마전에 관리화면 -> 관심블로그 보기 순서를 [최근 등록 순]으로 해 놓은 것이 떠올랐다. 바로 관리화면에서 관심블로그 보기 순서를 변경하면 블로그 화면에서도 그 순서를 따르는 것이다.

 
나만 몰랐나??

 

위젯을 HTML로 붙일 때 좌우 정렬 방법은?

사이드바에 기본 위젯을 넣으면 가운데정렬로 이쁘게 붙는 데,  내가 직접 HTML로 붙이면 좌측으로 치우친다.  이 때는 아래와 같이 삽입할 HTML에 DIV태그를 둘러싸고 정렬을 주면 가운데로 정렬을 시킬 수 있다.

======== 아래 =========
<div align=center>
 삽입할 HTML
</div>
 


 

전체적인 폰트의 색깔 및 크기 지정

인터넷 사이트의 대부분은 '굴림체' 또는 '돋움체'이다.  조금 변화를 주려고 웹폰트를 이용하는 분들도 많기는 하지만 경우에 따라서 글읽기에 불편을 주는 경우도 많다. 

웹폰트 이용 방법

<style type="text/css">
<!--
@font-face {font-family: 웹폰트이름; src:url(
http://웹폰트URL/웹폰트이름.eot);}
a:link {font-family: 웹폰트이름;font-size: 9pt;}
a:visited {font-family: 웹폰트이름;font-size: 9pt;}
a:hover {font-family: 웹폰트이름;font-size: 9pt;}
a:acvite {font-family: 웹폰트이름;font-size: 9pt;}
body,div,table,tr,td,p,span {font-family: 웹폰트이름;font-size: 9pt;}
-->
</style>

마이크로소프트 오피스 최근 버전을 설치하면 '맑은 고딕'이라는 폰트가 설치된다. 

보기에 나쁘지도 않고 블로그에 적용할 경우 조금은 달라보여서 사용하는 블로그들이 간혹 보인다. 

텍스트큐브 : 관리화면 -> 꾸미기 ->스킨편집 의 style.css 영역
티스토리 : 관리화면 -> 스킨 -> HTML/CSS 편집의 style.css 영역

낯선 분들도 많겠지만 어렵게 생각하지 마시고 ctrl-f 를 클릭해서 검색창을 연다. 'body' 라고 검색을 하면 아래의 그림과 같은 부분이 보일 것이다.

 
아래의 2가지 경우가 존재하며 각 경우에 맞게 내용을 입력한다.

첫번째, body  {....} 안에 'font-family' 라는 것이 없는 경우...  '{' 다음에 font-family: 맑은 고딕;
두번째, body  {....} 안에 'font-family' 라는 것이 있는 경우...  'font-family:' 다음에 '맑은 고딕,'

이렇게 하면 전체적인 폰트의 모양이 '맑은 고딕'으로 변경된다. 블로그 페이지에서 확인하시길.

body 외에도 font-family 를 지정되어 있는 경우가 있다.
이런 경우는 ctrl-f 를 클릭해서 'font-family'를 검색한다.
style.css 영역에서 'font-family:' 다음에 '맑은 고딕,' 라고 입력하면 된다.

Comments