D.H Portfolio

티스토리 스킨 제작 HeeD 3종 본문

웹디자인. 퍼블리싱

티스토리 스킨 제작 HeeD 3종

Hi hiGood 2014. 1. 9. 10:19

티스토리 스킨 배포 HeeD 3종

 

심심해서 제작해 본!!

티스토리 추천 스킨 HeeD Basic, HeeD White, HeeD White pink 이렇게 3종 스킨을 준비 하였습니다.

최대한 심플하고 깔끔한 현재 트랜드에 충실한 스타일로 제작하였으며

소스 수정이 어려운 분들을 위해 커스텀마이징이 가능하도록 티스토리에서 제공하는 

스킨위자드, 메뉴설정, 플러그인 기능등 완벽 지원합니다.

 

맘에 드는 스킨이더라도 스킨위자드 기능이 없으면 소스 수정에 대한 지식이 없는 사용자에게 간단한 수정조차도 참 힘든 일입니다.

제작 스킨중에 스킨위자드를 지원 하지 못해 아쉬운 분들에게 좋은 스킨이 될 것 같습니다.^^

 

 

 

HeeD Basic

 

 

 

 

 

HeeD White

 

 

 

 

 

HeeD White pink

 

 

 

HeeD 3종 스킨 

 

제작자 |

