toPiece_v3.0.0 update 티스토리 스킨 업데이트



티스토리 스킨 toPiece_v3.0.0 업데이트 내역 공유합니다.

 

 

toPiece_v3.0.0 업데이트 내역

 

- 썸네일 비율 조절 방법 추가

- 댓글, 방명록에 url 주소 입력 시 자동링크 기능 추가
- 이미지 자막 스타일 추가

- 인용구 스타일 추가 (ppomi님 감사)

- 더보기/접기 스타일 추가

 

이번 업데이트 버전명을 toPiece_v3.0.0으로 올린 이유가 썸네일 비율 조절 방법 추가에 있습니다.


첨부한 skin.html 파일 내 <body> 부분에서 아래와 같이 썸네일의 비율을 입력하도록 했습니다.


<body onload="thumbsize(3,2)"><!-- 썸네일 비율을 입력해주세요.(가로비율,세로비율) -->


toPiece 스킨은 기본으로 3:2 의 비율로 설정되어 있습니다. 위 비율 숫자를 블로그에서 운영하는 이미지 사이즈 비율을 입력하시면 됩니다.


참고로 아래 링크는 스마트폰의 화면 비율 모음페이지입니다.

http://zetawiki.com/wiki/스마트폰_해상도,_화면비율



toPiece_v3.0.0 update 티스토리 스킨 업데이트왼쪽부터 3:2 , 1:1 , 16:9 의 비율 스크린샷입니다.



한 눈에 비교하기 쉽게 폰 화면을 캡쳐했습니다. 차이가 보이시나요?


이 비율 업데이트로 많은 분들의 썸네일이 꼭 맞게 나타났으면 좋겠네요. 썸네일 비율이 제각각인 블로그에서는 적용이 어려워 보이긴 합니다.

썸네일만큼은 동일한 비율로 생성하지 않는다면 아쉽지만 "핀터레스트 스타일" 스킨을 사용하셔야 할 듯 합니다.



나머지는 슬슬 스킨 내실을 다지는 업데이트 내역이 되겠습니다. (ppomi님 보고 계시죠?)


위 이미지의 자막 업데이트, 댓글과 방명록에서 url을 자동 링크기능 추가 그리고 인용구 업데이트는 아래처럼..


앞으로 계속 내실을 다지는 쪽으로 업데이트 하겠습니다.

큰 업데이트는 아마 어느 분이 제안해 주신 게 있습니다. 꽤 멋진 화면이 될 제안이긴 한데 제겐 좀 어려워 보이네요. 하지만 도전!

제안 내용은 아래 링크에~

http://todiva.com/9#comment15409636



개선점/피드백은 항상 감사한 마음으로 기다리고 있습니다.


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



toPiece_v3.0.0.zip







toPiece_v3.0.1 업데이트 내역

 

- 썸네일 목록에서 마우스 오버 시 작성일-제목 노출 추가(세인트세이야님 요청)

- 썸네일 목록 행/열간의 간격 통일
- 썸네일 비율 지정 후 비율에 맞지 않는 이미지는 크롭 후 노출



세인트세이야님의 요청이 있어 같이 공유합니다. 아래 piece님 블로그에서 썸네일 롤오버 효과를 확인할 수 있습니다.

http://lakipiece.com/



요청 업데이트 겸 위 내용대로 잠수 패치한 파일 공유합니다.

style.css 파일은 썸네일 배경색 수정이 쉽도록 /* 썸네일 리스트 : 제목 배경색 */ 추가했습니다.

style_topiece_v01.css 파일을 올리시면 적용이 됩니다.



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


zip파일에 script_core.js 파일 추가되었습니다.

