티스토리 블로그에 포스팅을 하다 보면 스킨의 디자인마다 본문 제목의 글자 크기가 제각각이다. 필자가 사용하는 스킨의 경우 타이틀 제목이 작고, 굵기가 얇아서 가독성이 떨어지므로 HTML/CCS의 소스를 수정해서 본문 타이틀의 글자 크기와 굵기를 크게 했다. 포스팅이 전달하고자 하는 내용의 첫 이미지인 타이틀의 가독성이 떨어진다면 내용 전달이 효과적이지 않을 것이다. 글자를 적당한 크기로 수정해서 제목부터 한눈에 들어와야 전달 내용을 효과적으로 제사하게 될 것이므로 소스를 수정해서 글자 크기를 조절하자.






티스토리 블로그 제목 타이틀 글씨 크기 조절하기



작은 타이틀을 수정해서 크게 만들어 놓은 제목이다. 제목이 너무 커도 시각적으로 당황감을 유발할 수 있으므로 적당한 크기로 수정하자.



관리자모드로 들어가서 HTML/CCS를 클릭하고 CCS로 들어간다. Ctrl+F 를 치고 head를 입력해서 헤드 부분을 찾는다. 여기에서 상단의 h2 display의 font size와 font-weight를 수정해주면 된다. font-weight는 %로 되어있을 것이다. 이것을 bold로 바꿔주면 된다. bold는 글자를 굵게 하는 소스이다.



#head { position: relative; padding-top: 100px; width: 100%; text-align: center; }

#head h2 { display: inline-block; margin: 0 0 5px; padding: 0 5px 3px; font-size: 26px; font-weight: bold ; color: #8C8C8C; line-height: 200%; border-bottom: 1px dashed #ddd; text-shadow: 1px 1px #dedede; word-break: break-word; }

#head h2 a { color: #4C4C4C; }

#head h2 a:hover { color: #888; }

#head .date { position: absolute; bottom: -44px; left: -10px; padding: 10px; font-size: 13px; color: #fff; background-color: #555; cursor: default; }

#head .date:before { position: absolute; top: 0; left: -6px; width: 0; height: 0; content: " "; border-top: 20px solid #555; border-left: 6px solid transparent; }

#head .date:after { position: absolute; bottom: 0; left: -6px; width: 0; height: 0; content: " "; border-bottom: 20px solid #555; border-left: 6px solid transparent; }


그 밖에 타이틀의 color를 변경할 수도 있다. HTML의 색상 코드는, 네이버에서 HTML 색상표를 치면 색상표가 나오고 원하는 색상을 클릭하면 색상의 코드가 나온다. 그것을 복사해서 붙여 넣기 하면 된다.



또한 사이드바에 카테고리를 클릭하면 나타나는 본문의 카테고리 목록의 타이틀 크기도 같이 바뀐다. 그러나 본문과 카테고리의 색상은 각각 따로 설정할 수 있다. #head h2 a { color: #4C4C4C; } #head h2 a:hover { color: #888; } 하나씩 설정을 해보면서 조절하면 된다. 스킨마다 약간의 차이가 있을 수 있으나, 기본 내용에서 파생되기 때문에 응용해서 수정을 하면 될 것이다.


블로그 스킨을 최적화해서, 정성 들여 작성한 정보의 내용이 잘 전달될 수 있도록 한다면 구독하는 독자들도 자주 찾게 되는 것 같다. 필자의 경우에도 정돈이 잘 되어있고 가독성이 좋은 스킨을 한 번이라도 더 찾게 된다. 포스팅 내용이 아무리 좋다고 하더라도 시각적으로 혼란스럽거나, 짜증이 나면 보다가 그냥 나가버리게 된다. 정성을 들인 마음은 독자들에게도 통하는 것 같다.


티스토리 블로그 제목 타이틀 글자 크기 조절하기


  1. IT세레스 2016.11.11 05:31 신고

    스킨 수정이 어려우신분들에게 정말 최고의 정보입니다.
    좋은 정보 감사합니다.^^

    • Grandpassion 2016.11.11 11:08 신고

      감사합니다.
      타이틀이 너무 작아서 한 번 고쳐 봤습니다. 오늘도 행복한 하루 되세요^^

  2. 2017.12.04 05:39

    비밀댓글입니다

    • Grandpassion 2017.12.04 06:18 신고

      스킨 마다 만든 사람의 취향에 따라서 다른 것 같습니다.
      필자도 다른 블로그들의 포스팅을 찾아서 참고하여 필자의 스킨을 수정했습니다.
      필자의 블로그 꾸미기 실력은 여기까지입니다.
      티스토리 포럼에 질문을 한 번 올려보세요. 답을 주는 경우가 있습니다.
      아니면 직접 다른 블로거들의 포스팅을 검색해서 수정하셔야 될 것 같습니다.
      감사합니다. ^^

    • MasterHwan 2017.12.04 06:21 신고

      옙 알겠습니다

      답변 감사합니다 :)

      좋은 하루 되세요!

  3. Cacka IMae 2020.03.12 11:18 신고

    https://roachsblog.tistory.com/ <여기들어가시면 됨니다 !

    첫블로그들어오면 이거뜨는거이에요<title>바퀴의 블로그 :: 바퀴의 블로그</title>
    <title> 윈도우10 맥OS 폰트로 바꾸기 :: 바퀴의 블로그</title>
    요기서 잘모르겠습니다

+ Recent posts