본문 바로가기

티스토리스킨/베이직 디자인 스킨

티스토리 스킨 095 - 반응형 2단 노트5 스킨 배포합니다.

반응형

스킨 095 : 반응형 2단 노트5


- 노트에 필기는 하는 느낌의 블로그를 만들 수 있는 2단 스킨입니다.

- 4가지 노트 디자인이 있으며 스킨 옵션 설정에서 선택해 사용할 수 있습니다.

- 컨텐츠 영역 너비는 855px로 고정입니다. ( 변경하려면 스킨 CSS에서 레이아웃 크기까지 함께 변경해야 합니다.)

- 사이드바 위치를 스킨 옵션 설정에서 왼쪽, 오른쪽, 감춤 중 선택 가능합니다.

- 커버 페이지는 글목록 타입 1가지만 지원됩니다.

- 카테고리 위치를 스킨 옵션 설정에서 헤더 상단, 헤더 하단, 사이드바 중 선택할 수 있습니다.

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

 

 






스킨 옵션 설정

 

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

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



A. 스킨 설정 옵션





B. 카테고리를 헤더 상단, 헤더 하단, 사이드바 위치에 위치시킬 수 있습니다.






C. 사이드바 표시 위치 설정 

사이드바를 왼쪽(2단스킨), 오른쪽(2단스킨), 감춤(1단스킨) 중 선택할 수 있습니다.






C. 4가지 노트 디자인 중 한가지를 선택해 사용할 수 있습니다.





 

패치 내역

 

  • 없음



설치 주의사항

 

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