toPiece_v3.0.1.zip




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



  • 이전 댓글 더보기
  • BlogIcon 어쩌다 박군 2015.08.22 12:44 신고

    우왕 또 다시 업뎃!! 꾸준한 업뎃 감사합니다ㅎㅎ

  • 2015.08.22 14:56

    비밀댓글입니다

    • BlogIcon toDiva 2015.08.22 16:11 신고

      잘 적용됐다니 다행이군요.
      마우스 롤오버 없이 항상 노출은 관리 > HTML/CSS 편집 > style.css 란에 아래 내용 넣어주세요.
      .fixed_img_col a strong{ opacity:1; }
      .fixed_img_col li:hover a strong{ background:none; }

      위 내용을 패치에 적용시켜야겠군요. ^^

    • 2015.08.22 20:38

      비밀댓글입니다

    • BlogIcon toDiva 2015.08.22 22:16 신고

      티스토리 기본 메뉴바 말씀이시죠? 관리 > 꾸미기 > 화면 설정 > 화면 출력 에서 변경하실 수 있습니다.
      썸네일간의 간격은 가로는 변경하실 수 없습니다. 레이아웃이 깨지거든요.
      style_topiece_v01.css 파일 내 87줄 .fixed_img_col li 속성들을 살펴보면 margin:0 5px 10px; 라고 되어있는데 "10px" 값이 썸네일간의 세로 간격 수치입니다. 이 수치를 원하시는 만큼 변경하시면 됩니다.

    • 2015.08.23 01:45

      비밀댓글입니다

    • 현리 2016.07.28 22:56 신고

      피씨버전의 섬네일에 제목이 계속 노출되면서 그 제목의 배경색의 투명도를 지정해줄수는 없나요? 제목과 제목의 배경색이 배경사진을 너무 가리는 것 같아서 반투명한 상태로 노출되게끔 하고싶어서요!!

  • BlogIcon G.J. 제이 2015.08.22 15:01 신고

    이 스킨 제일 마음에 들고, 업데이트도 잘 해주셔서 참 좋은데 사용할 수가 없네요. 네이버 검색로직 때문에 스킨을 변경하면 검색노출이 안되요...
    거지같은 네이버때문에 스킨도 못바꾸네요 ㅠㅠ 흐규

    • BlogIcon toDiva 2015.08.22 16:24 신고

      오셨군요 크리츠님.
      슬픈 현실이군요. 이유를 한 번 알아봐야겠습니다. 아예 노출이 안된다니 ;;

  • BlogIcon 프리타 ( P R I T A A ) 2015.08.22 16:12 신고

    정말 수고많으셨습니다 그리고 정말 감사합니다.ㅠㅠ ( 매번 업데이트 될때를 기다리며 적용하고 있습니다.)

    혹시 블로그 컨텐츠와 사이드의 사이즈를 조정할수있는방법은 없을까효.. ?

    • BlogIcon toDiva 2015.08.22 16:29 신고

      오셨군요.
      같은 내용으로 질문하신 분이 계셔서 링크로 답변드릴께요.
      http://todiva.com/3#comment15413234
      도움이 되실 겁니다.

  • BlogIcon G.J. 제이 2015.08.22 17:17 신고

    스킨배포해주실 때 완전본으로 주셨으면 좋겠어요! 혹시나해서 테스트하려고 다운받는데,
    3.01만 하니까 안되고 3.00하고 같이 받아서 덮어씌워도 안되네요... -_ㅠ

    • BlogIcon toDiva 2015.08.22 17:24 신고

      3.0.1은 패치파일이어서 수정된 파일만 올렸습니다. 3.0.0 파일만 적용해도 문제 없습니다. 3.0.1은 취향 업데이트거든요.
      다음엔 다 합쳐서 올리도록 할께요^^

  • BlogIcon 세상에.. 2015.08.23 15:32 신고

    제게 필요한 모든 요소들이 다 들어있네요...ㅠㅠㅠ 갤러리형이 안되는 티스토리에서 갤러리형이 가능하다니ㅠㅠㅠㅠ 게다가 예쁘기까지!!!!! 이렇게 예쁘고 좋은 티스토리 스킨을 공유&배포해주셔서, 그리고 꾸준히 업데이트까지 해주셔서 정말 감사합니다! 정말 잘 사용하겠습니다!!!

    • BlogIcon toDiva 2015.08.23 16:57 신고

      으으 세상에님.
      제 블로그 주소로 댓글을 달아주셨군요 ㅎㅎ 무서웠습니다;
      toPiece 스킨이 딱 마음에 드셨다니 뿌듯하네요.

  • BlogIcon 블라 블라 2015.08.23 22:51 신고

    업데이트 하시느라고 수고가 많으시겠지만...
    업데이트 올라올때 마다 잘 적용해서 예쁘게 사용하고 있어요 ㅎㅎ!

    다음 업데이트도 기대하겠습니다 ^-^!!

    • BlogIcon toDiva 2015.08.23 23:33 신고

      오셨군요^^
      잘 사용하시고 있다니 참 다행이네요. 이번에 준비하고 있는 업데이트도 재미있는 내용입니다. 기다려주세요. ^^

  • BlogIcon 도균/Moolrin 2015.08.24 00:57 신고

    2.1.0에서 내버려두고 있다가 방금 3.0.0으로 업데이트 했습니다!
    프로그래밍이나 언어같은 건 하나도 몰라서 그냥 복사,붙여넣기지만 ㅠㅠ 늘 잘 쓰고 있습니다! 감사해요^.^

    • BlogIcon toDiva 2015.08.24 06:51 신고

      감사합니다^^
      사용성이 편리한 스킨이 될 수 있게 늘 고민할께요. 그 고민은 즐거운 일이거든요^^

  • BlogIcon hazelkaze 2015.08.29 19:51 신고

    너무나 깔끔한 스킨 배포해 주셔서 감사해요^^ 한가지 제안사항이 있는데, 하단에 위치한 티스토리홈, 관리, 글쓰기 버튼이 헤더부분이나 프로필박스의 소셜미디어 버튼 쪽으로 옮겨지면 훨씬 편리할 것 같습니다! 다음 업데이트도 기대할게요!

    • BlogIcon toDiva 2015.08.29 20:09 신고

      안녕하세요 hazelkaze님.
      이번 업데이트 내용을 어찌 아셨어요? ㅎㅎ 제안은 항상 감사합니다.

  • BlogIcon hazelkaze 2015.08.30 20:23 신고

    toDiva님 질문이 하나 있습니다! 이곳에 리플을 달면 아이콘이 사진으로 잘 나오는데, 제 블로그에서 리플을 달면 기본 아이콘(회색 말풍선)으로 나오던데 왜 그런걸까요..?

    • BlogIcon toDiva 2015.08.30 21:11 신고

      "이곳"은 티스토리 앱을 말씀하시는거죠? 앱에서 리플은 블로거 프로필 이미지정보를 가져오고 블로그 리플에선 블로거가 등록한 아이콘 이미지 정보(64x64)를 가져옵니다. 등록이 되어 있지 않으면 기본 아이콘이 노출됩니다.

    • BlogIcon 그린 데이 2015.09.03 23:38 신고

      엇. 이건 저도 그래요. 제 블로그에서는 댓글 아이콘이 모두 기본으로~
      '이곳'은 toDiva님 블로그를 말씀하시는 것 아닐까요? ^^;;
      이상해서 살펴보다가 혹시 댓글에 해결책이 있을까 꼼꼼하게 봤습니다.

  • 2015.09.01 01:54

    비밀댓글입니다

    • BlogIcon toDiva 2015.09.04 09:44 신고

      아직도 안되시나요? 윗분은 등록을 하셔서 그런지 해결하신거 같네요.

    • BlogIcon ZOEY.P 2015.09.05 18:08 신고

      헉 저는 업데이트를 했는데도 왜 안될까요ㅠㅠ........toDiva님 블로그에서는 제 블로그아이콘이 제대로 나오는걸 보면 뭔가 제 블로그의 문제같네요...ㅠㅠ

    • BlogIcon ZOEY.P 2015.09.05 18:44 신고

      헉..제가 그동안 안되었던게 플러그인 설치를 안해서 그랬었네요 T-T..!해결했어요 예쁜스킨 정말 잘쓸게요ㅎㅎㅎ!답변해주셔서 감사합니당^^

  • BlogIcon 언젠간날고말거야 2015.09.01 23:26 신고

    정말 깔끔하고 마음에 드네요.
    제 블로그처럼 우측에 따라다니는 카테고리 혹시 적용이 가능할까요?
    샘플 페이지는 여기서 확인하시면 됩니다. http://bezzera.tistory.com/1058

    • BlogIcon toDiva 2015.09.02 10:08 신고

      안녕하세요 언젠간날고말거야님.
      답변이 조금 늦었지만 말씀하신 따라다니는 카테고리 적용은 가능합니다.

  • BlogIcon 염랑 2015.09.02 12:52 신고

    이렇게 훌륭한 스킨이 무료라니 먼저 너무 감사드립니다.

    1. 혹시, 프로필 사진이 원형이 아닌 원래의 사각으로 나오게 하려면 어디를 수정해야 할까요?

    2. 프로필 사진의 출력 사이즈를 좀 더 키우려면 어디를 수정해야 할지요?

    3. 블로그 설명 부분을 중앙 정렬에서 왼쪽 정렬로 바꿀 수 있을까요?

    4. 가장 궁금한 부분인데요, 프로필 사진의 쇼셜 메뉴를 아예 삭제하려면 어디를 수정해야 할까요? '소셜 아이콘 노출 ' 부분을 통째로 주석처리를 해보았는데, 텅빈 자리가 남아서요. 아예 그부분을 삭제하려면 어찌해야 할지.

    질문이 너무 많아 죄송합니다. 바쁘실텐데 미리 감사드립니다~

    • BlogIcon toDiva 2015.09.02 13:22 신고

      안녕하세요 염랑님. 바로 답변 드릴께요.

      1. style_topiece_v01.css 파일 내 ".blogimg_box .imgbox" 부분을 찾으셔서 "border-radius:50%;" 를 삭제하시면 됩니다.

      2. 위와 마찬가지로 ".blogimg_box .imgbox" 부분에서 "width:160px; height:160px;" 수치를 조절하시면 됩니다.

      3. 질문을 정확히 이해 못했습니다만 프로필 내 블로그명이랑 그 아래 설명글로 판단하고 답변 드립니다. style_topiece_v01.css 파일 내 ".blogimg_box"를 찾으셔서 "text-align:center;" 부분을 삭제하시면 됩니다. 하지만 권장하진 않습니다.

      4. 소셜 아이콘 노출 부분을 주석 또는 삭제 처리하신 후, style_topiece_v01.css 파일 내 ".blogimg_box .blog_comment" 부분에서 "margin-bottom:50px;" 코드를 삭제하시거나 수치 조절하시면 됩니다.

      위 답변으로 도움이 되었음 좋겠네요 ^^

    • BlogIcon 염랑 2015.09.02 17:06 신고

      답변 감사드립니다. 큰 도움이 되었습니다^^

  • 2015.09.02 15:26

    비밀댓글입니다

    • BlogIcon toDiva 2015.09.02 15:32 신고

      감사합니다 ^^
      커스터마이징을 굉장히 잘 하셨네요. 곧 업데이트가 또 있을 예정이니 간간히 체크해주세요 ^^
      그리고 막히는 부분은 언제든지 문의주셔도 됩니다. 제가 도울 수 있는 부분이 있다는것이 오히려 고맙습니다.

  • BlogIcon Emin Keem 2015.09.02 15:53 신고

    멋진 스킨 감사드립니다.!

  • 2015.09.02 16:46

    비밀댓글입니다

    • BlogIcon toDiva 2015.09.02 21:16 신고

      살펴보니 body에 이미지 비율 입력이 안되어 있습니다.
      <body onload="thumbsize(3,2)"><!-- 썸네일 비율을 입력해주세요.(가로비율,세로비율) -->
      참고로 이미지 비율과 맞지 않을 시 crop후 노출 되거나 작은 이미지는 늘려서 노출이 됩니다.

  • 2015.11.02 17:14

    비밀댓글입니다

    • BlogIcon toDiva 2015.11.02 17:19 신고

      안녕하세요.
      스킨의 기본이 마우스 롤오버시 제목 노출인데..
      "제목 롤오버 형식으로 마우스 접근시 노출" 어떤 뜻인지 이해 못했습니다. ^^;

    • BlogIcon 기이이린 2015.11.02 17:29 신고

      썸네일 목록에서 마우스 오버 시 작성일-제목 노출 추가가 되어야 하는데 새로운 패치 설정 후에 작성일과 제목이 노출 고정이 되어 있어서요..ㅠ

    • BlogIcon toDiva 2015.11.02 17:43 신고

      아마 캐시가 남아 있거나 style.css 파일은 새로 작성되지 않았거나..
      여러가지 이유가 있겠네요.
      스킨을 완전삭제 후에 재등록을 해보시겠어요?
      참고로 최종 버전은 아래 링크에 있습니다.
      http://todiva.com/13

    • BlogIcon 기이이린 2015.11.02 18:01 신고

      크롬자체 캐시를 다 지우고 나서 스킨 재등록하니 됩니다! 감사합니다^^
      멋진 스킨 잘쓰겠습니다!!!

  • 2015.11.16 11:42

    비밀댓글입니다

    • BlogIcon toDiva 2015.11.16 11:47 신고

      안녕하세요. 오랜만의 질문 댓글이군요 ^^
      그 고민은 이 스킨 제작시에도 했던 고민이었는데 ㅎㅎ
      같은 생각을 한 사람을 만나니 무척 반갑네요. 결국 구현이 안되어서? 못되어서? 스킨에 포함되지 않은 기능입니다.
      티에디션으로는 가능할 거 같아서 요즘 짬짬히 준비중이긴 합니다.

    • 2015.11.16 16:20

      비밀댓글입니다

  • BlogIcon 데스틸엔모닝 2015.11.26 14:56 신고

    toPiece_v3.0.1 다운 받았는데, 롤 오버 기능이 안되는데
    적용 방법좀 부탁드려요 ㅠ 내용 글도 간격이 찌그러져서 겹쳐보이네요 ㅠ

    • BlogIcon toDiva 2015.11.26 15:01 신고

      지금 살펴보니 뭔가 적용이 안된거 같은데요?
      더 보니까 알겠네요.
      style_topiece_v01.css 파일이 잘못 올라갔네요.
      css 코드들이 HTML 코드처럼 넣으셨군요. style_topiece_v01.css 파일을 다시 올려보세요.

    • BlogIcon 데스틸엔모닝 2015.11.26 15:18 신고

      적용은 된거같은데 같이 오버랩이 되는건지, 뒷면 색상이 왜그런지 알수있을까요? 바쁘신데 죄송해요 ㅠ

    • BlogIcon toDiva 2015.11.26 16:54 신고

      스킨 특징입니다. 이미지에 투명도가 적용되어 있습니다.
      해당 부분을 거슬리시면 관리 > 꾸미기 > HTML&CSS 편집 > CSS 란에 아래 한 줄 추가해주세요.
      .fixed_img_col .thumb img{opacity:1;}

  • BlogIcon Ji Su Jung 2017.02.16 20:35 신고

    블로그이미지 밑에 소셜아이콘(페이스북/유트브/인스타그램)에 제 링크를 연결하는 방법을 알려주세요ㅜㅠ어디에 주소를 입력하는지 모르겠어요

티스토리 툴바