티스토리 스킨 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.09.11 01:26 신고

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

  • 익명 2016.09.21 01:05 신고

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

  • BlogIcon 【라일락】 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 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 호또아빠 2017.09.01 19:37 신고

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

  • BlogIcon 호또아빠 2017.08.31 23:31 신고

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

  • BlogIcon Amean 2017.09.01 01:47 신고

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

    • BlogIcon 호또아빠 2017.09.01 19:37 신고

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

    • BlogIcon Amean 2017.09.12 04:33 신고

      감사합니다 이제 나와요!

  • BlogIcon 우꾼 2017.09.01 12:27 신고

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

    • BlogIcon 호또아빠 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 신고

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

티스토리 툴바