[공유] 티스토리 스킨 toPiece_v2.0.0 을 공유합니다.

 

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

 

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

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


반응형 스킨입니다.

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

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

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

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

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

 

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

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

 

 

 

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

 

 

 

 

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

 

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

 

 

[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

다운로드

 

 

 

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