본문 바로가기

블로그기초/초보블로거를 위한

블로그 포스트 제목 색 바꾸기

블로그 포스트 제목 색 바꾸기

얼마전 지인의 친구(?)로부터 블로그 포스트 제목 바꾸는 방법을 물어왔습니다.
블로그를 막 시작한 사람의 입장에서 보면 모든것이 어려운가 봅니다.
더구나 html도 모르는 경우라면 더욱더 그럴것입니다.

그럼 간단하게 블로그 포스트 제목을 바꾸는 방법을 설명드리도록 하겠습니다.
포스트제목을 바꾸는 방법은

스킨위자드를 이용하는 방법과 skin.html을 직접 수정하는 방법 2가지가 있습니다.

스킨위자드를 이용하여 포스트 제목 바꾸는 방법

이 방법은 스킨의 종류에 따라서 제대로 적용이 안되는 경우가 있으나 포스트제목을 아주 쉽게 바꿀 수가 있습니다. 아래와 같은 방법으로 하시면 아주 쉽게 변경이 가능합니다. (단 스킨위자드가 없는 스킨의 경우 skin.html을 이용하는 방법으로 변경해야 합니다.)

1. 관리페이지의 스킨>스킨선택을 누르면 아래와 같은 화면이 나옵니다.
   여기서 "스킨위자드"를 클릭합니다.

2. 다음그림처럼 스킨위자드가 실행이 되면 "게시글"을 선택한 후에 
   아래쪽에 있는 "제목 글자색"의 컬러피커에서 컬러를 선택하거나 직접 컬러값을 적어준다음
   "적용" 르면 됩니다.

아주 간단합니다. ^^

 

skin.html 을 이용하여 포스트 제목을 바꾸는 방법

이 방법도 그리 어려운 방법이 아닙니다. 어떻게 보면 더 쉬울 수도 있고 skin.html을 알아야 할 수 밖에 없는 티스토리 유저의 경우라면 이 방법을 통하여 하나 하나 배우는 것도 좋은 방법일것입니다.

1. 관리자페이지의 "스킨-HTML/CSS편집"을 클릭합니다.

2. 아래와 같이 skin.html의 내용이 화면에 표시가 되는데 이곳에서
   article_rep_title 부분을 찾아야 합니다.
(ctrl+F를 이용하여 찾으면 쉽게 찾을 수가 있습니다.)

3. "## _article_rep_title_ ##]" 의 앞뒤에 <font></font>를 적어주면 간단하게 해결이 됩니다.

1) 먼저 변경할 컬러값을 알아내야 합니다. RGB 색상코드표를 참고하여 변경할 제목색상을 메모해두세요.
2) 그럼 변경해보도록 하겠습니다.

변경전

<h2><a href="[##^article_rep_link_^##]">[##^_article_rep_title_^##]</a></h2>

위의 녹색글자부분을 아래와 같이 변경합니다.

변경후

<h2><a href="[##^article_rep_link_^##]"><font color=#00ff00>[##^_article_rep_title_^##]</font></a></h2>

(소스중의 ^ 은 편의상 적은것이므로 실제 적용할때에는 삭제해야 합니다.)

글자색을 변경하는데 사용되는 html 태그가 <font> 태그입니다.
아시겠지만 article_rep_title 은 포스트의 제목이 담겨져 있는 치환자(일종의 변수)입니다.

사용법. <font color="#컬러값">변경할 글자 </font>

위와 같이 수정을 한다음에 미리 보기를 해서 이상이 없으면 저장을 하면 된답니다.

  • 알 수 없는 사용자 2009.07.14 15:01

    잘 읽었습니다~ 제목도 바꾸고, 그럼 다음 팁으로 고~고~! ^^

    • BlogIcon Kay~ 2009.07.25 16:29 신고

      아하.. 이렇게 진도를 나가는데
      전 진도를 못 나가고 있네요.
      진도 다 나가시면 궁금한것 하나만 방명록에 남겨주세요!
      설명해드릴께요! ㅎㅎ

  • BlogIcon sa 2009.07.24 13:47

    질문하나만 드려도 될까요.. 블로그에 있는 home tag media location 이런것들
    위치를 옮길수는 없을까요? 그리그 옆의 검색창까지두요.. 어찌하는지....

    • BlogIcon Kay~ 2009.07.25 16:31 신고

      위치는 얼마든지 옮길 수 있습니다.
      옮기기 위해서는 블로그의 스킨 구조를 알아야 쉽게 바꿀 수 있겠지만..
      일단 헤드 부분에서 좌우 변경 정도라면 제가 메뉴 꾸미는 내용을
      포스팅한게 있으니 참고하세요! (태그를 모르면 조금 어려울 수도 있어요) ^^
      http://ccoma.tistory.com/485

  • 알 수 없는 사용자 2009.07.25 16:50

    저기욤...공부못하는 학생한테 질문하라 그러시면 무지 당황스럽다는~ ^^;
    ㅋㅋ 귀찮게 해드리는것 같아 괜히 죄송해 드린 말씀이구여~ 정말 감사합니다^^ 든든하네염. 저야 좋은 정보 얻었으니 댓글다는게 당연해서 오늘 열심히 달렸습니다만, 일일일 답해주신 kay~님 고생시켜 드린것 같네요 ㅎㅎㅎ

    • BlogIcon Kay~ 2009.08.02 16:57 신고

      ㅋㅋ 아무리 답글달기가 힘들다 하더라도..
      댓글 없는것보다는 훨씬 좋지요!
      질문속에서 저도 포스팅 소재를 얻을 수 있으니
      질문이 저에게 꼭 나쁜것만은 아니랍니다. ^^

  • BlogIcon sa2009 2009.07.28 16:59

    써놓으신 글보고 따라했는데
    정말 그대로 되버려서..ㅋㅋㅋ
    정말 아주 그대로 되버려서요 ㅋㅋ

    그리고 지금 제 블로그를 가보시면..혹시..ㅎ
    제목이미지와 그 밑의 home/tag/media...등
    이 간격과 그 밑의 본문사이에 간격이 너무 벌어져있는데...
    어떤것을 수정해야하는지요
    padding을 수정하라는 케이님의 비앤아이 블로그에서의 글을 보았는데 css를 수정하라는 건가요?
    css어떤부분인지를 잘모르겠습니다....
    너무 귀찮게 해드려서 죄송합니다...

    • BlogIcon Kay~ 2009.08.02 17:07 신고

      아 그대로 되어 버렸나요? ^^ 그렇군요
      제가 블로그에 가봤는데 제목이미지와 그 아래 메뉴사이의 공간은 괜찮아 보이는데..
      메뉴와 그 아래 본문제목 사이의 공간은 중간에 공백이 들어있는것 같습니다.
      티스토리 관리페이지의 html/css를 클릭한 후
      skin.html에서 <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
      을 찾아서 지워보시기 바랍니다.
      물론 해결될지는 의문입니다.

  • 알 수 없는 사용자 2009.12.12 15:08

    저는 왜 적용이 안되는 거죠?
    태그 중에 <s_article_protected>를 <s_article_rep>으로 적용하면 색깔은 먹히지만
    글에 들어 갈 때마다 비밀번호를 입력해야만 합니다
    해결책이 있으신지요

  • 알 수 없는 사용자 2011.04.30 20:59

    와... html/css는 전문적으로하면 매우 어려울것같네요.. ㅠㅠ 그래도 열심히 배워보렵니다!