본문 바로가기

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

티스토리 반응형 스킨 117 - 반응형 2단 심플리트3

반응형

----------------------------------------------------------------------

2021.06.02

기능이 대폭 개선된 버전 3이 배포되고 있습니다.

버전3를 이용하시기 바랍니다.

> 티스토리 반응형 스킨 117 - 반응형 2단 심플리트3 버전3 배포합니다.

버전2의 주요 기능은 다음 글을 읽어보시기 바랍니다.

>티스토리 반응형 스킨 117 - 반응형 2단 심플리트3 버전2

----------------------------------------------------------------------

 

 

티스토리 스킨 117 : 반응형 2단 심플리트3

 

 

 

* 썸네일 이미지를 크게 적용한 모던한 디자인의 2단 반응형 스킨입니다.

* 썸네일 이미지 크기를 크게 설정해 인라인 스킨처럼 사용할 수 있습니다.

 

 

  • 커버 기능은 커버 리스트 기능만 제공합니다.
  • 글 목록 썸네일 위치를 왼쪽, 오른쪽 중에 선택할 수 있습니다.
  • 헤더 배경 이미지를 적용할 수 있습니다.
  • 헤더 텍스트 정렬을 왼쪽, 가운데로 설정할 수 있습니다.
  • 카테고리 메뉴를 헤더 하단, 또는 사이드바에 배치할 수 있습니다.
  • 레이아웃 전체 너비를 1240px(기본), 1140px(좁게) 설정할 수 있습니다.
  • 스킨에 포함된 index.xml 파일과 images 폴더 안의 script.js 파일 및 이미지 파일을 모두 업로드해야 스킨 레이아웃이 정상 동작합니다.

 

 

 

 

 

 

스킨 옵션 설정

 

스킨 옵션 설정은 티스토리 관리자 왼쪽 메뉴의 "스킨편집" 을 클릭하면 됩니다.

 

 

 

 

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

 

 

 

 

패치 내역

 

  • 2020-05-15 1.0.1 패치 - 반응형 모바일 화면 스크롤시 블로그 타이틀이 2줄 이상일 경우 타이틀이 밀려 내려가는 현상 개선
  • 2020-06-04 1.0.2 패치 - 모바일 화면에서 초기 로딩시 사이드바 메뉴가 순간적으로 나타났다 사라지는 현상 개선

 

설치 주의사항

 

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

 

 

