본문 바로가기

티스토리스킨/반응형2단 스킨

티스토리 스킨 096 - 반응형 2단 풀커버 스킨 배포합니다.

반응형

스킨 096 : 반응형 2단 풀커버


- 웹브라우저 가로 영역 전체를 사용하는 2단 스킨입니다.(옵션 설정으로 켜거나 끌 수 있음)

- 넓은 글 영역을 필요로 하는 블로그에 적합합니다.

- 컨텐츠 영역 너비는 880px고정입니다.

- 전체 커버 기능 지원합니다.

- 사이드바를 왼쪽, 또는 오른쪽에 배치할 수 있습니다.

- 카테고리를 헤더 상단, 또는 사이드바 위치에 배치할 수 있습니다.

- 스킨에 포함된 index.xml 파일과 images 폴더 안의 script.js 파일 및 이미지 파일을 모두 업로드해야 스킨 레이아웃이 정상 동작합니다.

 

 




스킨 옵션 설정

 

1단 전용 스킨이며, 사이드바 메뉴는 펼침 메뉴로 감추어져 있습니다.

스킨 옵션 설정에 대한 상세한 설명은 ->스킨 옵션설정 글을 보시기 바랍니다.(일부 옵션 항목은 제외되어 있습니다.)





* 이미지를 클릭하면 옵션 항목들을 자세히 볼 수 있습니다.





A. 카테고리 위치를 헤더 상단, 또는 사이드바에 배치할 수 있습니다.









B. 사이드바를 왼쪽, 또는 오른쪽에 배치할 수 있습니다.






C. "브라우저 전체 영역 사용" 옵션을 켜면 전체 브라우저 너비를 사용합니다. 기본 너비 제한시 너비는 1220px 입니다.





 

패치 내역

 

  • 없음



설치 주의사항

 

  • 스킨 적용시 index.xml, script.js 파일을 반드시 업로드해야 스킨이 정상 적용됩니다.
  • 파일 업로드 후에는 웹브라우저 캐시를 한번 소거해야 바로 스킨이 정상 반영됩니다.


