티스토리 뷰

IT/블로그|티스토리

티스토리 공식 반응형 스킨 #1에 썸네일을 달자

달고나™

티스토리에서 반응형 스킨 공모전에 이어 자체적으로 공식 반응형 스킨을 배포 했습니다. 이름하여 #1, #2 입니다. 티스토리 스킨 메뉴에서 확인 할 수 있습니다. 스킨을 보자마자 너무 깔끔하고 예뻐서 바로 적용 했는데요. #1이 아쉬운게 있다면 텍스트 위주로 스킨이 제작 됐기 때문에 좀 단조로웠습니다. 이런 아쉬움을 뒤로 하고 깔금함 때문에 바로 적용했었습니다. 그리고 얼마 후, #2가 배포가 됐네요. #2에는 썸네일 기능을 추가하여 단조로움을 화사함으로 바꾸어 놓았습니다. 그래서 #2로 변경 할까도 했지만 구조적으로 #1이 좀 더 마음에 들기에, 그리고 #1에 썸네일만 적용되면 너무도 환벽한 스킨이 되기에 #2에 있는 썸네일 기능을 이곳에 옮겨 봤습니다.

티스토리 공식 반응형 스킨 #1과 #2가 만났다.


블로그 리스트 화면(첫 화면, 검색 화면, 카테고리 화면)에 기존 텍스트만 나오는 화면에서 우측에 대표이미지의 썸네일이 나타납니다. 썸네일의 장점은 기존에는 단조로웠던 화면이 화사해졌고 글에 대한 이미지 정보가 노출이 되어 독자에게 포스팅 한 글에 대해 더 정확한 정보를 제공 해 줄 수 있습니다.


본문 하단에, 같은 카테고의 글을 썸네일로 뽑아 보여주고 있습니다. 본문과 연관된 글이 뜨기 때문에 더 많은 볼거리를 제공해 줄 수 있겠죠.


반응형 스킨 답게 모바일 화면에서도 썸네일이 아주 잘 보여지고 있습니다. 왼쪽은 모바일 리스트 화면이고 오른쪽은 모바일 본문 하단에 관련글 썸네일 입니다.


위 스킨을 적용하기 원하시면 아래 압축 파일을 다운 받으세요. 그런 후에 다운 받은 파일의 압축을 풀고 풀린 파일을 모두 스킨 업로드하는 곳에 업로드 및 저장 하세요 마지막으로 스킨을 적용시키면 됩니다.

티스토리 블로그 커스텀 스킨 업로드 하는 방법




스킨 다운로드

2017.12.12 파일 버전 1.03 (최신 업데이트)

거의 2년 만에 패치를 진행하네요. 그동안 해야지 해야지 하면서 미루다가 드디어 소소한 버그를 해결한 최신 버전을 올립니다.

#1 (Hangyeong)1.03.7z

#1 (Hangyeong)1.03.zip


패치노트

-본문의 내용 없이 이미지만 업로드 했을 때, 글목록이 정렬되지 않고 밀리는 문제 해결

-그 외 알려진 소소한 버그 및 소스 최적화





혹시 스킨 설정에 어려움이 있거나 오류가 발생하면 댓글로 남겨주시면 도움드리도록 하겠습니다.