반응형
  • 이전 댓글 더보기
  • 오래 사용해 오던 다른 제작자의 스킨이 문제가 생겨 찾다보니 여기까지 왔네요.
    디자인 심플하고 매우 만족하고 있습니다.
    그런데, 게시물을 클릭하면 랜덤하게 인 것 같은 광고가 게시물 하단 쯤에 보이는데요.
    이 광고는 어떻게 없앨 수 있는지 알고싶습니다.
    감사합니다.!

    • 스킨에 별도로 광고같은걸 뿌리는 코드가 붙어있거나 하지는 않습니다.
      블로그에 적용한 외부 모듈(라이브리 등)이나 위젯, 플러그인등에서 뿌리는 것입니다.
      외부 모듈에 대해서는 해당 모듈 배포 사이트에서 확인을 해보시기 바랍니다.

  • 비밀댓글입니다

    • 댓글엔진은 요즘에는 사용하지 않는 추세입니다. 블로그가 무거워지기도 하고, 광고없이 제공되는 티스토리 댓글 엔진은 거의 없다고 보시면 됩니다.
      그마저도 대부분 구버전들이어서 최근의 티스토리 레이아웃이나 디자인에는 잘 맞지도 않습니다.

      위젯 달력에 컬러링하는 것은 제 스킨에서는 아주 초창기 외에는 모두 제외되어 있습니다. 날짜별로 글이 있을 경우에만 링크가 달리는 것만 남아있습니다.

      구지 컬러링을 하려면
      style.css 에서 .cal_click 클래스를 찾아서
      그 위나 아래에

      .box_aside .tt-calendar tbody tr.cal_current_week {
      background-color:#f0f0f0;
      }
      .box_aside .tt-calendar tbody td.cal_day_sunday {
      color:#ee802f;
      }
      .box_aside .tt-calendar tbody td.cal_day4 {
      font-weight:bold;background-color:#e0e0e0;
      }

      클래스들을 추가해주면 됩니다.
      원하는 컬러나 스타일은 조금 손을 보면 될 겁니다.

  • 감사합니다~친절하게 설명 글도 잘 써주셔서 덕분에 예쁜 스킨 쓰게 되었네요^^

  • 처음 시작하는데, 괜찮은 스킨이 없나 돌아다니면서 찾게 되었습니다.
    감사히 잘 쓰겠습니다^^

  • 놀자~ 2020.03.13 12:28 댓글주소 수정/삭제 댓글쓰기

    안녕하세요. 스킨이 너무 예뻐서 블로그에 적용해서 사용해보고 있는데요. 혹시 상단 타이틀 있는 곳 뒤나 좌우로 배경 이미지를 넣을 수 없을까요? 블로그 상단에 블로그 성격을 알 수 있는 이미지를 넣고 싶은데 방법을 몰라서 문의 드립니다.
    예쁜 스킨 올려주셔서 감사합니다~

    • 해당 스킨은 노트 디자인으로 가용 영역이 대부분 배경이미지가 들어가 있고

      헤더 영역에 배경 이미지를 깔려면

      스킨 원본 기준
      style.css 317행에

      #header > .title

      스타일 속성으로 배경 이미지를 추가하는 방법만 사용 가능합니다.

      예를 들어

      background-image: url(./images/header-bg.jpg);

      이렇게 배경 이미지 속성을 추가하면 헤더 타이틀 영역 안쪽 전체에 배경 이미지가 추가됩니다.

      background-image: url(./images/업로드한이미지파일명);

      이렇게 실제로 업로드한 파일 이미지명으로 변경을 해서 추가해주면 되고...

      헤더 영역 높이값은 175px 가 기본 값입니다.

      헤더 배경에 센터 정렬로 꽉차게 채우려면

      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;

      이렇게 속성 3개를 더 넣어주면 크기가 조절되서 센터 배경에 자동으로 붙습니다.
      기본 스킨 상태에서 높이 175px 너비 1135px 이고 너비를 좀더 크게해서 붙여넣으면 좌우가 자동으로 잘려서 적당히 맞게 붙여넣어질 겁니다.

  • 놀자~ 2020.03.13 15:14 댓글주소 수정/삭제 댓글쓰기

    감사합니다. 덕분에 배경 잘 넣었습니다~~ 복 받으실거에요~~

  • 공유해주신 스킨 잘 사용하고 있는데요 궁금한게 있어서 문의 드립니다. 지금까지 다른 글들은 플러그인을 통해서 유튜브 영상을 첨부했을때 가로폭에 맞춰 잘 나왔었는데요 이번에 올린 글은 동영상이 작게 들어가서 어떻게 하면 좋을지 몰라 문의 드립니다. https://codeya.tistory.com/29 문제가 되고 있는 글입니다. 다시 한 번 감사드립니다.

    • 티스토리 유튜브 플러그인으로 붙이신듯 싶은데...
      플러그인에서 설정한 듯한 크기값이
      480x360으로 고정되어 있습니다.
      유튜브의 문제는 아닌것 같고 플러그인에서 설정값을 이렇게 잡은거 같은데...

      티스토리 유튜브 플러그인은 현재 에러가 있는건지 저는 영상 검색이 안됩니다.

      플러그인의 문제인듯 싶기는 한데...
      영상을 다시 붙여넣어 보시기 바랍니다.

      플러그인으로 영상을 붙여넣어볼 수 없어서 확인을 못하고 있습니다.

  • 새벽에 영상을 다시 넣어보기도 하고 새글을 써서 해도 안 되더니. 지금은 플러그인에서 영상 검색이 아에 안 되네요. 티스토리 플러그인에 뭔가 문제가 있나 보네요. 항상 친절하게 답글 달아주셔서 감사합니다.

  • 마음에 딱 드는 스킨 너무 감사드립니다.
    한참을 찾았는데... 그런데, 검색 버튼이 표시가 안되네요.
    이미지에는 있는 것으로 확인되었고, HTML에 검색 이라고 적혀 있는 것으로 보아, 분명한 만드셨을 듯한데..
    설정에서 제가 확인 못한 것이 있는지... 한번만 체크 부탁들겠습니다.

    감사합니다.

  • 참, 참고하시라고 링크 이것에 첨부합니다... https://realtycontents.tistory.com/

  • 아, 그리고 지금 썸네일 이미지 사이즈를 맞추고 있습니다만...
    혹시 어디에서 이미지 사이즈를 조정하는지 알 수 있을까요?
    원래사용하던 직사각형 정사각형 이미지가 모두 맞지 않아서요... 부탁드립니다.
    감사합니다.

    • 2시간 구글링 끝에 썸네일 사이즈 조절은 완료했습니다. 검색란 붙이는 것은 아직도.. 부탁드려요~~

    • 스킨에 포함된 script.js 파일을 업로드 하지 않으셨습니다. script.js에서 검색버튼 위치를 이동시켜 표시하는데 에러가 나서 검색 버튼이 보이지 않는 것입니다.
      다운로드 받은 스킨의 images 폴더 안에 있는 것들은 모두 업로드 해야 합니다.

      https://realtycontents.tistory.com/manage/design/skin/edit#/source/file

      에서 파일 업로드 해야 합니다.

  • 공유해 주신 공유 바탕에 나름대로 저에게 맞게 수정해 보았습니다. https://realtycontents.tistory.com/

    그런데, 데스크 탑에서 보면, 아직도 검색창이 나오질 않고,
    썸네일 제목의 정렬을 어떻게 하는지 모르겠네요.

    썸네일 제목의 정렬은 찾아보았는데, 본문내용 정렬만 있네요, 확인 하시면 도움 부탁드립니다.
    감사합니다.

    • script.js 파일 업로드 안된 것으로 나옵니다.
      스킨편집기 화면 파일업로드 탭 하단의 "추가+" 버튼을 눌러서 script.js 파일을 선택해야 합니다.

      썸네일 제목의 정렬은 무슨 뜻인지 모르겠습니다. 썸네일 목록의 표시 순서를 조정하고 싶으신 건지? 어떤 화면의 정렬을 원하는 건지 다시 알려주시면 좋겠습니다.

  • 아.. 네, 알려주신 파일 업로드 했더니, 이제 노트 바탕화면이 보이네요, 그런데 아직도 검색창은 데스크탑에서 화면을 열면 뵈지 않습니다...
    제가 무엇을 잘못한 것인지?
    https://realtycontents.tistory.com

    그리고 썸네일 제목의 정렬은, 위의 링크에 보시면, 썸네일이 두개 있는데, 이 썸네일의 제목이 왼쪽으로 치우쳐 있고,
    카테고리"최신뉴스" 와 날짜의 위치를 조절하고 싶어서 여쭈어 본 것입니다.

    예를 들어, 제목은 가운데, 카테고리 이름은 왼쪽, 날짜는 오른쪽 등으로..

    친절하게 선뜻 답해주셔서 감사합니다.

  • 앗, 검색은 이제 됩니다. 새로고침을 했더니...바로~~ 죄송요!!

    시간 나실때, 썸네일 제목, 날짜, 카테고리 정렬(오른쪽, 왼쪽, 가운데)하는 방법만 부탁드립니다.

    검색까지 되니까 너무 이쁜데요!! 잘 쓸께요. 덕분에 시행착오를 많이 줄였습니다. 감사합니다!!!

    • style.css 원본 기준
      1333행

      .cover-list ul li .article-info

      클래스에

      text-align: center;

      속성 행을 추가해주면 됩니다.


      1635행

      .list-type-thumbnail .post-item .article-info

      클래스에도 같은 속성행을 추가해야 합니다.

  • 알려주신 방법으로 첨부하였더니, 모두 중앙으로 잘 위치했습니다.
    시간 내셔서 구체적으로 알려 주셔서 감사드립니다.
    덕분에 HTML과 CSS도 좀 더 경험하고, 그 동안 고민하던 새로운 블로그도 해결 할 수 있습니다.
    다시 한번 진심으로 감사드립니다~ 꾸벅!

  • 비밀댓글입니다

    • 썸네일 비율 변경은 손을 볼 곳이 조금 많습니다.

      1.
      skin.html
      296행, 400행

      C360x240 -> C400x400

      2군데 변경

      2.
      style.css
      1537행, 1542행, 1300행

      .post-item .thum img
      .post-item.noimage img
      .cover-list ul li figure

      240px -> 160px

      3군데 변경

      3.
      script.js
      99행, 106행

      data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=
      ->
      data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

      2군데 수정

      하면 사각형 썸네일로 출력됩니다.

    • 2021.05.04 20:31 댓글주소 수정/삭제

      비밀댓글입니다

  • 안녕하세요~
    공유해 주신 반응형 2단 노트 5로 잘 사용하다가, 어느날 부터 홈화면이 달려 졌는데..
    이것 저것 시도해 보았는데, 개선이 없네요.
    최근에 애드센스를 신청한다고, Html 삽입한 것 밖에 없는데..
    기억으로는 이 이전 부터 그랬던 것 같구요.
    그리고 아래와 같은 사인이 홈화면에 계속 뜨네요...
    시간 허락하시면, 한번 살펴봐 주시면 큰 도움되겠습니다.
    좋은 자료에 응답까지, 항상 감사합니다.

    o"> content-area-padding narrow-header sidebar-right category-bottom prevnext sidebar-thumbnail-on list-type-thumbnail place-thumbnail note-design1" style="background-color:#FFFFFF" >

    출처: https://realtycontents.tistory.com/manage/previewSkin.php [캐나다 부동산/모기지]

    • 스킨을 수정하면서 태그 쌍이 깨졌거나 꺽쇠(<>) 쌍이 안맞거나 쌍따옴표, 따옴표 쌍이 안맞거나 하거나, 애드센스를 붙이면서 잘못붙여서 html 구조가 전체적으로 깨졌습니다.
      그래서 body 태그에 있는 스킨 속성 설정 값이 그대로 상단에 텍스트로 뿌려지는 것입니다.
      <body>태그 부터 그 위로 새로 붙여넣은 내용들과 태그가 깨지는게 없는지를 확인해보셔야 합니다.
      수정한 소스를 보기전에는 어디가 깨진건지 블로그만 봐서는 알 수가 없습니다.
      이미 깨져서 출력되고 있기 때문에...

  • 아, 빠른 답변에 감사합니다.
    그럼 어떻게 해야 할까요? 스킨을 다시 깔아야 하나요?
    아님, 어포스트님이 Html소스를 보고 깨진 부분을 알려 주실 수 있으신지요?
    만약 어떻게 가능하시다면, Html 소스를 어떻게 전해 드려야 할지요? 분량이 좀 되는데...
    알려주시면, 해가 할 수 있는 건 다 해봐야죠~
    이제 블로그가 조금씩 돌아가는 듯한데...
    암튼 부탁드립니다. 감사합니다.

    • 답변이 부족했던듯 싶네여..

      먼저 현재 스킨을 백업하시고..
      잘 모르시면 아래글 참조
      https://blogpack.tistory.com/929

      새 스킨을 적용 하신 후에...

      백업한 스킨은 다운로드할 수 있으니까..
      다운로드한 후 압축을 풀어서 새 스킨 적용한 것과 비교해서 다른 부분이나 새로 적용한 부분을 하나씩 붙여넣어가면서 어디서 깨지는지 확인을 해보시기 바랍니다.

      해보시고 그래도 모르겠으면 다시 문의를 하시기 바랍니다.

  • 빠른 답변 감사합니다.
    쉽지는 않을 것 같네요, 그래도 해 보겠습니다.
    알려주신 방법으로 해 보고, 경과 보고 하겠습니다.
    감사합니다~~

  • 안녕하세요..
    알려주신 방법으로 일단 백업을 하고, 다시 적용까지는 했습니다.
    그런데..말씀하신 비교해서 다시 찾기가 어려워...
    적용해서 다시 예전의 설정을 하고 있습니다. T.T
    그런데... 썸네일 크기를 어떻게 했는지 모르겠네요.
    다시 검색을 해 보았는데...스킨 종류에 따라서 위치가 다르다고 하구요..
    혹시 썸네일 크지 조절하는 항목이 몇 번인지 알려 주시겠어요?
    감사합니다.

    • 이렇게 해결책을 찾으면 아마 무한루프를 돌게 될거 같습니다.
      백업한 문제있던 스킨 압축파일을
      extflash@gmail.com
      으로 보내주세요.
      확인을 해보겠습니다.


닫기