반응형
  • 이전 댓글 더보기
  • 당그러니 2020.10.05 13:22 댓글주소 수정/삭제 댓글쓰기

    ㅎㅎ아하 그렇군요 잘 사용하겠습니다.
    좋은스킨 배포해주셔서 감사합니다 !

  • 깔끔쓰 2020.11.09 23:26 댓글주소 수정/삭제 댓글쓰기

    정말 깔끔하네요...!! 이런걸 받다니ㅠㅠㅠ 감사합니다!

  • 어포스트님 좋은 자료 너무 감사드립니다.
    그런데 제가 설치를 잘못한건지 이상하게 나오네요.
    설치방법 안내해주신대로 했는데 왜 그런걸까요? ㅜ

  • 비밀댓글입니다

    • 블로그 가봤는데 붙이신 애드센스 코드에서 에러가 나고 있습니다.
      애드센스 코드를 2개를 붙이신게 아닌가 싶은데...
      콘솔창에

      "adsbygoogle.push() error: Only one AdSense head tag supported per page. The second tag is ignored."

      이런 에러가 뜨고 있습니다. 그래서 광고가 안나오는 것으로 보입니다.
      일단 에러부터 해결하고 광고 노출 여부를 다시 확인해봐야 할 것 같습니다.

    • 감사합니다 일단 확인 해보겠습니다!

    • 티스토리 관리자 페이지의 수익>애드센스관리의 애드센스와 개인 애드센스 2개를 중복 사용하면 안됩니다.
      광고 키가 2개가 되서 에러가 납니다.

      adsbygoogle
      로 적용한 스킨 검색해보면 개인 애드센스로 별도 추가한 애드센스 스크립트가 있습니다.
      지우시면 될겁니다.

      티스토리 관리자 페이지에서 붙이는 애드센스는 별도로 애드센스 스크립트를 skin.html에 붙일 필요가 없습니다.

      치환자 추가한 위치에 자동으로 스크립트와 기타 필요한 코드들이 자동으로 붙습니다.

      티스토리에서 붙이는 애드센스 키는
      9691043933427338
      로 끝납니다.

  • 모바일 카테고리 버튼이 작동하지 않는데 원래 이런거죠?

  • 정말 감사합니다

  • 여기 보고 이번에 제 티스토리 블로그 스킨 바꿨어요. 깔끔하고 엄청 좋습니다. 감사합니다~ 건강유의하세요 ^^

  • wlgus 2021.01.04 15:22 댓글주소 수정/삭제 댓글쓰기

    skin.html 을 적용하려고 파일을 열어보니 보호되어 있는 글이니 비밀번호를 입력하라고 되어잇네요.

    보여드리고 싶은데 이게 붙여넣기가 안되다보니, 어떻게 해야할까요?

    • 텍스트파일인데 비밀번호같은걸 입력하라고 뭔가가 표시될 이유가 없을텐데요...
      질문하신 내용을 이해를 못하겠습니다.
      skin.html 파일을 메모장에서 여신 후 전체 선택해서 티스토리 스킨 편집기 화면의 html 탭 에디터 내용을 모두 삭제하고 붙여넣으면 됩니다.

  • wlgus 2021.01.05 22:49 댓글주소 수정/삭제 댓글쓰기

    질문 하나 더드려요 ㅠㅠ 현재 파일업로드 부분에서 index.xml 을 업로드하는 과정인데 메시지에 'index.xml'을 업로드하면 스킨의 중요정보가 즉시 변경됩니다. 그래도 업로드 하시겠습니까? 라고 떠서 '확인'을 누르니 진행중인 표시만 뜨고 다음으로 넘어가지 않네요. 제가 실수한 부분이 있을까요?

  • 안녕하세요??? 오랜만에 들렸어요.
    이번 스킨은 정말 걸작이네요.
    이런 멋진 스킨을 제작해 무로료 배포해주셔서 너무 감사드립니다.
    새해 복 많이 받으시고 코로나 조심하세요!

    아참 혹시 예전에 다른분이 만든 스킨 커스텀 해주시나요?
    물론 비용 지불하구요 :)

  • 안녕하세요. 제가 처음이라 잘몰라서 그러는데..
    이스킨 그냥 다운받아서 적용해서 사용해도 되는것인가요?
    만약 그렇다면 따로 설정같은거 없이 그대로 써도 무방한지요.. ㅠ

  • 비밀댓글입니다

    • 스킨 원본 기준
      style.css
      147행
      max-width: 1240px;
      이 레이아웃 너비입니다.
      기본 본문 너비가 820px으로 계산되므로 200 줄이면 본분 너비가 자동으로 620px로 줄어듭니다.

      레이아웃이 큰 디자인이기 때문에 너무 줄이면 사이드바가 큰 가분수가 됩니다.

      752행
      width: 330px;
      가 사이드바 너비입니다.
      적당히 줄이고
      1017행
      margin: 0 360px 0 0;
      의 360이 사이드바 영역 + 본문과의 사이 여백 합입니다.
      사이드바 너비 줄인 만큼 360에서 빼주면 됩니다.

      본문 너비는 레이아웃과 사이드바 너비에 맞춰서 자동으로 크기가 맞춰집니다.

  • 비밀댓글입니다

    • 2번 3번은 네이버 검색엔진의 인덱싱이 최근에 뭔가가 바뀌면서 티스토리 블로그 전반에 나타나는 현상입니다.
      티스토리 스킨이나 티스토리 시스템에서 뿌리는 태그들에 대해서 전에는 이런 현상이 없었습니다.

      시멘틱 태그에 대한 체크를 엄격하게하거나 자기들(네이버검색엔진) 기준에 맞지 않으면 메시지가 뜨도록 변경된 것으로 보입니다.

      제가 배포하는 스킨들은 인터넷익스플로러 호환성 때문에 100% 시멘틱 태그만으로 작성되어있지는 않습니다.

      티스토리 자체가 구글 검색 의존도가 워낙 높기 때문에 네이버 따위?는 고려를 그닥 하지 않고 있습니다.

      네이버에 100% 맞추려면 일부 구 웹브라우저 호환성을 포기하고, 스킨을 전체적으로 구조를 조정해야 하는 문제가 있습니다.

      네이버 검색 자체가 자사 서비스 기준으로 돌아가기 때문에, 서치어드바이저에서 표시하는 메시지가 문제가 있다거나 한 건 아닐 수도 있습니다.

      1번은 사이트맵 수집이 정상적으로 되지 않는 의미인거 같은데... 이유는 뭔가 등록을 잘못하신게 아닌가 싶습니다. 정확히 판단은 안됩니다.
      사이트맵을

      https://blogpack.tistory.com/sitemap

      이런식으로 본인 블로그 url을 정확하게 등록한건지 확인을 해보시기 바랍니다.

      수집이 정상적으로 되고 안정화 될 때까지는 시간이 좀 걸립니다. 보름 정도는 천천히 지켜보면서 확인을 해보시는걸 추천합니다.

      스킨에 변경이 없고 글만 계속 올려도 검색 인덱싱 된 갯수가 갑자기 줄어들기도 하고, 검색 최적화가 잘되어있는 상위 5% 이내 사이트였다가 어느날 갑자기 10% 바깥으로 밀려나기도 하고 그런게 네이버 서치어드바이저입니다.
      철저하게 자사 서비스 기준으로만 돌아가므로 감안해서 적응하셔야 합니다.

  • 감사합니다.
    잘쓰겠습니다.

  • 안녕하세요. 스킨을 무료료 배포해 주셔서 정말 감사합니다~!

    그리고 질문 하나만 드리자면, 블로그 첫 페이지에 글 목록 중 '제목이 2줄로' 나오게 할 수 있을까요?

    바쁘신데 질문만 드려서 죄송합니다.

    • 두줄이라는게...
      1줄로 나오는 제목을 말하는 건지..
      아니면 그 밑에 4줄로 나오는 내용 미리보기를 2줄로 나오게 하고 싶다는 건지...

      1줄로 나오는 제목을 2줄로 나오게 하고 싶은 거면 자동으로 1줄 2줄이 되게 하고 싶은건지.. 아니면 고정으로 2줄 공간을 차지하고 싶게 한건지...

      확인해주시면 좋겠습니다.

  • 1줄로 나오는 제목을 길이가 길면 자동으로 2줄로 나오게 하는걸 말하려고 했습니다.

    • 제목을 2줄로 제한하려면

      1371행
      .post-item .title{

      2420행
      .cover-list ul li .title

      두 곳의 속성 2개의 값을 다음과 같이 수정하면 됩니다.

      max-height: 3.5em;
      -webkit-line-clamp: 2;

      행수 제한을 아얘 제거하려면
      위 두 속성을 삭제하면 됩니다.

      다만 썸네일 이미지 높이에 맞춰져 있는 글 요약 정보가 밑으로 더 늘어나는 문제가 생깁니다.

  • 티스토리 시작하고 마크쿼리 스파이더웹 스킨만 5년동안 사용해왔는데요.
    무겁고 로딩시간이 오래걸려 다른 스킨 알아보던중 알게되었습니다.
    디자인, 페이지 로딩속도 어느것하나 아쉬운점 없이 완벽한 스킨인것 같아요.
    폰트 사이즈와 포스팅제목 2줄로 바꾸는것만 손댔어요. 감사합니다!

  • 한가지 문의사항이 있습니다. 이 스킨에는 블로그이름이 <h1> 태그로 감싸져있는데, 포스팅 제목 한곳에만 <h1> 태그를 사용하는게 좋지않나요?

    • 배포하는 스킨은 티스토리 레퍼런스 스킨을 따라갑니다.
      레퍼런스 스킨에서 블로그명과 글 타이틀 두곳에 사용하고 있어서 호환성 유지를 위해 그대로 유지하고 있습니다.

      티스토리 시스템이나 기본 구조와 관련이 있어보이는 태그나 아이디는 건드리지 않는게 원칙입니다.

      티스토리에 새로운 기능이 들어가거나 배포스킨에서 사용하는 자바스크립트로 제어를 할 때 공통적으로 접근할 기준이 되기 때문입니다.

      h1이 2개여도 검색 엔진 관점에서 별 차이도 없습니다. h1의 갯수에 제한이 있는 것도 아닙니다. 검색엔진은 h1태그를 다 찾아서 인덱싱 합니다.

      정확하게 말하면 h1은 페이지 안에서 가장 중요한 문구로 최우선 순위가 있다는 뜻입니다.
      1개만 있는 것이 검색엔진에 좋다는 것은 검색엔진의 특성을 제대로 모르는 소위 ♩문가들이 만들어낸 말입니다.

      구글 검색엔진도 인덱싱하는데 한계가 있기 때문에 나름대로 꼼수를 씁니다.
      h1이 1개이고 글자수가 최대 20-30자 이내이면 이것이 이 페이지를 대표하는 키워드라고 최우선 순위를 두고 인덱싱 합니다.
      다만 h1이 한개여도 글자수가 70-80자가 넘어가면 h1이 두세개 인 것과 별 차이가 없습니다. 키워드가 많아지면서 카테고리 분류를 하기 어려워지기 때문에 h1이 여러개인것과 별 차이가 없어집니다.

      h1이 1개만 있어야 한다는 html 규정은 없습니다. 검색엔진이 선호하는 방식의 페이지 구조라는게 빠른 검색엔진 인덱싱 편의를 위해 좋다는 것이지 h1 갯수만으로 검색 엔진이 판단하기에 가장 중요한 h1이 여러 개여서 중요한 내용이 없는 문서라고 인식하지는 않습니다.

      여러개면 여러개 있는데로 다 인덱싱을 합니다. 갯수가 중요한게 아니라 인덱싱할 h1 전체 길이가 얼마냐가 더 중요합니다.

      그리고 가장 중요한 점. 티스토리 신 에디터의 글 내용 최상위 헤더가 h2입니다.
      정확하게 구조를 잡자면 블로그명에 h1
      글 제목에 h2 그리고 그 안의 글 내용 최상위는 h3가 되어야 합니다. 구조상 그렇습니다.
      다른 플랫폼을 기준으로 해도 이런 구조가 기본입니다.

      티스토리에서 구조를 설계할 때 신에디터의 최상위를 h2를 주었기 때문에 글 제목은 h1이 되고, 블로그 제목도 h1이 된 것입니다.

      스킨에 h1이 2개라고 구글 인덱싱이나 검색 결과가 차이가 나지 않습니다.

      블로그명에 h1을 주고 글 제목에 h2를 주면 글 본문의 h2와 중복이 발생하면서 오히려 글 제목이나 글 내용이 섞이면서 검색 인덱싱에 방해가 되게 됩니다.

      구조가 마음에 안들면 스킨 h1, h2, h3를 재 구조화해서 쓰시면 됩니다.
      다만 이렇게 글 글 제목에 h2를 주면 글 내용을 작성할 때 h2를 쓰면 안됩니다.
      말 그대로 검색 결과에 안좋은 영향을 주게 됩니다.

  • 답변감사합니다. 빙 웹마스터도구에서 h1태그가 2개이상이라며 SEO 오류가 떠있길래 여쭈어본것입니다.
    개인적으로 디자인적인 요소를 비롯해 상당히 만족하며 사용중인데요. 혹시 포스팅제목을 h1으로하고 블로그 이름을 h2로 해도 되지않을까요?

    조만간 속도가 더빨라졌다는 신버전2를 적용해보려고합니다만 궁금해서 한번더 여쭤봐요. 깔끔한스킨 배포해주셔서 감사합니다!

    • 117번 스킨의 v2 배포는 것은 일종의 테크니컬 프리뷰입니다.
      앞으로 모든 배포스킨들을 이렇게 업그레이드 하겠다 정도입니다.

      티스토리는 구형 블로그 시스템입니다.
      h1 태그 문제보다 100배쫌은 더 큰 검색엔진 최적화 문제들이 여러개 시스템에 존재합니다. h1 같은 사소한 문제에 크게 신경쓰지 않아도 되지 싶습니다.

      그리고 빙은 검색엔진으로서 의미가 없습니다. 무시하셔도 됩니다.

      블로그명으로 h2를 주려면
      style.css 에서
      .title h1 -> .title h2
      정도로 일괄 변경을 해주고 skin.html 에서 블로그명을 감싼 h1을 h2로 변경하면 되지 싶습니다.
      다른 배포 스킨들도 구조가 비슷해서 같은 방법으로 변경이 가능합니다.

      속도 개선 버전을 만드는 것은 티스토리 시스템 구조가 느리다보니 seo가 너무 않좋아서 스킨단에서 최대한 끌어올려보려고 만든 것입니다.

      다만 이렇게 하면 인터넷 익스플로러 호환성을 어쩔수 없이 포기해야 하는 부분이 생기기 때문에, 호환성이 중요한 분은 인터넷익스플로러 사용이 중단되는 8월경부터나 적용해보시는 것을 추천합니다.

  • 늦은시간 답변감사드립니다. v2로 적용완료했습니다^^


닫기