댓글
  • 이전 댓글 더보기
  • 프로필사진 BlogIcon 시리연 먼저 깔끔한 스킨 공유해 주셔서 감사하다는 말씀 전합니다.
    스킨이 너무 마음에 들어서 블로그 하나를 더 만들었습니다.
    그런데 한자를 삽입하는 순간 ㅁㅁㅁ같이 표시되네요.
    저만 그런건가요? 참고로 윈도우 10이고 크롬으로 작업했습니다.
    즐거운 휴일 보내세요.
    2016.02.21 09:30 신고
  • 프로필사진 BlogIcon 시리연 미리보기에서만 그렇게 나타나네요.
    잘 쓰겠습니다.
    2016.02.21 16:07 신고
  • 프로필사진 BlogIcon A_ROUND_O 안녕하세요 스킨검색하다가 보게 되었습니다!
    리스트를 하단 카테고리 처럼 수정하기엔 많이 어려울까요?
    저는 글보다 사진을 주로 올리다 보니 갤러리형이 보기 좋더라구요
    혹시 시간 있으시다면 방법이라도 알려주셨으면 감사하겠습니다ㅠㅠ
    예쁜스킨 잘 받아갑니다..!
    2016.02.26 22:01 신고
  • 프로필사진 BlogIcon sugartoy 감사합니다.. 잘 사용하겠습니다.
    너무 좋으네요.
    2016.02.28 00:48
  • 프로필사진 BlogIcon 플라잉로빈 제가 원하던 그 기능이예요 ^^ 정말 감사드립니다. 2016.02.29 17:35 신고
  • 프로필사진 BlogIcon Σ 블로그를 다시 시작할려고 검색하다가 깔끔한 스킨을 보고 바로 적용했습니다. 감사합니다~~ㅎㅎ 그런데 댓글 아이콘 부분은 #1때부터 기본 이미지 + 프로필 이미지로 나오네요. 이 부분은 수정 계획은 없으신지요. 다른 분이 수정하셨다는 글을 보고 따라할려고 하니 소스가 다르네요.OTL 2016.02.29 18:53 신고
  • 프로필사진 BlogIcon 달고나™ 가급적이면 원본에 칼을 안대려고 생각 중입니다만 댓글 부분은 저도 계속 신경이 쓰여 고민 중에 있습니다. 아직 그부분 소스를 살펴보지는 않았지만 수정하는데는 큰 어려움이 없을거예요. 가급적 기본 이미지를 삭제 하는 방향으로 다음 패치에서는 시도해볼게요. 이거 외에도 현재 발견된 몇 가지 버그가 있어서 시간 나는대로 하나 하나 수정해 나가겠습니다. 2016.02.29 20:09 신고
  • 프로필사진 BlogIcon Staylight 안녕하세요. 달고나님이 올려주신 스킨을 꼭 적용해보고싶지만 몇가지 문제에 봉착하였습니다. 1. 우선 스킨 홈에 나타나는 글 목록 오른쪽의 미리보기 이미지 위치가 가운데가 아닌 아래쪽으로 내려와있습니다...ㅠㅠ 이전 버전을 적용해봐도 마찬가지구요. 2. 글을 작성하면 줄간격이 너무 커서 줄이고 싶지만 아무리 css를 뒤져봐도 어디서 수정을 해야하는지 모르겠습니다..ㅠㅠ 도와주세여. 달고나님. 2016.03.01 03:03 신고
  • 프로필사진 BlogIcon 달고나™ 1. 본문에 이미지 삽입 외에도 본문 내용(글)을 적어도 세줄 이상 적어주셔야 합니다. 본문에서 글을 긁어 오기 때문에 본문에 글 내용이 없으면 리스트에서 이미지 썸네일 부분이 밑으로 내려 갑니다. 이 부분은 본문의 글 내용이 없어도 정렬이 되게끔 추후에 패치 예정입니다.

    2. 본 문의 줄간격 말씀하시는 건가요?
    본문의 글 내용은 보통 <p>로 묶이기 때문에, CSS 에서 이 부분을 수정해 주면 됩니다.
    약 160번 줄 쯤에
    .skin_view .area_view p {font-size:16px;line-height:28px; margin:0 auto 28px}
    에서 line-height 값을 변경해주시면 됩니다.
    2016.03.01 05:01 신고
  • 프로필사진 비밀댓글입니다 2016.03.09 17:48
  • 프로필사진 BlogIcon 달고나™ 그건 티스토리에서 간혹 그렇게 오류를 뿜어 내는 경우가 있더라구요.
    전부다 삭제 후, 다시 업로드 해보세요^^

    아니면 html과 css 를 직접 복사해서 붙여넣기 해보시면 해결 될 것 같습니다.
    2016.03.12 12:35 신고
  • 프로필사진 비밀댓글입니다 2016.03.11 17:55
  • 프로필사진 BlogIcon 달고나™ CSS에서 여러 군데 수정해주셔야 하는데요.
    간편하게 아마 가로폭이 820px으로 되어 있을거예요.

    텍스트 에디터로 첨부된 style.css파일을 여시고 820px를 검색 해서 일괄적으로 원하시는 가로폭으로 변경하시면 됩니다. 여러군데 수정을 해야 하기때문에 이렇게 일괄적으로 하시는게 일일이 찾는 것 보다 쉽게 변경 할 수 있을거예요^^
    2016.03.12 12:34 신고
  • 프로필사진 BlogIcon TraV 잘 사용하겠습니다. 적용하니 예쁘네요. 2016.03.12 16:26 신고
  • 프로필사진 BlogIcon 토마토.. 썸네일 치환자 찾고 있었는데 덕분에 썸네일 잘 달았습니다. ^^ 2016.03.16 16:47 신고
  • 프로필사진 비밀댓글입니다 2016.05.04 12:27
  • 프로필사진 BlogIcon 달고나™ 최신 버전으로 받으시고 모든 파일을 티스토리 스킨에 업로드 하시면 적용 됩니다^^ 2016.05.04 16:02 신고
  • 프로필사진 비밀댓글입니다 2016.05.04 17:51
  • 프로필사진 BlogIcon 달고나™ http://blog.hangyeong.com/593
    해당 링크에 쉽게 설명해 놓았습니다. 급하게 적느라 부족한 부분이 있을지도 모르겠네요. 혹시 더 궁금하신 것 있으면 문의 주시면, 답변드리겠습니다.
    2016.05.04 19:14 신고
  • 프로필사진 BlogIcon 기면기 좋은 스킨 잘 받아갑니다. 2016.06.09 03:16 신고
  • 프로필사진 BlogIcon 다이어트 매니저 감사합니다^^ 2016.06.10 19:40 신고
  • 프로필사진 BlogIcon 다이어트 매니저 제블로그에 스킨설정했는데 데스크탑에서는 괜찮은데 모바일로 가면 하단광고가 노출되지 않습니다.

    그냥 뻥뚤린 화면만 보여지는데 왜그럴까요...이래저래 다 해보고있는데 해결이 안되네요.

    광고는 상단, 하단, 페이지광고만 넣고있습니다. 상단 페이지광고는 잘나오는데 하단만 안나오네요... 중단에도 깔아봤더니 중단은 잘 나오는데 하단만 안나와요.

    플러그인에 <div></div>도 넣어봤는데 잠깐 되다가 다시 안되네요
    2016.06.13 19:07 신고
  • 프로필사진 비밀댓글입니다 2016.09.07 09:07
  • 프로필사진 BlogIcon 달고나™ 오른쪽 상단에 메뉴 CATEGORY 라는 텍스트 없이 아이콘으로 나올거예요. 2016.09.07 19:14 신고
  • 프로필사진 박유진 네에.. 아이콘으로 나오는것까지는 아는데...
    그 아이콘으로도 나오질 않아서요 ㅠㅠ

    달고나님께서는 모바일에서 카테고리 아이콘이 확인되시나요??

    ㅜㅜ
    2016.09.07 23:00
  • 프로필사진 BlogIcon 달고나™ 넵 저는 모바일에서 카테고리가 잘 확인 됩니다. 박유진님 블로그 주소좀 알려주시면 제가 모바일로 들어가서 한 번 볼게요. 카테고리가 보이는지 안보이는지를요. 2016.09.08 11:22 신고
  • 프로필사진 BlogIcon Youchang 스킨 커스터마이징 대단하십니다. 하나 여쭤보고 싶은 게 있는데요. 이 스킨 첫 화면에 포스트 리스트업이 되고 있잖아요. 그게 어느 부분을 바꾸면 그렇게 할 수 있는지 알려주실 수 있으신지요? 보통은 첫번째 포스트 풀텍스트가 뜨는데 이 스킨은 리스트업이 되는게 신기한데 소스를 봐도 잘 모르겠어서요. 저는 이 스킨으로 다 바꾸기보다 그 부분만 해결되면 좋겠거든요. 지금은 /category 로 리디렉션 걸어서 임시로 해결하고 있습니다..ㅠ 2016.09.10 11:51 신고
  • 프로필사진 BlogIcon 달고나™ 이 스킨은 처음부터 그렇게 나와요;; 제가 첫페이지 리스트 되게 따로 만든게 아니라 뭐라 답변 드리기 어렵네요, 원래 스킨이 첫페이지가 리스트로 나옵니다. 그 부분에 전 그냥 이미지만 나오게 했을 뿐이예요^^ 2016.09.10 21:50 신고
  • 프로필사진 BlogIcon 은서플 ㅎㅎ처음 티스토리 블로그 만드려는데 스킨 검색하다가 들어왔습니다
    ^-^ 스킨 감사드려요
    2016.10.21 12:08 신고
  • 프로필사진 ㅋ행님 안녕하세요. 질문 하나 드립니다.
    제가 다른 예전 스킨을 갖고 있습니다. 그런데 이게 첫화면에 리스트를 보이려면 티에디션이나 테터툴? 이 두가지 중 하나를 사용해야 합니다. 그런데 #2는 그런 것 없이 바로 첫화면이 '썸네일 나오는 리스트'가 만들어집니다.

    이 기능을 예전 스킨에 적용하고 싶은데 어떻게 해야 할지 전혀 감이 잡히지 않네요. 무슨 힌트라도 하나 주세요. 스킨도 이미 많이 바꿔서 다른 스킨으로 변경하기 곤란해요;;;;;
    2016.11.19 16:07
  • 프로필사진 BlogIcon 와인도둑 안녕하세요 우선적으로 1 과 2를 합치고 싶었던 1인으로써 감사드립니다.
    다름아니라 질문이 있습니다. 스킨을 적용시켰는데
    스킨2에서처럼 썸네일이 나열되있지않고 보통1스킨이랑 똑같이 적용이 됩니다.
    어떻게하면 2처럼 썸네일을 나열할 수 있을까요??
    2017.02.19 23:14 신고
  • 프로필사진 BlogIcon 임블라블라 감사합니다 :-)
    잘 사용하겠습니다
    2017.12.13 18:01 신고
댓글쓰기 폼
Total
5,525,267
Today
1,817
Yesterday
2,086