티스토리 스킨 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  ·  :Tistory Author    2017.08.31 19:00 신고

    오늘 티스토리 업데이트 이후로 블로그 첫화면에 썸네일이 하나도 안 보이는데...저만 그런건가요?
    해결책은 없나요?

    • BlogIcon Hotto Papa 2017.09.01 19:37 신고

      꾸미기-설정-블러그 메뉴바 표시합니다로 바꿔주시면 됩니다.

  • BlogIcon Hotto Papa 2017.08.31 23:31 신고

    업데이트 후 썸네일이 하나도 안보이네요.. 왜 그런걸까요?.. 저랑 같은 분들이 많으시네용 ㅠㅠ

  • BlogIcon Amean 2017.09.01 01:47 신고

    저두요! 업데이트후 썸네일이 안보여요 ㅠㅠ

    • BlogIcon Hotto Papa 2017.09.01 19:37 신고

      꾸미기-설정-블러그 메뉴바 표시합니다로 바꿔주시면 됩니다.

    • BlogIcon Amean 2017.09.12 04:33 신고

      감사합니다 이제 나와요!

  • BlogIcon 우꾼 2017.09.01 12:27 신고

    저도 이번 업데이트 이후 썸네일이 보이지 않습니다. ㅜㅜ 저만 그런게 아니였군요. 어찌 조치해야 할지 모르겠습니다ㅠㅠ

    • BlogIcon Hotto Papa 2017.09.01 19:37 신고

      꾸미기-설정-블러그 메뉴바 표시합니다로 바꿔주시면 됩니다.

    • BlogIcon 늑대발자국 2017.09.01 23:10 신고

      호또아빠 // 덕분에 썸네일 다시 나오게 할 수 있었네요. 스킨 바꿔야 하나 걱정했었는데... 감사합니다! ㅎㅎ

    • BlogIcon 우꾼 2017.09.02 04:46 신고

      그동안 덕분에 잘 사용하고 있었습니다. 정말 감사합니다. 이번에도 문제도 해결하여 주시고 이쁘게 잘 활용하겠습니다:)

  • BlogIcon RiderDc기사 2017.09.01 16:54 신고

    고객센터 전화 하니..... 스킨이 문제라고 하내요 -_ -;;;;;;;;;; 허참..

    어이가 없어서.. 다른 스킨 구하고 있는 중입니다.. 아.

    • BlogIcon  ·  :Tistory Author    2017.09.04 11:15 신고

      저도 호또아빠님 덕분에 해결했습니다.
      꾸미기-설정-블러그 메뉴바 표시합니다로 바꿔주시면 됩니다.

  • BlogIcon dreamtopia 2017.09.06 12:03 신고

    블로그를 새로 만들고 적용해보니 아주 멋집니다.
    감사합니다!
    또 인사드리겠습니다.

  • BlogIcon 날고싶은 긍정 2017.10.28 22:28 신고

    너무 이뻐요 ~~잘 사용하겠습니다
    감사합니다^^

  • BlogIcon 담블비 2017.11.09 14:48 신고

    안녕하세요! 정말 예쁘게 잘 사용하고 있습니다! 항상 감사합니다!!

    한가지 궁금한것이 있어 댓글로 여쭤봅니다.
    처음 블로그 들어가면,

    분류전체보기 로 모든 포스팅글이 다 나오는데요!

    혹시 이것을, 분류별로 보이게 할수 있는 설정이 있을까요?

    예를들면, 현재는 포스팅한 갯수가 10개라고 하면 10개가 전부 분류없이 올린 순서대로 메인에 뜨는데,

    이것을

    일상이면 일상, 취미면 취미로 모아서 메인에 보여지게 하는 방법이 있는지 궁금합니다!

  • 2017.12.30 12:47

    비밀댓글입니다

  • 2018.01.04 16:13

    비밀댓글입니다

  • BlogIcon 여봉달 2018.01.23 21:53 신고

    너무 이뻐요 잘쓰겠습니다

  • BlogIcon 노벨평화상전두환 2018.02.01 04:43 신고

    글자가 흐려서 그런데 글자색 검정색으로 바꾸는 방법은 어떻게 바꾸는건가요?

    제가 컴맹 수준이긴 하지만, HTML에서 color 이라고 써져 있는거 다 찾아봤는데

    못찾겠어요 ㅠㅠ 글자색을 선명한 검정색으로 바꾸고 싶어요 ㅠㅠ

  • BlogIcon Deviers 2018.02.03 21:57 신고

    글 등록한 썸네일사진이 글 수정후에 넣은 사진값으로 바껴야되는데 안바뀝니다 ㅠㅠ 해결법좀요

  • 2018.02.21 17:26

    비밀댓글입니다

  • BlogIcon juhee060800 2018.02.26 18:22 신고

    감사합니다 ^^ 마음에 들어서 사용하고싶어서요 ^^ 잘 쓰겠습니다

  • BlogIcon 귤_보람 2018.03.25 18:46 신고

    앗앗 감사합니당 +_+ 처음 다운받아서 이제 설정해보려 합니다! 복받으실거에용 :)

  • BlogIcon GTK_LeonHeart 2018.04.18 15:50 신고

    스킨 잘쓰겠습니다^^

  • BlogIcon 제이제이_ 2018.10.03 20:19 신고

    안녕하세요 ^^ 저희어머님이 이번에 티스토리를 시작하게되어 만들어드리려고하는데 위에 컬러변경을 혹시어떻게하는지 ...
    검은색을 딱히좋아하시는편이아니라서요 ㅠㅠ 다른스킨같은경우엔 css쪽에보면 # 으로시작되는것들 하나하나 건들여보면 찾아지던데 이건 찾을수가없네요 ㅠ

  • BlogIcon 소슴도치 2018.11.05 21:10 신고

    업데이트도 안했는데 어느 순간부터 썸네일이 다 엑박으로 떠요ㅠㅠ혹시 해결방법 없나요?ㅠㅠ

  • 2018.11.14 12:08

    비밀댓글입니다

티스토리 툴바