티스토리 스킨 topiece_v01을 공유합니다.


반응형 웹 공부 겸 지인 분께 티스토리 스킨을 만들어 드리려는데
티스토리에서 반응형 스킨 공모전을 하는군요.

지인에게는 연내로 완성시켜 준다고 했었는데 공모전 시일 내 완성 시키는게 목표가 됐습니다.


반응형 스킨입니다.

스킨 이름은 지인의 아이디를 딴 'to Piece'라 지었습니다.

구성은 기본 구성인 skin.html , style.css , index.xml 과 images 폴더 내 5개의 파일입니다.(이미지 파일 2개 추가됐습니다.)

총 62.4KB의 초경량 스킨입니다.

프로필 이미지와 카테고리 그리고 블로그 아이콘 등 기본 환경 설정,
그리고 화면출력에서 선택 화면을 "글 목록" , "목록만" 으로 하시면 바로 사용 가능합니다.

또 관리 > 꾸미기 > 모바일웹 스킨 > 모바일웹 스킨 OFF 체크를 하셔야 모바일에서 같은 화면을 볼 수 있습니다.


스킨에 사용되는 아이콘들은 아래의 Icon Font - entypo 를 적용했습니다.
http://weloveiconfonts.com/


지인 블로그에 스킨 적용 중이니 아래 링크로 확인이 가능합니다.
http://lakipiece.com/




모바일 화면 스크린 샷을 준비했습니다.


tistory skin, 티스토리 반응형 스킨




첫 스킨이라 개선점이 많을 것입니다.
많은 분들의 의견과 도움이 필요합니다.


의문점과 고마운 도움 모두 위의 토론하기에 남겨주시면 정말 감사하겠습니다.



[20150801 02:44 내용 추가]

* 롤오버 컬러 / 포인트 컬러 변경 방법

해당 디자인의 포인트 컬러는 #ec008c 로 되어 있습니다.

컬러 변경은 관리자 > 꾸미기 > HTML/CSS 편집에서 style.css 부분을 보시면 

주석 처리 되어 있는 /* Rollover, Point color */ 부분이 있습니다. 