HeeD (http://hiheed.tistory.com)

hiheed@tistory.com

 

저작권 |

자유롭게 수정이 가능하며, 저작권 표시하에 마음대로 사용 가능하십니다.

 

지원 |

 메뉴설정  스킨위자드

 

웹표준을 준수한 XHTML 기반의 Tistory 기본 스킨입니다. 시맨틱한 웹을 유지하기 위해 디자인 부분을 style.css 파일에 독립시켜 적용하였으며 자유롭게 디자인을 수정하실 수 있습니다. 블로그 정보 이미지 가로 사이즈 228px, 컨텐츠의 가로 사이즈 741px, 사이드바 250px에 최적화되어 있으며 기본적인 레이아웃 변경은 스킨 위자드 기능을 통해 하실수 있습니다.

 

다운 |(수정업글 2014.4.2)

 

HeeD Basic.zip

 

HeeD White.zip

 

HeeD White pink.zip

 

스킨사용법 |

1. HeeD 스킨을 다운 받는다

2. 압축을 풀어 폴더안의 파일(images폴더안 파일도 포함)을 관리자-스킨-스킨등록(우측상단)으로 업로드 하여 스킨을 저장합니다.

3. 보관함에서 스킨을 적용하여 사용합니다.

4. 스킨위자드를 사용하여 레이아웃, 배경, 타이틀등을 변경해 봅니다.

5. 메뉴설정을 해봅니다. (관리자-화면설정-메뉴)

 

 

 

사용시 TIP

1. 플로그인 설정에서 꾸미기 분류에 있는 무지개링크, 홈페이지 아이콘 표시 (파비콘), 블로그 아이콘 표시, 카테고리 글 더 보기 를 체크하여 사용하시길 바랍니다.

 

2. 사이드바 설정, 메뉴 설정, 화면 설정, 스킨위자드 등을 통해 더욱 자기 입맛에 맞게 고쳐 사용하십시오~ (관리자에서 설정지원)

 

3. 상단 카테고리는 1단 2단으로 구분되어 집니다. 1단은 자동 카테고리 정렬이고 2단은 메뉴설정을 통해 만들어지는 카테고리입니다.

 

1단의 특징은 새로운 글이 등록 될시 new 아이콘이 생기며 글 총개수가 표시됩니다.

2단의 특징은 메뉴설정 기능을 활용하여 사용자 의도에 맞게 노출,삭제등을 하실수 있습니다.

카테고리 개수가 적은 중분류끼리는 한줄로 합쳐져 표현되며 중분류 카테고리의 개수와 길이에 따라 하단으로 계속 내려갑니다.

 

 

 

 

만약 둘중 하나의 상단 카테고리만을 사용 하시고자 하신다면 skin.html에서 <!--//1단 TOP MENU-->,<!--//2단 TOP MENU-->주석 표시된 영역을 찾아 둘중 하나를 선택 삭제하시길 바랍니다.
 

반대로 사이드바 카테고리를 비활성 시키서 상단 카테고리만 사용하실수 있습니다. 관리자- 사이드바- 글분류 빼기

 

4. 제일 많이 요청하는 가로 폭 조절등 짜질구래한 변경들은 스킨위자드에서 간단히 변경 가능합니다.

5. 관리자-> 꾸미기 -> 사이드바 -> 위젯 -> 위젯 선택 -> 사이드바 -> 위젯 추가 로 원하는 위젯을 넣어 봅시다.

 

---------------------------------------------------------------------------------------------------------------------------

 

 

아무쪼록 좋은곳에 사용해 주시옵고

주변에 추천도 부탁드리오며 기타 문의사항을 남겨주시면

확인 가능한대로 답글 달아 드리겠습니다!

(아래 추천도 꾸욱)

 

'웹디자인. 퍼블리싱' 카테고리의 다른 글

티스토리 스킨 제작 HeeD 3종  (14) 2014.01.09
14 Comments
  • 프로필사진 2014.01.12 05:35 비밀댓글입니다
  • 프로필사진 BlogIcon Hi hiGood 2014.01.12 13:13 신고 네^^ 좋은곳에 잘 써주세요~
  • 프로필사진 BlogIcon 부비부빠 2014.01.14 21:25 신고 안녕하세요~ 스킨이 쓰기도 좋고 깔끔해서 너무 마음에 듭니다.

    다름이 아니고'HeeD White' 스킨을 설치해서 사용중인데 우측 'Category'를 보면 모든 글씨가 두껍게 처리 되어 있고 마우스 커서를 올릴 경우 일반적인 손가락 표시가 아닌 드레그 표시로 커서가 변합니다.

    또한 새글 등록시 카테고리명 우측에 뜨는 'N' 표시도 출력이 안되고 있는 상황입니다. 뭔가 잘못된 것 같은데... 해결법을 잘 모르겠습니다.

    또한 메인 컨텐츠 입력란과 사이드바 사이에도 실선을 하나 넣는 구분선을 추가하고 싶은데 어떻게 할 수 있는지...
    도움을 부탁드립니다.
  • 프로필사진 BlogIcon Hi hiGood 2014.01.15 16:11 신고 안녕하세요^^
    먼저 우측 Category 목록은 두껍게 처리 되있는게 맞습니다^^ 아무래도 눈에 잘보이게 할려는 의도였구요 일반 폰트 두께로 변경하시고자 하신다면 style.css 소스중 #sidebar .widget .cate_tit 이부분을 찾아서 font-weight:bold 를 font-weight:normal 로 변경해주세요~

    그리고 손가락 표시가 안 나타 나는건 모든 티스토리 스킨의 목록 스타일이 원래 그래서 그렇답니다ㅜ 티스토리 목록 스타일을 버리고 새로 만들수 있지만 그럼 티스토리 관리자에서 제공하는 카테고리 스타일 변경이 어렵습니다.>_<
    새글 표시는 관리자-카테고리설정-새글표시를 체크하셨나 확인해 보셔야 할것 같습니다^^

    메인과 사이드바 사이 수직실선은 style.css 소스중 #sidebar { background-color:#fff; width:250px; float:left; }이것을
    #sidebar { background-color:#fff; width:250px; float:left; border-left:1px solid #ddd } 이케 바꿔주세요^^
    소스 찾으실땐 ctrl+f 키로 쉽게 찾으세요~
  • 프로필사진 BlogIcon 부비부빠 2014.01.15 18:23 신고 아이고 감사합니다. 한참 헤메다가 바로 해결 했습니다만...

    본문과 사이드바 사이에 생성한 실선이 사이드바 영역 만큼만 내려오는 문제가 있기는 한데... 이건 어떻게 해결할 방법 없을까요 ?

    본문까지 안내려오다보니 중간에 뚝 끊기는 감이 있어서요....
  • 프로필사진 BlogIcon Hi hiGood 2014.01.15 23:06 신고 아 그럼 #main 에 border-right:1px solid #ddd 를 추가해 주세요^^
    아래처럼
    #main { width:/*@post-width=*/741px/*@*/; background-color:#FFF; float:left; min-height:900px; height:100% !important; height:900px; padding:0 15px 15px; border-right:1px solid #ddd }

    그리고 #sidebar 에 margin-left:-1px 를 더 추가합니다
    #sidebar { background-color:#fff; width:250px; float:left; border-left:1px solid #ddd; margin-left:-1px }

    혹시라도 소스코드가 작아서 잘 안보이신다면 브라우저를 확대해 보시면 잘 보이실겁니다. ctrl + 숫자키[+]
  • 프로필사진 BlogIcon 부비부빠 2014.01.16 13:58 신고 감사합니다.
    이쁜 스킨 잘 쓰겠습니다.
  • 프로필사진 BlogIcon 자몽잉 2014.02.19 01:44 신고 내일 와서 확인하게 답글좀 달아주세요~ 예쁘네요!! 지금 스킨들 보고 있는데 이거로 결정해야겠어요 ㅋㄷㅋㄷ
  • 프로필사진 BlogIcon Hi hiGood 2014.02.21 00:57 신고 네~ 감사~yo~
    스킨 다운은 위에 있으니 마음껏 받아서 사용하세요~
  • 프로필사진 좋아요~ 2014.04.01 17:21 좋은 스킨을 이제야 알았네요.
    아래에 있는 댓글, 트랙백에 숫자가 나오는걸 안나오게 하려고 하는데..
    어떻게 수정 하나요?
  • 프로필사진 BlogIcon Hi hiGood 2014.04.02 01:37 신고 안녕하세요~
    skin.html 에서
    <s_rp_count>[#_article_rep_rp_cnt_#]코멘트</s_rp_count>와
    <s_tb_count>[#_article_rep_tb_cnt_#]트랙백</s_tb_count>에서

    [#_article_rep_rp_cnt_#], [#_article_rep_tb_cnt_#]을 삭제해 주세요~
    원소스에는 참고로 #가 2개씩 붙어있어요
  • 프로필사진 BlogIcon EY.Gia 2014.10.21 03:24 신고 티스토리 처음 시작하면서 스킨 제일 먼저 고르고 있었는데 너무 마음에 들어요 ;)
    예쁘게 잘 사용하겠습니다 ^^
  • 프로필사진 BlogIcon joule 2014.12.24 23:26 신고 안녕하세요. 넘 맘에 드는 스킨이라 바로 적용했어요.
    잘 사용하겠습니다.
  • 프로필사진 2015.04.11 18:15 비밀댓글입니다