본문 바로가기

블로그/티스토리 블로그를 말하다

티스토리에서 제공하는 스킨 사용도 괜찮은 것 같다

http://kmntop.tistory.com/를 보면서 티스토리에서 제공한 기본 스킨을 조금만 수정하면 아주 보기가 좋겠다는 생각이 들었습니다. 티스토리에서 제공한 스킨은 티스토리를 해보면 알겠지만 많은 특징이 있지만 아래와 같은 특징이 있습니다. 아래 특징외에 스킨 에러도 별로 없습니다. 


스킨위자드 지원 : 위에서 스킨위자드를 말해서 잠시 언급하자면  HTML/CSS를 몰라도 스킨을 본문 글자색의 크기,폭 등을 설정하는 등을 쉽게 하기 위한 것입니다. HTML/CSS 수정할 일이 많은 티스토리 블로그를 한다면 필요합니다. HTML/CSS에 거부감이 없는 사람에게는 스킨위자드가 없어도 상관없지만요. 나중에 티스토리를 하면 알겠지만 스킨에 스킨위자드가 있으면 티스토리가 쉬울 것입니다. 만약 없으면 고생할 각오나 티스토리 대신에 쉬운 네이버 블로그나 다음 블로그를 할 생각을 하기 바랍니다.


최근 치환자 제공 : 티스토리에서 제공하는 스킨은 티스토리에서 제공하는 기능을 거의 제공합니다. 단 최신 스킨에서 지원합니다. 그러니 스킨에서 최신스킨을 고르기 바랍니다. 예전스킨은 문제가 많습니다. 예로 스킨을 배포한 지 몇년이 지난 스킨은 블로그 메뉴인 [ ##_blog_menu_## ] 같은 치환자를 제공하지 않습니다. 그래서 관리에서 화면설정의 메뉴가 안 되는 것입니다.


그럼 아래에서 간단히 티스토리에서 제공하는 스킨에서 타이틀과 글꼴(폰트)를 변경하는 것에 대해 다루겠습니다.


위에 말한 블로그에서 사용하는 스킨은 관리의 스킨에 있는 2단의 아래 그림의 빨간색 사각형 스킨인 TISTORY PAPER입니다. 스킨을 적용시키면 타이틀과 글꼴(폰트)을 변경하는 것에 대해 아래에서 적겠습니다.



타이틀 제거




여기에서 설명하는 스킨의 타이틀 이름은 title.png이며 위 그림의 빨간색 사각형 이미지를 삭제하는 것을 설명할 것입니다. 관리의 HTML/CSS 편집의 style.css에서 title.png를 쓴 곳을 찾습니다. 그곳은 아래 그림처럼 파란색 부분을 찾고 그 부분이 제목이니 삭제하면 블로그의 제목이 삭제됩니다. 참고로 아래 그림의 파란색 배경의 * html 은 익스플로러6이 투명 PNG 즉 투명인 타이틀 표현못하니 이것을 해결해주기 위한 익스플로러6 핵이더군요. 이것은 2013/11/11 - 뭔가 했는데 익스플로러 핵이었구나!에서 적었습니다.



위와 같이 css를 삭제해도 되지만 티스토리가 제공하는 스킨에서 아래 그림처럼 파일업로드에서 타이틀 파일을 제거해도 됩니다. 어떤 방법이든 여러분이 편한 것을 하세요. 



title.png를 그대로 수정하여 그대로 사용할 수 있습니다. title.png는 블로그 제목 이미지니 포토샵과 같은 그래픽 프로그램으로 수정한 후 다시 올리면 됩니다. 내려받기(다운로드)는 아래 그림처럼 타이틀 파일을 마우스 오른쪽 버튼을 사용하여 선택하여 다른 이름으로 링크 저장으로 저장할 수 있습니다. 참고로 제가 사용한 브라우저는 익스플로러가 아닌 크롬입니다.



참고로 보통 티스토리에서 제공한 스킨의 타이틀 이미지는 title.파일형식이이고 위와 같이 타이틀 이미지는 위와 같이 수정할 수 있습니다.. 티스토리에서 제공하는 스킨에서 타이틀 이미지는 이름은 거의 title.png 라는 것을 알아두세요. 


어려운가...어려우면 천천히 시간을 갖고 하세요. 시간도 없는데 빨리 하려고 하면 무조건 안 됩니다.


글꼴 변경


글꼴(폰트)를 변경하기 위해 아래 그림처럼 style.css의 /* 본문공통 */에서 돋움 다음에 나눔바른고딕,NanumBarunGothic,나눔고딕,NanumGothic,'맑은 고딕','Malgun Gothic',를 추가합니다.



그런 후 왼쪽의 스킨을 클릭하고 상단의 스킨위자드 버튼을 누릅니다. 그런 후 아래 첫번째 그림처럼 게시글 탭을 누르고 적용 버튼을 누릅니다. 이번에는 블로그 타이틀 글자의 크기를 크게 하기 위해 아래 두번째 그림처럼 타이틀 탭에서  텍스트를 누른 후 24px로 하고 적용을 누르면 글꼴 설정이 끝납니다. 설명하는 저도 우습게 왜 이렇게 해야 하는지 모르겠네요. 단지 경험상 이렇게 하니 됐다고 말할 수 밖에 없네요.



글자의 크기와 색은 여러분이 적당하게 하세요. 게시글을 글 내용의 크기이고 제목은 글 제목입니다. 이래서 스킨위자드가 있는 스킨이 쉬워서 좋다는 것입니다. 클릭만 하면 되니까요. 만약 스킨에 스킨위자드가 없다면 style.css에서 관련 항목을 찾아 수정을 해야 합니다. CSS를 모르면 수정을 못할 것이거나 잘못 수정하면 스킨이 아닌 블로그를 망칩니다. 이러니 티스토리는 어려워 네이버나 다음 블로그를 하는 것입니다. 그냥 네이버나 다음을 하는 것이 아닙니다. 


참고로 일반적으로 스킨의 글꼴(폰트)를 변경하고자 한다면 style.css body에 있는 돋움(Dotum)앞에 나눔바른고딕,NanumBarunGothic,나눔고딕,NanumGothic,'맑은 고딕','Malgun Gothic',을 추가하면 됩니다. 이렇게 해도 안 될 수도 있습니다. 위의 스킨에서는 안 됐잖아요.

  • BlogIcon StarPlanet 2013.11.14 07:10 신고

    우와~ 이런 강의가 필요했었는데 감사합니다.
    저같은 초보에게는 좋은 강의^^
    어떤 블로그 가면 큰 고화질 사진을 화면 가득하게 있는
    그런 스킨이 있던데 이런게 있으면 좋겠구나 했어요.
    제 스킨은 최대사이즈가 정해있네요.

    • BlogIcon 백전백승 2013.11.14 15:52 신고

      고화질의 원본 사진을 보고 싶다면 클릭하라고 하세요. 그리고 글에서 스킨위자에서 글영역의 넓이를 크게 하면 사진을 크게 삽입됩니다. 사진을 많이 많이 글에 삽입한다면 1단 스킨을 고려해보는 것도 좋을 것 같아요.

  • BlogIcon 도플파란 2013.11.14 09:19

    제공하는 것도 쓰기 좋은 것이고.. 컴스텀 스킨을 만들때, 기초를 써도 좋은 것인데.. 다만.. 제가 원하는 사이즈가 없다는게..ㅎㅎ 그래서 일정부분 수정이 불가피 하더라구요.

  • BlogIcon 알송달송IT세상 2013.11.14 12:27

    몇년 동안은 티스토리 제공되는 팀블로그 기본스킨으로 심플하게 써 왔는데 나름 괜춘했습니다 일부 누락된 기능이 없어서 수정 추가 사용했지만 말입니다

    • BlogIcon 백전백승 2013.11.14 15:56 신고

      저의 경우도 처음 티스토리 팀블로그 스킨은 아니지만 기본스킨을 썼는데 티스토리에서 제공한 스킨은 기본에 충실하더라고요. 말씀대로 몇군데만 수정했어요.

  • BlogIcon Hansik's Drink 2013.11.14 12:54 신고

    해보고 싶은 스킨들이 참 많더라구요 ㅎㅎ
    잘 보고 갑니다^^

  • BlogIcon +요롱이+ 2013.11.14 13:42 신고

    좋은 포스팅 너무 감사합니다.
    덕분에 잘 보구 갑니다^^

  • BlogIcon 해피로즈 2013.11.14 14:11

    백전백승님 안녕하세요?
    백전백승님께 도움을 좀 구하고자 이렇게 글 남깁니다.
    오늘 제가 포스팅 한 글을 뷰에도 송고를 했는데요,
    아침엔 잘 올라간 듯 했는데, 나중 제목을 약간 수정하는 과정에 뭐가 잘못되었던 건지 뷰에서 저의 글 제목 클릭해서 들어가면 잘못된 주소이거나 비공개 또는 삭제된 글이라고 떠있네요.
    이것을 어떻게 해야 할까요?
    저는 어찌 할 방법을 몰라서 이렇게 죄송한 글 올립니다.
    도와 주세요.^^

    • BlogIcon 백전백승 2013.11.14 15:45 신고

      저도 글의 주소에 대한 이상이 있는 것 같아 다음뷰에서 해결해야 할 것 같은데요. 저의 답변은 다음뷰에서 해결입니다.

      아래는 해피로즈님의 글에 있는 다음뷰 추천 위젯을 해결에 대한 방법이지만 몇자 적어봅니다. 아래와 같이 할지는 해피로즈님이 선택하세요.

      1. 다음뷰 추천 위젯 삭제와 다음뷰에서 글 삭제 : 해피로즈님의 다음뷰에 가서 그 글의 제목에 마우스 커서를 올리면 그 글을 삭제할 수 있는 버튼이 나타납니다. 그때 글을 삭제 버튼을 눌러 글을 삭제합니다. 그러면 자신의 다음뷰에서도 삭제되고 자신의 티스토리 블로그에서도 추천 위젯이 삭제됩니다. 그러면 추천 이런 것은 모두 없어진다는 것을 알아야 됩니다.

      2. 다음뷰에 다시 글 송고와 글에 다시 추천위젯 나타내기 : 글을 다음뷰의 반려동물에 보내니 다음뷰의 반려동물 트랙백 주소가 http://v.daum.net/trackback/pet 이니 이곳으로 글을 보내면 다시 다음뷰 추천 위젯이 나타날 것 같은데 어떻게 될지는 저도 모르겠습니다. 그냥 저의 생각입니다.

      위 1번에서 삭제했다고는 하지만 트랙백을 보낸 기억하고 있어 보낼 수 있는지는 저도 확실히 모르겠습니다. 보통 트랙백 주소를 삭제해도 트랙백을 다시 못 보내는 경우가 많거든요.

    • BlogIcon 해피로즈 2013.11.14 18:11 신고

      백전백승님, 바쁘실텐데 이렇게 친절하게 알려주셔서 고맙습니다.
      그리고 귀찮게 해드려 죄송합니다.^♥^
      그냥 다음블로그 운영할 때는 겪어보지 않은 오류인데,
      티스토리는 역시 저에겐 어렵네요.

      다시한번 백전백승님께 감사 인사 드립니다.

  • BlogIcon GreenPong 2013.11.15 00:25 신고

    저는 티스토리를 하면서 HTML에 대해 관심이 생겼지요~ 지금은 초보라서 모든것이 서툴러서 티스토리에서 제공하는 스킨을 사용하고 있지만 언젠가 제가 작업한 스킨을 사용하고 싶어요 +_+~

    • BlogIcon 백전백승 2013.11.15 18:29 신고

      티스토리를 꾸준히 하다보면 스킨을 배포하는 수준에 도달하실 것입니다. 제가 그렇게 됐거든요. 처음에는 티스토리에서 제공하는 스킨을 쓰다가 지금 이 스킨은 티스토리 블로거가 배포하는 스킨을 수정해서 사용하고 있고 스킨도 배포하고 있거든요. 단 꾸준히 해야 한다는 조건입니다. 제가 3년 이상을 했거든요.

  • BlogIcon StarPlanet 2013.11.15 05:49 신고

    오호~ 간단하게 1단스킨이 방법이었군요.
    티스토리 스킨이 너무 많아서 스킨 적용하고 또 확인하고 그런게
    진짜 힘들었었는데...감사합니다.

    • BlogIcon 백전백승 2013.11.15 18:32 신고

      티스토리에서 제공하는 1단 스킨도 많으니 마음에 드는 것 적용해 보세요. 손해볼 것 없잖아요. 그리고 티스토리를 오래하다 하다보면 자신도 모르게 노하우가 쌓이는 것을 확인할 수 있습니다.

  • BlogIcon SenseChef 2013.11.15 09:46 신고

    스킨 위자드를 사용하지 않고 일일이 스킨에 들어가서 수동으로 설정했었는데 쉬운 방법이 있었군요. 글꼴 변경이 이렇게 쉬운데 안 하고 있었네요 ^^ 잘 보고 갑니다.

  • BlogIcon 밤송이  2013.12.03 11:24 신고

    도움이 되었습니다
    감사합니다^0^

  • BlogIcon ghtthe 2016.12.21 14:32 신고

    제가 그 스킨 쓰고있었는데 어떻게 제목을 바꾸는지 몰라 한참 고민했었습니다. 정말 감사합니다!