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 다운로드

패치노트

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

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

2016.02.13 파일 버전 1.02

#1 (Hangyeong)1.02.7z 다운로드
#1 (Hangyeong)1.02.zip 다운로드

패치노트

-일부 해상도에서 리스트 화면에 썸네일이 반응형에 반응하지 않던 문제 해결

-리스트(목록) 화면의 제목이 모두 출력 되도록 변경

* 원래 #1에서처럼 리스트 화면의 제목이 한줄로 표시되어 말줄임이 되는 것을 원하시는 분을 위해 말줄임 버전도 같이 업로드합니다.

리스트 제목 줄이기.zip 다운로드

압축을 푼 후 style.css 파일을 대체 하시면 됩니다.

2016.02.06 파일 버전 1.01

#1 (Hangyeong)1.01.7z 다운로드
#1 (Hangyeong)1.01.zip 다운로드

패치노트

-유튜브, 비메오 공유 영상도 접속 환경에 따라 반응 하도록 수정

2016/02/05 – [IT/블로그/티스토리] – 티스토리 반응형 스킨에서 YouTube, Vimeo도 자동으로 반응형 만들기

2016.01.31 파일버전 1.00

#1 (Hangyeong).7z 다운로드
#1 (Hangyeong).zip 다운로드

패치노트

– #1 기본 스킨에 #2에 있는 리스트 및 본문 하단에 썸네일 기능 추가

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

Related Posts

사이트 주소에 WWW 포함 여부, 현대 웹사이트 주소의 트렌드와 선택 기준

사이트 주소에 WWW 포함 여부, 현대 웹사이트 주소의 트렌드와 선택 기준

웹사이트 도메인 주소에 “WWW”를 포함시키거나 포함시키지 않는 결정은 사용자 경험과 웹사이트 운영 측면에서 고려될 수 있는 전략이다. 최근의 트렌드는 기술적 중요성보다는 사용자의 편의성과 브랜드의 식별성을 중시하는 방향으로 나아가고…

SKT 다이렉트 플랜 요금제 결합할인 유의사항

SKT 다이렉트 플랜 요금제 결합할인 유의사항

통신비 부담을 줄이고 싶은데, 데이터 사용량은 줄이고 싶다. “SKT 통신비 다이어트, T 다이렉트 플랜”이 바로 그 해답을 제시한다. 조금만 잘 찾아보면 데이터 사용은 그대로 유지하면서 통신비는 줄일 수…

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

선택약정할인제도 선택약정할인제도는 단말 지원금을 받지 않는 고객에게 요금 할인 혜택을 제공하는 제도이다. 이 제도는 지급 단말, 중고 단말, 신규 단말 이용 고객 모두에게 적용되며, 요금 상품 선택과 12/24개월의…

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

취업, 이직 준비나 정부 지원금 신청 할 때, 문서 작업시 대부분 이름과 서명란이 있다. 매번 느끼지만 디지털과 아날로그의 경계에 있는 듯한 느낌이다. 서명란에 싸인이나 도장을 삽입하는 과정은 간단해…

GitHub 콘솔 git add, git commit, git push 명령어 정리

GitHub 콘솔(명령줄 인터페이스)에서 커밋하는 방법은 여러 단계로 구성된다. 여기서는 Git을 사용하여 변경사항을 커밋하고 GitHub 저장소에 푸시하는 기본적인 절차를 안내한다. 이 과정을 시작하기 전에, 로컬 컴퓨터에 Git이 설치되어 있어야…

알리익스프레스 Windows Hello 내돈내산 웹카메라 구매 후기 및 설치 드라이버

알리익스프레스 Windows Hello 카메라 내돈내산 후기 및 드라이버

필자가 가지고 있는 랩탑 레노버 씽크패드 P14S에서는 Windows Hello 기능이 지문과 얼굴인식으로 되어 전원을 켜거나 브라우저에서 로그인할 때, PIN번호를 누르지 않아도 지문 또는 얼굴인식으로 간단히 해결 할 수…