반응형
  • 😀 2020.02.09 02:36 댓글주소 수정/삭제 댓글쓰기

    이렇게 좋은 스킨을 무료배포 해주셔서 정말 감사합니다!
    다름이 아니라 해당 스킨 컨텐츠 영역이라 할까요??
    배경에 검정색 말고 저 화이트 부분을 모두 뒤에 검정색 스킨색과 동일하게 혹은 투명으로 바꾸고 싶은데 어떻게 해야 할까요ㅜㅜ
    F12 눌러서 이거 저거 다 바꿔보고 몇 시간째 끙끙대다 도저히 모르겠어서 여쭤보러왔습니다ㅜㅜ..

    • 가능은 하지만 배경이 어두워서 글자들이 잘 안보이게 됩니다.

      스킨 옵션 설정에서
      공통/페이지 > 스킨 배경색 선택
      에서 스킨 전체 배경색은 좀 더 밝기 조정해야 합니다.

      -----------

      스킨 원본기준 style.css

      150행
      #wrap > .inner{
      속성에서
      background-color: #fff;
      속성 삭제

      496행
      .sidebar{
      속성에서
      background-color: #fff;
      삭제

      592행
      .box_aside .tit_aside{
      속성에서
      background-color: #f8f8f8;
      삭제 - 이건 사이드바 타이틀 배경이어서 봐서 조정하면 됩니다.


      802행
      #footer {
      속성에서
      background-color: #fff;
      삭제


      하면 투명으로 배경색이 보이는 상태가 됩니다.

      나머지도 배경이 있는 부분은 F12 눌러서 배경색 흰색 속성을 style.css 에서 지워주면 됩니다.

    • 😀 2020.02.10 03:11 댓글주소 수정/삭제

      와 해결했어요 감사합니다!

  • 이쁜 스킨 사용하려고 합니다.
    고맙습니다!!! 좋으 하루되세요!

  • 캐빌리 2020.02.28 14:38 댓글주소 수정/삭제 댓글쓰기

    카테고리 위치가 상단 배치만 되고 사이드로 바꾸면 카테고리가 안뜹니다

  • 안녕하세요! 감사히 잘쓰겠습니다.
    다름이 아니라 글쓰기 버튼이 블로그 화면 내에 바로 보이도록 할 수 있는 방법이 있을까요?
    관리자로 들어가서 글쓰는것이 조금 불편해서요...
    스킨 올려주셔서 너무 감사합니다.

    • 보통은 푸터 영역 끝에 "관리자" 링크 오른쪽에

      <a href="[샵샵_owner_url_샵샵]/post" class="admin">글쓰기</a>

      요 링크를 붙여서 표시를 합니다.
      샵샵->##

      skin.html 에서 "관리자"로 검색하면 보통 하단 부분에 1개만 나올겁니다.

      관리자</a> 뒤에 붙여 넣어주면 됩니다.
      아니면 원하는 적당한 위치에 붙여넣어도 무방합니다.
      하이퍼링크 경로만 지켜주면 되고
      "/manage/post"
      가 글쓰기 경로입니다.

    • 와... 바로 댓글 달아주셨네요
      정말정말 감사합니다!

      잘쓰겠습니다!!!^^

  • 그림의 캡션 글자크기를 변경하고 싶어요.

    .entry-content .cap1 {
    text-align: center;
    font-size: 1.2em;
    margin-top: 6px;
    }

    이 부분을 수정해도 안변하네요..
    스킨 너무 감사합니다.

    • 이미지 캡션은 티스토리 시스템에서 기본으로 정한 크기가 있고 그 크기를 따라 갑니다.
      위 클래스는 영향을 주지 않습니다.

      티스토리 시스템에는

      figure figcaption [
      }
      로 13px를 글자 크기로 주고 있습니다.

      스킨 원본 기준 style.css 2264행 쯤에

      .entry-content figure figcaption{
      font-size: 1em;
      }

      요 클래스를 추가해주시면 될 것 같습니다.
      글보기 내용안의 이미지 캡션에만 영향을 미치고 1em은 16px 입니다.
      픽셀값으로 써도 무방합니다.

    • 너무 감사합니다. 잘 작동하는지 확인하였습니다.

  • 감사합니다. 잘 사용하겠습니다

  • 좋은 스킨 만들어주셔서 감사합니다^^
    잘쓰겠습니다

  • 비밀댓글입니다

    • 스킨원본기준

      skin.html

      136 ~ 138행
      159 ~ 161행
      456행
      492~496행
      543~547행

      <span class="thum"></span>

      을 모두 지우면 텍스트만 출력됩니다.



      메인 목록에 커버리스트를 쓰는데
      371 ~ 373행
      <figure></figure>

      삭제


      사이드바 방문자 그래프는
      플러그인을
      <div class="box_aside"></div>
      안에 넣어야 사이드바의 해당 위치에 그래프가 정상 출력됩니다.

  • 비밀댓글입니다

    • 같은 스킨으로 테스트해본결과 정상 출력됩니다.

      블로그에 들어가봣는데..
      <div class="box_aside"></div>
      안에 통계 치환자를 넣은게 아닌걸로 나옵니다. 문제가 있어서 빼놓은건지는 모르겠는데.. 어쨋든 그렇습니다.

      정확하게 맞춰서 넣으면 늘어나는거 없이 깨끗하게 붙습니다.

      조금더 예쁘게 하자면

      <div class="box_aside">
      <div class="tit_aside">방문통계</div>
      <div>[ ##_StatisticsGraph_## ]</div>
      </div>

      이렇게 제목도 추가할 수 있습니다.

  • 비밀댓글입니다

  • 선생님 안녕하세요 스킨 너무나 잘 쓰고 있습니다. (새해복 많이 받으세요!)
    모든 페이지에서 글 영역의 너비를 다소간 줄이고 싶은데 방법이 있을까요?
    일부러 넓은 영역으로 만들어주셨는데; 약간의 커스터마이징을 하고픈 마음에.. 어떻게 가능할지 여쭙습니다.

    • style.css 에서
      1220 으로 검색하면 1개가 나옵니다.
      스킨원본으로 154행입니다.

      전체 레이아웃의 너비를 1220px로 설정한다는 레이아웃 너비 설정값입니다.

      사이드바 메뉴가 있는 데스크탑 레이아웃은 1024px 이상이어야 합니다.
      1024 이상으로 값을 정하면 해당 너비로 레이아웃이 줄어들고, 줄어든 크기만큼 컨텐츠 영역 너비가 줄어듭니다.(사이드바 영역 너비는 고정)
      1060px 정도로 맞춰서 줄여보시기 바랍니다.
      1024 미만으로 줄이려면 반응형 레이아웃에 영향을 주는 부분을 모두 손대야 하기 때문에 여러군데를 손봐야 합니다.
      일단 수정해보시고 더 좁아야 할 거 같으면 다시 문의를 해주시기 바랍니다.

    • 헉 감사합니다! 1024px이 한계값이었군요. 1060px부터 시작해서 마음에 드는 너비를 찾아 조정해보다 1120px로 맞추었습니다. 자세한 설명까지 이렇게 .. 덕분에 이해가 더 잘 되었습니다. 정말 고맙습니다!

  • 안녕하세요? 주인장님 스킨 만드시는 센스가 매우 훌륭하고 무료로 배포해주셔서 감사합니다 :)
    몇몇 스킨들이 아주 맘에들어 티스토리에 적용하려 하였는데, 모바일 디스플레이에서 글목록 화면이 전부 매우 커다란 썸네일을 적용하고 있어서 결국 사용을 포기하였습니다 ㅠ.ㅠ (저는 포토위주의 블로그가 아니기에 전혀 적합하지 않고... PC환경의 스킨모양은 매우 맘에들었으나, 모바일 환경을 도저히 무시할 수 없었기 때문입니다.)
    혹시 모바일에서도 '중간크기우측썸네일+좌측내용'으로 글목록을 보여주는 형식인 스킨이 있나 찾아보았지만 전부 동일하게 큰 썸네일 글목록이더군요....
    만들어서 배포해주시는것만으로도 정말 감사하고 대단한 일입니다만 추후 스킨 제작시 모바일의 글목록 형식 또한 고려하여 주신다면 스킨이 더욱 번창하지 않을까 싶습니다^^ 좋은하루되세요

    • https://blogpack.tistory.com/941
      이걸 써보세요.
      모바일에서 한 행에 2개씩 썸네일을 표시할 수 있습니다.
      옵션 설정으로 여러가지를 설정할 수 있으니까 글의 스킨 옵션 설정 항목들을 찬찬히 확인해보시기 바랍니다.

    • 답변 감사합니다~^^
      사실 익스플로러 지원이 안된다는 빨간 글에 겁먹어서 뒤로가기 눌렀던 스킨인데...모바일 버전이 깔끔하군요!!
      익스는 어짜피 8월이후 안쓰인다하니 쿨하게 쓰기로 결정했습니다.
      사실 주인장님 블로그 모바일버전은 어케하신걸까..? 내심 궁금해 했는데 같은 양식이었군요..ㅎㅎ

      덕분에 옵션설정 이것저것 끝내고 드디어 스킨 정착을 완료했습니다!
      깔끔한것, 복잡하게 CSS안건들이고 스킨편집에서 이것저것 커스텀이 가능한것, 썸네일 정사각형 등 매우 만족합니다.

      초창기에 깔끔하단 이유로 아무생각없이 poster기본스킨을 쓰다가, 에드센스를 달려고 보니 사이드바가 있는 스킨이 좋다고 하여 스킨을 이것저것 알아봤는데 깔끔하면서 맘에드는 스킨이 잘 없더라구요..ㅠ 어포스트님 스킨은 깔끔해서 맘에 듭니다. 앞으로 스킨 안바꾸고 이대로 정착해서 쭉 갈수있길....!!
      감사합니다


닫기