티스토리 스킨 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


 

 

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

 

 

저작자 표시 비영리 동일 조건 변경 허락
신고
  • 이전 댓글 더보기
  • 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 freeyoungme 2017.04.22 21:34 신고

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

  • 2017.05.15 17:08

    비밀댓글입니다

  • BlogIcon 모니픽 2017.08.05 03:57 신고

    감사합니다 ... ㅜㅜ 너무 잘쓰겠습니다!!

  • BlogIcon September.H 2017.08.12 09:43 신고

    처음 설정해보는 블로그 스킨인데, 너무 예뻐요!
    혼자 몇시간동안 이것저것 열심히 바꿔봤는데, 사실 아직도 잘 모르겠어요 ㅎㅎㅎㅎㅎㅎㅎㅎ
    감사하게 잘 쓸께요 ❛˓◞˂̵✧

    아 질문이 있습니다.
    썸네일에서 마우스를 올려놓으면
    제목이 보이면서 핫핑크가 나오잖아요?
    그게 병경하는 부분이 없는거 같더라구요
    진짜 댓글 다 읽고 조절 해보고 했는데도
    눈 아프기만 몇시간째 ˃̣̣̣̣̣̣︿˂̣̣̣̣̣̣
    염치불구하고 댓글로 남겨 봅니다..

    .fixed_img_col ul li a strong{ background-color:#c9b8cf !important; display:; }

    이렇게 조절하라는 댓글을 본거 같은데,

    오늘 CSS를 처음 접해보는 저로써는 사실 잘 모르겠습니다.....
    쉽게 풀어서 설명해주실수 있을까요?

  • BlogIcon September.H 2017.08.12 09:45 신고

    그런데 왜 저는 댓글에 사진이 안뜰까요???????ㅠㅠ

  • 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 창밖풍경 2017.09.06 12:03 신고

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

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

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

  • BlogIcon 담블비 2017.11.09 14:48 신고

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

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

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

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

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

    이것을

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

  • BlogIcon 칠사구 2017.11.25 02:25 신고

    감사합니다. 잘쓰겠습니다.

티스토리 툴바