그 부분의 마지막에 { color:#ec008c; } 컬러 코드를 변경 해 주시면 스킨 전체 롤오버-포인트 컬러가 변경 될 것입니다.




[20150803 21:27 내용 추가]

많은 분들의 감사한 도움으로 오류/개선점들을 고쳐 나가고 있습니다.

현재 시간부 toPiece_v1.2.0 업데이트 내역입니다.


- Guestbook 블로그 아이콘 노출 수정

- Guestbook 비밀글 노출 수정

- 댓글 비밀글 노출 수정

- 유튜브 영상, 다음 영상 포스팅시 목록에서 썸네일 노출

- 썸네일 리스트에서 New 아이콘 추가

- 본문에서 tag 노출 안되던 문제 해결

- 본문에서 다음지도, 유튜브 동영상, 비메오 동영상 등 반응형 노출


그리고 불필요한 코드들을 정리 했습니다.

목록에서 노출 될 비메오 썸네일은 다음 업데이트에 적용시키겠습니다.
공부가 부족해 시간이 조금 더 걸리는군요.



[20150804 09:47 내용 추가]

아래 파일은 썸네일 리스트에서 새글 노출 시 티스토리 기본 NEW 아이콘 삭제가 적용 된 파일입니다.

관리 > HTML/CSS 편집 > 파일업로드에서 덮어 씌우시면 됩니다.





[20150805 21:32 topiece_v2.0.0 업데이트 내용]


- 컬러 변경 쉽게 할 수 있도록 style.css 수정

- 썸네일 리스트에서 티스토리 기본 NEW 아이콘 제거

- 크롬 사용시 댓글, 방명록 비밀글 체크 박스가 보이지 않는 현상 수정

- 비메오 동영상 포스팅 시 목록에서 썸네일 노출

- 아이콘폰트(entypo) 임포트 삭제, 빠른 로딩 구현

- Tag Cloud 추가

- PC화면 상단 이동 버튼 추가

- 하단 관리 버튼 추가


이번 2.0.0 업데이트의 핵심은 비메오 동영상의 썸네일 추출이 특징입니다. ^^

스킨 로딩 시 아이콘 폰트(entypo)로 인해 딜레이 현상이 있어 가벼운 아이콘 파일로 대체 했습니다.

전보다 많이 가볍고 빠른 스킨이 될 것입니다.


많은 분들이 to Piece 스킨을 선택해 주셔서 감사드립니다.

이미 커스터마이징을 하신 분들은 수정한 기존 내용들을 백업 해 두시고 업데이트 파일을 적용하시길 바랍니다.


그리고 오른쪽 프로필 박스에 있는 소셜 링크 사용 방법 문의가 많았습니다.

방법 알려드립니다.



* 소셜 링크 아이콘 노출 방법

skin.html 내 <!-- 소셜 아이콘 노출 --> ~ <!-- //소셜 아이콘 노출 --> 주석 사이에 있는

<li><a href="#" target="_blank" id="sociallink" class="entypo-rss">rss</a></li> 에서

붉은 부분을 아래 class 내역에서 골라서 변경하면 됩니다.


github , flickr , vimeo , twitter , facebook , gplus , pinterest , tumblr , linkedin , dribbble , instagram , rss , youtube


총 13개의 class가 있으며 링크는 href="#" 에 넣으시면 새창으로 연결 될 것입니다.

업데이트 내역파일 역시 아래 toPiece_v2.0.0.zip 에 포함 되어 있습니다.


하지만 소셜 링크 아이콘은 궁극적으로 티스토리 관리자의 "내 프로필" 정보로 자동 노출 계획입니다.

다음 업데이트에 구현이 되었으면 좋겠습니다.


* 예상 업데이트 내역

- 사이드바 카테고리 NEW 아이콘 노출 방식 교체

- PC or Mobile 카테고리 리스트 노출 방식 선택 가능(썸네일 or 제목 리스트)

- 소셜 링크 노출 자동화


그럼 의문점과 개선점, 그리고 고마운 도움 모두 감사히 기다립니다.

아래 파일을 다운로드 하시면 됩니다.




★ toPiece_v2.1.0 업데이트 내역(2015.08.08)

 

- 스킨 레이아웃 좌우 변경 가능

- 카테고리 페이지 텍스트형 리스트 추가

- 사이드바 카테고리의 새글 표시 방법 변경
- 썸네일 목록에서 이미지 없을 시 나타내는 기본 이미지 추가

- 본문 텍스트에 강조(Bold)효과 추가(어쩌다 박군님 지적 감사)


 

많은 분들의 피드백을 담아 v2.1.0으로 업데이트 했습니다. 자세한 업데이트 내용은 따로 포스팅으로 준비했습니다.

 

업데이트 내용 자세히 보러가기 ▶

 

 



toPiece_v2.2.0 업데이트 내역(2015.08.13)

 

- 모바일용 리스트형 카테고리 페이지 추가

- 맨 하단으로 가는 버튼 추가
- 썸네일의 작성일, 제목 숨김 추가

- 이름 옆 프로필 레이어 오류 수정(wallel님 감사)

- 트랙백 style 추가

- 보호글 style 추가


자세한 업데이트 내용은 따로 포스팅으로 준비했습니다.


업데이트 내용 자세히 보러가기 ▶


 

아래 파일을 다운로드 하시면 됩니다.


toPiece_v2.2.0.zip


 

 

* 주의 : 스킨을 이미 커스터마이징 하신 분들은 수정 내용들을 꼭 백업을 해두시고 스킨 적용하시길 바랍니다.

 

 

저작자 표시 비영리 동일 조건 변경 허락
신고
  • 이전 댓글 더보기
  • BlogIcon 화란자운 2016.07.09 23:04 신고

    너무 예쁘고 깔끔해서 좋네요!! 정말 감사합니다!

  • BlogIcon 아이만땅 2016.07.12 20:37 신고

    예쁜 스킨 제공해주셔서 고맙습니다!! 잘 쓸게요!!

  • BlogIcon 하루밍밍 2016.07.19 13:09 신고

    스킨감사드립니다.^^

  • BlogIcon AIC 2016.07.29 12:43 신고

    첫 화면에서 썸네일만 나올때 그림이 어둡게 보이는데, 음영 %를 조절할 수 있나요? 부탁드립니다. ㅜㅜ

  • BlogIcon G. Hong 2016.08.04 14:09 신고

    감사합니다!!

  • BlogIcon G. Hong 2016.08.04 14:09 신고

    감사합니다!!

  • BlogIcon 마리츄 2016.08.12 10:00 신고

    썸네일 화면은 아무이미지나 자동 출력되나요..?

  • BlogIcon 마리츄 2016.08.12 10:17 신고

    해결 하였씁니다.!!!! 이쁜 스킨 넘나 넘나 감사드려요

  • BlogIcon 조르바 2016.09.11 01:26 신고

    감사히 사용하겠습니다 !!

  • 익명 2016.09.21 01:05 신고

    혹시 모바일 환경에서 글제목이 같이 보이도록 업데이트하실 계획이 있..나요..?ㅠㅠ

  • BlogIcon i라일락i 2016.09.24 00:28 신고

    감사합니다. 잘 사용 하겠습니다.^^

  • 2016.09.27 23:34

    비밀댓글입니다

  • BlogIcon 유쾌한삼이 2016.10.08 22:08 신고

    굉장히 깔끔하고 좋아서 바꾸었어요. ㅎ

  • BlogIcon 해밝세상 2016.10.27 16:35 신고

    너무 깔끔하고 예쁘네요.
    본문글자색을 완전블랙으로 하고싶습니다.지금 글자색이 약간 회색톤이어서 좀더 새까만색이었으면 좋겠어요.그리고 글자크기도 지금보다 10~20%정도 키우고싶습니다.스킨시인성은 본것중에서 최고네요.

  • BlogIcon 완키 2017.01.06 11:54 신고

    섬네일이 너무 어둡게 나오는데 조금 더 밝게 보일 수는 없나요???

  • BlogIcon 고운정. 2017.01.12 16:32 신고

    이것저것 많이 찾아봤는데 이 스킨이 제일 마음에들어요! 감사히 쓰겠씁니다

  • BlogIcon by윤양 2017.04.10 17:36 신고

    감사합니다. 유료는 손대기 어렵고... 무료중에 심플한 스킨 찾아 정처없이 헤멨네요! 덕분에 심플하고 느낌좋은 스킨으로 변경할수 있게됬습니다^^ 감사히 잘 쓰겠습니다! 고맙습니다.

  • BlogIcon YOMI@ 2017.04.18 19:08 신고

    아... 위에 댓글을 안달아 주시는 것 같아서 불안해서 울고 있는데..ㅠㅠ 본문 내용에 링크를 걸면 글자색이 핑크로 변하는 부분 수정할 수 있을까요?

    a hover 이 부분을 손대야 한다는건 알겠는데 css를 잘 몰라서 아무리 제가 해봐도 안되네요....ㅠㅠ 제발제발 도와주세요 이 스킨이 너무 쓰고 싶습니다.

  • BlogIcon freeyoungme 2017.04.22 21:34 신고

    우아~ 깔끔하고 예뻐여~^_^ㅎㅎㅎ
    근데.. 티스토리가 처음이라..스킨설정이..쉽지 않네여 ㅎㅎ

  • 2017.05.15 17:08

    비밀댓글입니다

티스토리 툴바