본문 바로가기

반응형 사이드바 타입 티스토리 스킨 배포

기본으로 제공되는 사이드바 반응형 티스토리 스킨을 커스터마징한 버전입니다.


기본 스킨에서 사용하는 비트맵 아이콘 이미지들을 대체해서 벡터 기반인 폰트어썸(Font Awesome)으로 아이콘을 변경했습니다.

기기별 해상도에와 무관하게 아이콘들이 깨끗하게 출력됩니다.


기본 글 목록의 썸네일 이미지 크기는 200px x 200px 입니다.


배경 jpg 이미지 외에 skin.html, style.css, script.js 파일 3개만으로 스킨이 구성됩니다.


가로 1260px 이상 화면에서 컨텐츠 내용이 창크기에 따라 센터로 정렬되면서 따라 움직이던 것을 수정해 왼쪽에 붙어있도록 수정했습니다.


sidebar_react1_blogpack.tistory.com.zip





교체가능한 배경 이미지 3개가 ./images 폴더에 포함되어 있습니다.

이미지는 아래 썸네일 이미지를 참고하시면 됩니다.


header_default.jpg 파일명으로 변경해 업로드하하거나, 

CSS(style.css 파일) 의 67라인에 있는 header_default.jpg 파일명을 업로드한 다른 파일 명으로 변경하면 됩니다.




  • 제가 찍은 사진을 넣고 싶은데 그런 방법은 없나요?

    • 티스토리 스킨 편집기 화면 들어가서 파일업로드 하신 목록을 보면 header_default.jpg 파일이 있을 겁니다.
      images 폴더 안에...
      이 이미지가 스킨에 붙는 파일명입니다.
      jpg 이미지 파일 올리면 어차피 images 폴더로 자동 업로드 되니까 "추가" 버튼 누르셔서 직접 찍으신 jpg 사진을 위 파일명으로 업로드 하면 덮어쓰기 되서 블로그에 반영되어 보일겁니다.
      스킨팩에 있는 샘플 이미지처럼 세로보기와 가로보기때 센터가 잘 오게 이미지를 적당히 잘라서 업로드해야 이미지가 조금 보기좋게 붙습니다.
      채도와 콘트라스트는 조금 높게 해주는게 좋습니다. 블로그 스킨이 반투명으로 이미지 위에 깔리는게 있기 때문에...
      샘플로 들어있는 이미지는 3000x2000 으로 크기가 조금 큰데 더 작게 해도 무방합니다.
      가로세로 비율은 테스트해본바로는 3:2 정도가 적당했습니다.
      가능하면 이미지 파일 크기는 1~2메가 안쪽으로 하는게 좋습니다. 무겁게 뜨는게 싫으시면 압축을 조금더 해서 1메가 미만인게 좋습니다.
      이미지를 여러개 올려서 바꿔가면서 쓰실거면 CSS에 있는 파일명을 바꿔주면 됩니다. CSS 67행에 보면 "images/header_default.jpg" 가 있습니다.
      이걸 업로드한 원하는 파일명으로 바꿔주면 됩니다.
      이미지 파일은 자동으로 images 폴더로 업로드 되니까 파일명만 신경쓰면 될겁니다.

  • 그런식으로 했었는데 자꾸 원래있던 3개의사진만 떠서요 ㅠㅠ
    제가 제 사진파일이름을 header_default3.jpg로 저장하고 이미지폴더에 넣은뒤 스킨을 변경한 후 스킨편집까지해봤는데 계속 그러네요...

    • 스킨에 문제가 있는지 확인해봤는데
      문제없이 잘 동작합니다.
      스킨을 테스트로 입혀놓은 것인데
      http://fr45.tistory.com/
      샘플말고 다른 이미지 파일을 업로드해서
      CSS 67행에 파일명만 바꿔서 적용한 것입니다.
      변경 적용후
      웹브라우저 캐시를 한번 소거하시고 확인해보시기 바랍니다.

      웹브라우저에 구파일 캐시가 남아서 반영이 안되어 보이는 것일 수 있습니다.

      혹시 이미지 파일명이 대소문자를 구분하는데 정확히 일치하지 않는건지 확인해보시기 바랍니다.(티스토리 업로드 이미지는 대소문자를 구분합니다.)
      가능하면 소문자로만 영문자로 파일명을 정해서 업로드한 후 css에 적용을 해보시기 바랍니다.

  • ㅇㅎ 캐시파일 지우니까 되네요 감사합니다 ^^