This Post Has 51 Comments

  1. 완전 깔끔하고 보기 좋네요. 반응형으로 오고부터 티스토리와 개인이 배포하는 스킨들이 모두 엄청 상향 평준화된것 같아요. ㅎㅎ

  2. 도움이 되었다니 저로써는 정말 기쁘네요^^
    테스트 해보시고 혹시 스킨 상에 문제가 발생하면 말씀해주세요^^
    감사합니다.

  3. 멋지게 스킨을 업그레이드 시키셨네요. ^^
    이런 질문을 남기게 되어 죄송스런 마음이지만, 한가지 질문이 있어 글을 남깁니다.

    평상시에 본문 하단에 해당 카테고리의 다른글을 이미지 형식(썸네일 형식)으로
    출력을 하고 싶었지만 관련 지식이 부족해서 그동안 하지 못하고 있었습니다.

    타 사이트를 이용한 방법이 인터넷을 통해 공개가 되었지만, 그부분은 그다지
    디자인이 마음에 들지 않더군요.
    그러던 차에 달코나님이 만드신 카테고리의 다른 글 썸네일을 보게 되었습니다.

    카테고리의 다른 글 썸네일만 다른 스킨에 적용하는 방법에 대해 도움을 주실 수 있으신지요?

    긴 댓글을 읽어주셔서 감사합니다.
    즐거운 명절 되세요. ^^

  4. 이상한점을 하나 발견했습니다

    PC에서는 아무이상이없는데
    이상하게 모바일상태에서 비공개글상태로는 이상이없고

    포스팅을 공개만하면
    본문우측상단에 작은점이 모바일에서 보입니다

    이 문제를 어떻게 해결해야하는건지 감이안잡히네요
    폰에 뭐가묻었나싶어서 닦아봤는데 그게아니라 정말 점이..
    본문우측상단에 딱 생기더군요 당황스럽네요

    이상하다싶어서 달고나님 블로그를 모바일로볼때는
    아무런점이 없는데 이상하게 제가적용한것만 그렇습니다

    제가 수정한부분에서 문제가있어서 그런가 싶어서
    예전에 여기서 받았던 1.0버전을 그대로 다시 적용해봤는데도 그러네요

    이게 무슨 이유일까요?
    혼자고치려고 해보려했는데

    발행의 문제도 아니고

    이 문제가 발생하는 상황이

    1. 공개글일때
    2. 모바일화면에서만 본문우측 상단에 점이생성된다

    이 두가지 조건이성립될때 발생하는 문제점이에요
    그동안은 눈에안띄어서 몰랐느데
    어느순간보니 이게 정말 그냥 포스팅에 점이찍혀있더라구요
    황당…하네요 ㅠㅠ 도움을 주세요

    다시 발견한부분
    카테고리 분류안하면 점이 안생기는데
    글을 카테고리에 속하게하면 점이생기네요
    이게 무슨 경우인지..ㅠㅠ

    1. 그러고보니 몰랐는데
      달고나님 블로그에도 모바일로보면 우측상단말고 잘 살펴보면 우측에
      점이하나 생성되네요?!?

      이게 제 폰 기종때문에 그런건가요?
      gpro2 사용중입니다만

      다른 #1 스킨사용자는 이런게 없더라구요

    2. 우와 눈이 엄청 좋으시네요~ 저도 확인 했습니다. 정말 세심히 봐야 보일 정도네요. 티스토리 원본 스킨 소스로 적용 해 보고 동일 증상이 있나 확인 해봐야 할 것 같네요. 본문쪽에는 제가 건드린 곳이 없는데… 신기하네요 작은 점 하나 ㅎㅎ 확인 후, 관련증상 해결 하는데 노력 할게요^^

    3. 저도 계속 모르고있다가 우연히 발견했어요.

      본문에 뭔가를 불러오는것같은데
      뭔지 아직도 해결못하고 있네요.

      이거만 해결되면 정말 속이 시원하겠는데
      뭔가 옥의티 느낌이랄까

      혹시라도 해결되시면 댓글로 알려주세요~
      그리고 해결되길 바래봅니다

      저도 알아는보고있는데 전혀감이 안잡히네요.

      카테고리랑 연관이 있는것같아요.
      공개글이라도 카테고리지정 안하면 점이 안보이거든요.

      그리고 티스토리 공식원본으로 받아도
      같은현상이 생깁니다.

      그리고 처음 스킨적용했을때
      검색해도 글이안나오는 버그? 가있어요.

      목록보기한번해주고 다음 목록+글보기해야
      다시 정상으로 돌아오더라구요.

      html수정하는중에 홈페이지 오류발생하기도하는데
      이것도 모두수정하고 html창 열지않으면 다시 정상으로 돌아오더라구요.

  5. 사실 다시 블로그 시작하면 그냥 스킨 하나 심플하게 만들까 생각했었는데 그냥 이거 쓰기로 했슴다.

  6. 달고나님 또 왔습니다 ^^
    썸네일을 적용해서 잘 사용하고 있는데요, 이상한 점을 발견해서요,,,
    제 노트북 해상도는 1600 900 브라우저는 크롬, 운영체제는 윈10을 사용합니다
    근데 브라우저를 반으로 줄이면 스킨이 반응형이다보니 줄어들긴하는데
    썸네일은 크기가 반응을 하지 않네요,
    그래서 글 목록이 깨져서 나옵니다.
    혹시 이런 현상이 있으신가요? 아니면 제가 또 뭘 잘못해서 그런가 ㅋ 모르겠습니다 ^^

    그러려니 그냥 쓸수 있지만 좀 신경이 쓰이긴 하네요 ㅎㅎ

    1. 관련 증상을 제가 인지 하고 있습니다. 다음 패치하면서 수정하도록 하겠습니다. 제보해주셔서 감사합니다.

  7. 좋은 스킨 잘 쓰고 있습니다 ^^ 근데 저는 문제가 조금 있네요 ㅠ
    다름이 아니라 적용을 했을때 페이지 우측 상단에 검색과 카테고리 메뉴가 제 블로그에 적용을 했을때는 실행이 안되고 클릭 자체도 안되더라고요.
    혹시 주인장님이 해결방법을 아신다면 알려주실수 있으신가요? ㅎㅎ

    1. 방문 감사드립니다.

      말씀 하신 오류는 제가 확인 하기 어렵네요. 이 블로그 외에도 다른 테스트용 블로그에서도 정상적으로 작동 하고 있습니다.

      최신버전으로 다운로드 해서 모든 파일을 업로드 다시 한 번 해보세요^^

  8. 먼저 깔끔한 스킨 공유해 주셔서 감사하다는 말씀 전합니다.
    스킨이 너무 마음에 들어서 블로그 하나를 더 만들었습니다.
    그런데 한자를 삽입하는 순간 ㅁㅁㅁ같이 표시되네요.
    저만 그런건가요? 참고로 윈도우 10이고 크롬으로 작업했습니다.
    즐거운 휴일 보내세요.

  9. 안녕하세요 스킨검색하다가 보게 되었습니다!
    리스트를 하단 카테고리 처럼 수정하기엔 많이 어려울까요?
    저는 글보다 사진을 주로 올리다 보니 갤러리형이 보기 좋더라구요
    혹시 시간 있으시다면 방법이라도 알려주셨으면 감사하겠습니다ㅠㅠ
    예쁜스킨 잘 받아갑니다..!

  10. 블로그를 다시 시작할려고 검색하다가 깔끔한 스킨을 보고 바로 적용했습니다. 감사합니다~~ㅎㅎ 그런데 댓글 아이콘 부분은 #1때부터 기본 이미지 + 프로필 이미지로 나오네요. 이 부분은 수정 계획은 없으신지요. 다른 분이 수정하셨다는 글을 보고 따라할려고 하니 소스가 다르네요.OTL

    1. 가급적이면 원본에 칼을 안대려고 생각 중입니다만 댓글 부분은 저도 계속 신경이 쓰여 고민 중에 있습니다. 아직 그부분 소스를 살펴보지는 않았지만 수정하는데는 큰 어려움이 없을거예요. 가급적 기본 이미지를 삭제 하는 방향으로 다음 패치에서는 시도해볼게요. 이거 외에도 현재 발견된 몇 가지 버그가 있어서 시간 나는대로 하나 하나 수정해 나가겠습니다.

  11. 안녕하세요. 달고나님이 올려주신 스킨을 꼭 적용해보고싶지만 몇가지 문제에 봉착하였습니다. 1. 우선 스킨 홈에 나타나는 글 목록 오른쪽의 미리보기 이미지 위치가 가운데가 아닌 아래쪽으로 내려와있습니다…ㅠㅠ 이전 버전을 적용해봐도 마찬가지구요. 2. 글을 작성하면 줄간격이 너무 커서 줄이고 싶지만 아무리 css를 뒤져봐도 어디서 수정을 해야하는지 모르겠습니다..ㅠㅠ 도와주세여. 달고나님.

    1. 1. 본문에 이미지 삽입 외에도 본문 내용(글)을 적어도 세줄 이상 적어주셔야 합니다. 본문에서 글을 긁어 오기 때문에 본문에 글 내용이 없으면 리스트에서 이미지 썸네일 부분이 밑으로 내려 갑니다. 이 부분은 본문의 글 내용이 없어도 정렬이 되게끔 추후에 패치 예정입니다.

      2. 본 문의 줄간격 말씀하시는 건가요?
      본문의 글 내용은 보통

      로 묶이기 때문에, CSS 에서 이 부분을 수정해 주면 됩니다.
      약 160번 줄 쯤에
      .skin_view .area_view p {font-size:16px;line-height:28px; margin:0 auto 28px}
      에서 line-height 값을 변경해주시면 됩니다.

  12. 안녕하세요.
    공유해주신 스킨은 잘 사용하고 있습니다.

    사용중에 문제가 생겨 이렇게 글을 남깁니다.

    적용후 상단 메뉴의 카테고리를 이용하여 카테고리를 선택시 리스트들이 제대로 표현되지 않는 현상이 일어납니다.

    혹시 문제점을 확인해 주실 수 있나요 ..?

    1. 그건 티스토리에서 간혹 그렇게 오류를 뿜어 내는 경우가 있더라구요.
      전부다 삭제 후, 다시 업로드 해보세요^^

      아니면 html과 css 를 직접 복사해서 붙여넣기 해보시면 해결 될 것 같습니다.

  13. 안녕하세요. 스킨배포 감사드립니다
    질문이 있습니다 달고나님처럼 본문 가로폭을 좀 넓히고 싶은데
    어떻게 해야하나요?
    쌩초짜라 하나도 모르겠네요ㅜ ㅜ

    1. CSS에서 여러 군데 수정해주셔야 하는데요.
      간편하게 아마 가로폭이 820px으로 되어 있을거예요.

      텍스트 에디터로 첨부된 style.css파일을 여시고 820px를 검색 해서 일괄적으로 원하시는 가로폭으로 변경하시면 됩니다. 여러군데 수정을 해야 하기때문에 이렇게 일괄적으로 하시는게 일일이 찾는 것 보다 쉽게 변경 할 수 있을거예요^^

  14. 달고나님 블로그 정말 너무 이뻐요^^
    저도 이번에 새로 반응형 스킨으로 바꿔볼려고 하는데 뭐가 뭔지 몰라서 여쭤볼려고해요ㅠㅠ
    티스토리에서 반응형 스킨 #1 선택하고 최신업데이트에 있는 파일 다운받고 HTML에 그냥 다 복사붙여 넣기 하면 달고나님 블로그처럼 되는건가요??
    html쪽으로는 전혀 아는게 없어서요ㅠㅠ 파일이 2개인데 어떤걸 다운받아야하나요?ㅜ

  15. 제블로그에 스킨설정했는데 데스크탑에서는 괜찮은데 모바일로 가면 하단광고가 노출되지 않습니다.

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

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

    플러그인에

    도 넣어봤는데 잠깐 되다가 다시 안되네요

  16. 안녕하세요!

    올려주신 스킨 잘 적용해서 사용하고 있습니다 ^^

    그런데.. 모바일로 제가 쓴 글을 검색해서 보았더니

    적어주신 본문과는 다르게..

    오늘쪽 상단에 나와야할 카테고리 표시가 안보이더라구요..

    제가 잘못된건지 궁급합니다..

    1. 네에.. 아이콘으로 나오는것까지는 아는데…
      그 아이콘으로도 나오질 않아서요 ㅠㅠ

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

      ㅜㅜ

    2. 넵 저는 모바일에서 카테고리가 잘 확인 됩니다. 박유진님 블로그 주소좀 알려주시면 제가 모바일로 들어가서 한 번 볼게요. 카테고리가 보이는지 안보이는지를요.

  17. 스킨 커스터마이징 대단하십니다. 하나 여쭤보고 싶은 게 있는데요. 이 스킨 첫 화면에 포스트 리스트업이 되고 있잖아요. 그게 어느 부분을 바꾸면 그렇게 할 수 있는지 알려주실 수 있으신지요? 보통은 첫번째 포스트 풀텍스트가 뜨는데 이 스킨은 리스트업이 되는게 신기한데 소스를 봐도 잘 모르겠어서요. 저는 이 스킨으로 다 바꾸기보다 그 부분만 해결되면 좋겠거든요. 지금은 /category 로 리디렉션 걸어서 임시로 해결하고 있습니다..ㅠ

    1. 이 스킨은 처음부터 그렇게 나와요;; 제가 첫페이지 리스트 되게 따로 만든게 아니라 뭐라 답변 드리기 어렵네요, 원래 스킨이 첫페이지가 리스트로 나옵니다. 그 부분에 전 그냥 이미지만 나오게 했을 뿐이예요^^

  18. ㅎㅎ처음 티스토리 블로그 만드려는데 스킨 검색하다가 들어왔습니다
    ^-^ 스킨 감사드려요

  19. 안녕하세요. 질문 하나 드립니다.
    제가 다른 예전 스킨을 갖고 있습니다. 그런데 이게 첫화면에 리스트를 보이려면 티에디션이나 테터툴? 이 두가지 중 하나를 사용해야 합니다. 그런데 #2는 그런 것 없이 바로 첫화면이 ‘썸네일 나오는 리스트’가 만들어집니다.

    이 기능을 예전 스킨에 적용하고 싶은데 어떻게 해야 할지 전혀 감이 잡히지 않네요. 무슨 힌트라도 하나 주세요. 스킨도 이미 많이 바꿔서 다른 스킨으로 변경하기 곤란해요;;;;;

  20. 안녕하세요 우선적으로 1 과 2를 합치고 싶었던 1인으로써 감사드립니다.
    다름아니라 질문이 있습니다. 스킨을 적용시켰는데
    스킨2에서처럼 썸네일이 나열되있지않고 보통1스킨이랑 똑같이 적용이 됩니다.
    어떻게하면 2처럼 썸네일을 나열할 수 있을까요??

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다