[티스토리] Tistory의 블로그 제목(블로그 타이틀)에 색상 넣기(꾸미기)

티스토리의 블로그 타이틀은 다소 밋밋하게 표시가 되죠.

"어느 프로그래머의 스마트한 이야기"라는 블로그 제목이 있으면 이 전체의 색상을 바꾸거나 꾸미는 건 쉽지만 부분부분 글자별로 색상을 넣으려면 어떻게 해야 할까요?

이렇게 흰색으로 돼 있는 블로그 타이틀을 아래처럼 부분부분 마디별로 색상을 주려면 어떻게 해야 할까요?

그냥 단순히 CSS 만으로는 불가능하고요.

자바스크립트의 replace(), 즉 치환 기능을 사용하면 아주 간단하게 해결할 수 있습니다.

티스토리의 스킨편집에 들어가서 어느 프로그래머의 스마트한 이야기 이 변수를 찾아야 합니다.

바로 이것이 블로그 제목 즉, "어느 프로그래머의 스마트한 이야기"라고 보여지는 부분입니다.

jQuery로 이 부분을 소스로 표현하면... $("header .title a").html();로 표현할 수 있습니다.

header라는 태그 안에 있는 title이라는 class 안의  a 태그 안의 값을 $("header .title a").html(); 이렇게 표현할 수 있는 것이죠.

<script>
    $(function(){
        var titleStr =  $("header .title a").html();
        titleStr = titleStr.replace("어느", "<font color='#009945'>어느</font>");
        titleStr = titleStr.replace("스마트한", "<font color='#339EDE'>스마트한</font>");
        titleStr = titleStr.replace("이야기", "<font color='#CC6699'>이야기</font>");
        $("header .title a").html( titleStr );
    });
</script>

결과적으로 jQuery를 사용해서 이처럼 블로그 제목의 부분부분을 replace 함수로 치환하면 각 부분별로 색상을 넣을 수 있습니다.

titleStr = titleStr.replace("어느", "<font color='#009945'>어느</font>");

이런식으로 '어느'라는 단어에 색상을 추가할 수 있습니다.

물론, 자바스크립트나 jQuery에 대한 이해가 어느 정도 있어야 이 소스가 이해가 될 것입니다.

이렇게 하고 적용된 소스를 검사해보면 아래처럼 색상이 잘 적용된 것을 확인할 수 있을 것입니다.

참... 소스 적용하는 방법은....

[티스토리 관리자 페이지 > 스킨편집 > html 편집] 으로 들어가셔서 하시면 됩니다.

그럼,,, 티스토리 블로그 꾸미기에 조금이라도 도움이 되셨길 바라면... 이만 물러갑니다^^