본문 바로가기

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

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

반응형

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

2021.06.14

SNS 아이콘을 미사용으로 할 경우 모바일에서 사이드바 메뉴가 펼쳐지지 않는 버그 패치

스킨 압축 파일을 다시 다운로드 받아 script.js 파일만 다시 업로드하면 됩니다.(웹브라우저 캐시 소거하면 즉시 확인 가능)

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

 

 

스킨 사용자 요청이 있어서 사용 편의 개선을 위해 추가 기능들을 반영했습니다.

반영된 주요 기능은 다음과 같습니다.

 

자바스크립트 파일을 제외한 나머지 스킨 구성 파일들이 모두 변경되었습니다.

전체 업데이트를 해야 합니다.

버그 패치를 제외한 기능 추가는 당분간 없으며 3.1 버전으로 고정됩니다.

 

 

심플리트3 v3.1 다운로드

 

 

헤더영역 카테고리 표시 멀티라인 지원

카테고리를 헤더 영역에 표시할 때 기존에는 1줄만 정상적으로 표시되었기 때문에 짧은 카테고리명으로 제한된 개수를 사용해야 하는 단점이 있었습니다.

카테고리명 제한 없이 무제한 개수로 카테고리를 사용해서 헤더 영역에 여러 줄로 잘 표시되도록 기능이 개선되었습니다.

 

멀티라인 헤더 카테고리

 

구글 메터리얼 아이콘 추가 지원

기본 사용하는 아이콘에 더해서 굵은 아이콘 타입이 추가되었습니다.

스킨 옵션에서 가는 아이콘과 굵은 아이콘중 하나를 선택할 수 있습니다.

 

아이콘 타입 선택 옵션

 

굵은 아이콘은 구글 메터리얼 아이콘을 일부 가져와 사용했습니다.

 

기본 가는 아이콘(왼쪽)과 굵은 아이콘(오른쪽)

 

sns-link에 툴팁 표시 지원

SNS 링크에 마우스 커서를 올리면 툴팁으로 링크 URL이 표시되도록 개선되었습니다.

 

 

sns-color icon 옵션 추가

SNS 아이콘을 SNS 대표 컬러로 채색되어 표시되는 옵션이 추가되었습니다.

 

컬러 SNS 아이콘 옵션

 

기존 베이스 컬러로 단색으로 표시되는 것과 대비해서 옵션을 켜면 SNS 고유 컬러로 채색되어 표시됩니다.

 

 

글 본문 문단 사이 여백 강제 지정

글 본문의 문단 사이에 여백을 주는 티스토리의 옵션 기능이 동작하지 않아 강제로 여백을 지정할 수 있는 옵션 항목을 추가했습니다.

 

문단 사이 강제 여백 옵션

 

문단 사이의 여백은 1.6em(기본 글자 크기의 1.5배 높이)입니다.

 

문단 사이 1.6em 여백이 강제 적용된 화면

 

미니 프로필 추가

프로필 정보를 작게 인라인으로 표시하는 옵션이 추가되었습니다.

 

사이드바 > 프로필 이미지 크기 옵션

 

사이드바 영역에서 아주 작은 영역만 차지합니다.

 

 

 

그밖에 블로그 UI가 좀 더 보기 좋도록 작은 수정 사항 몇 가지가 반영 되었습니다.

 

117 심플리트3 스킨은 3.1 업데이트에서 고정되며, 기능 추가를 더 이상 하지 않고 당분간 고정됩니다.

117 스킨의 기능들은 모두 다른 스킨들에 그대로 적용되어 순차적으로 업데이트될 예정입니다.

반응형
  • 블로그 운영 초보라 모르는게 많아 여기에 여쭤봅니다. 만약 기존의 스킨을 다른 새 스킨으로 바꾸게 되면 사이트의 사이트맵도 다시 생성하고 제출해야 하나요? 스킨을 변경하면 사이트 구조도 변경된다는 글을 본 적이 있어서요.

  • 네이버의 경우는 영향이 있습니다. 인덱스된 페이지가 일부 줄어들었다 다시 늘어납니다. 구글의 경우는 영향이 없습니다. 사이트맵의 경우는 자동 제출되기 때문에 검색엔진단에서 알아서 처리됩니다. 사용자단에서 사이트맵을 손댈일은 없습니다.

    • 답변 감사합니다. 한 가지 더 여쭤봐도 될까요 웹마스터도구에서<h1>태그가 2개 이상이라는 경고가 떴는데 사이트 제목과 게시글의 제목, 이 두 개가 <h1>으로 생성되는 것 같습니다. 그러면 어느 한쪽 <h1> 태그를 삭제하여 한 페이지 당 반드시 하나의 <h1>태그만 남도록 해야하는 걸까요? 아니면 SEO 최적화에 있어서<h1>태그가 2개 있는 것이 그렇게까지 치명적인 약점은 아니므로 그냥 냅두어도 될까요?

  • 구글의 경우는 별 영향이 없습니다. 이미 티스토리가 존재하던 초기 시절부터 이런 구조였습니다. 둘다 h1 으로 인덱싱됩니다. 다른 검색엔진도 같은 경고를 내지만 별의미 없습니다. 어차피 다 인덱싱하며 쓸데없이 h1이 긴게 더 안좋은 영향을 줍니다. 불안해서 구지 빼고 싶다면 블로그명을 빼는게 더 낫습니다.
    글 제목과 글 본문의 태그가 같은 레벨로 내려가면 검색결과에 안좋은 영향을 줍니다.

  • 어포스트님 좋은 스킨 만들어주셔서 정말 감사합니다. 다름이 아니고 v3.1 적용해서 어제 세팅을 하며, 폰트는 구글 돋움체로 설정을 했는데, 대댓글의 폰트만 이상하게 시스템 기본 폰트로 나오고 있습니다. HTML, CSS 다 들여다봐도 뭐가 잘못되서 그러는지 딱히 모르겠네요. ㅠㅠ 어디를 만져야 대댓글도 구글웹폰트를 적용할 수 있을까요?
    v2로 세팅했던 블로그는 이렇지 않은데, 어제 새로 세팅한 블로그에서만 그리 나오고 있어서 고견을 여쭙니다.

    • 댓글을 늦게 봤습니다.

      버그입니다.
      스킨이 패치되어있으니까 skin.html, style.css 만 재적용하면 해당 현상은 사라집니다.

      구글메터리얼 아이콘 폰트를 한종 더 추가하면서 아이콘 글꼴이 대댓글 텍스트에 영향을 주면서 문제가 생긴 것입니다.

      번거롭게 해드려서 죄송합니다.

    • 아하. 감사합니다. 새로 받아서 교체해 보겠습니다. 빠른 피드백 감사합니다. 이 스킨을 널리 전파해 보도록 하겠습니다. ^^

    • 아래 overfl0w 님이 제보하셨던 모바일에서 사이드바 나타나게 하는 메뉴 버튼이 '블로그 메뉴'를 비활성화하면 동작하지 않는 버그를 발견했습니다. ㅠㅠ
      (오늘 3번이나 다시 적용해 가면서 알아냈네요. 지금은 활성화를 해 놓고 html에서 숨기는 방식으로 해결은 했네요)
      폰트 문제는 말끔하게 해결이 되었습니다. 감사합니다.

    • 패치된 스킨이 올라가 있습니다.
      script.js 파일만 재업로드 하면 해결됩니다.
      웹브라우저 캐시 한번 소거해야 즉시 적용된 결과가 확인됩니다.
      알려주셔서 감사합니다.

  • overfl0w 2021.06.14 00:58 댓글주소 수정/삭제 댓글쓰기

    SNS 아이콘 보기를 OFF 할 경우, 모바일 모드에서 메뉴 버튼이 동작하지 않는 것 같습니다.
    대신 그냥 SNS 각 항목을 모두 빈칸으로 해두고 저장하니 되서 그렇게 했습니다!

    • 스킨 자바스크립트 버그입니다.

      패치했습니다.
      스킨 다운로드 다시 받아서 script.js 파일만 재 업로드하고 웹브라우저 캐시 한번 소거하시면 모바일에서도 잘 동작할겁니다.

      알려주셔서 감사합니다. ^^/

  • overfl0w 2021.06.14 10:12 댓글주소 수정/삭제 댓글쓰기

    빠른 수정 너무 감사합니다. 정상 동작확인했습니다. ^^

    하나만 더 여쭤볼게요.

    <썸네일 이미지 빈 영역 자리 차지>를 OFF 하면,
    썸네일이 없는 글의 경우, 모바일에서 빈 썸네일 영역 칸에만 표시됩니다.
    이것도 좀 확인 부탁드립니다.


    • 아마도 썸네일 없이 내용이 극적으로 짧아지면 목록이 밀려서 쌓이는게 아닌가 추측되는데, 아얘 밀리지 않도록 갯수 맞춰서 강제 줄바꿈이 되도록 했습니다.

      스킨 다시 다운로드 받아서 style.css 파일만 재적용하면 됩니다.

      썸네일 자리 차지 않는 옵션은 원래는 목록 형태에만 제한적으로 사용해야 하는 옵션인데, 그냥 자유도를 부여했더니 부작용이 난거 같습니다.

    • 즉각적인 피드백 감사합니다.
      재현이 될 때도 있고 안될 때도 있어서 확인에 시간이 좀 걸렸습니다.
      확인해보니..화면 너비가 768px 이상인 경우에는 정상적으로 표시되는데, 767px 이하에서는 썸네일칸에만 글 미리보기가 표시됩니다.

  • 안녕하세요. 어포스트님이 제작하신 스킨을 사용 중인 시아입니다
    다름이 아니라 이번에 새로운 스킨을 적용시켜보려고 하는데
    자꾸 SNS 아이콘이랑 검색 아이콘이 □ 이렇게 표시가 됩니다
    컬러로 바꾸면 컬러네모로 나오네요 왜 이러는걸까요
    저는 스킨등록에 들어가서 다운 받은것들 첨부해서 저장하는 방식으로 변경하고 있습니다

    • 스킨 등록에 들어가서 새 스킨 등록해 봤는데 폰트 아이콘 잘 출력됩니다.
      스킨 등록 기능이나 스킨에는 문제가 없어 보입니다.

      스킨 등록을 잘못하신거 같습니다.

      images 폴더 안에 있는 파일들 중에 폰트 아이콘이 포함되어 있는데, 스킨 등록할 때 폴더 안으로 이동해서 파일들을 선택해서 등록해야 합니다.
      images 폴더를 그냥 선택하면 폴더 안에 있는 파일들은 업로드가 되지 않습니다.

      본인블로그//manage/design/skin/edit#/source/file
      들어가서 폰트아이콘들이 업로드되어 있는지 확인해보시기 바랍니다.

      apost.woff, apost.ttf, googlematerial.woff, googlematerial.ttf

      같은 파일들이 보여야 합니다.
      파일들이 안보이면 해당 편집기 업로드 화면에서 images 폴더 안의 파일들을 몽땅 재 업로드 해보시기 바랍니다.

  • 업데이트에 매번 감사드립니다!

  • 비밀댓글입니다

    • 구스킨 배포할 때 알려졌던 버그이고, 사파리 호환성 문제입니다. css 중 몇가지 속성이 사파리에서만 지원되지 않는 문제입니다.

      스킨 버그라고 봐야하고, 확인 결과 글 목록타입에서는 안보이고 썸네일 목록에서만 타나나는 것으로 보입니다.

      맥에서 옵션 설정에 따른 테스트를 충분히 하지 않아서 나타난 문제입니다.
      곧 패치를 해드리겠습니다.
      CSS 패치만으로 해결되는 문제니까 설정해놓은 블로그 환경이 바뀌는 부분은 없습니다.
      잠시만 기다려주세요.

    • 2021.06.25 22:51 댓글주소 수정/삭제

      비밀댓글입니다

    • 스킨이 패치되었습니다.

      스킨을 다시 다운로드 받아 style.css 파일만 재적용하거나
      1219행 .cover-list ul li a, 1371행 .post-item a 클래스 2군데에
      overflow: hidden;
      속성을 추가해줘도 됩니다.

      mac os 빅서 사파리 환경에서 테스트했습니다.
      확인해보시고 이상있으면 다시 알려주세요.

    • 잘 됩니다 ㅎㅎ ios 사파리랑 엣지 브라우저에서 테스트 해봤습니다.
      빠른 피드백 감사합니다. 복받으세요☺️

  • 글쓰기 본문의 2의 폰트사이즈를 키우고싶은데 어떻게 해야 되나요?
    그리고 본고딕 폰트 bold 처리가 모바일에선 적용이 안되어 보입니다.

    • style.css 에서
      .entry-content p
      를 검색해서 처음 나오는 클래스를 수정하면 됩니다.
      스킨원본기준 1739행 입니다.
      정의된 클래스는 다음과 같고

      .entry-content p {
      margin-bottom: 1.6em;
      font-size: 0.9375em;
      line-height: 1.6;
      }

      0.9375em은 15px 에 해당됩니다. 1 이상으로 수정해서 원하는 크기를 맞추면 됩니다.

      em 단위에 대해 잘 모르면
      https://blogpack.tistory.com/320
      글을 보시면 됩니다.

      기본 문단 글자 크기에 해당하는 본문2를 제외한 본문1,3 은 티스토리 시스템에서 정의해서 사용하고 스킨에서 별도로 정의하지 않습니다.

      본고딕 볼드는 저는 실 모바일 기기에서도 잘 적용되어 보입니다.

      어떤 경우에 적용이 안되어 보이는지 좀더 자세히 확인을 해주시면 확인해보겠습니다.

    • 아 본고딕R 확인해보니 모바일에서 볼드 되어 보이네요

      근데 이게 pc처럼 차이가 명확하지가 않아서 안된것처럼 보이는거였어요

      감사합니다!

    • 그 마지막으로 본문2 줄간을 조금 늘리고 싶은데 그건 어떤 부분을 건드려야 할까요?ㅠㅠ

    • 위에 답변에

      line-height: 1.6;

      속성이 줄간격입니다.
      1.6은 텍스트 설정 높이의 1.6배라는 뜻입니다.
      값을 조금씩 늘려서 확인해보시면 됩니다.

  • 안녕하세요! 먼저 좋은 스킨 배포해주셔서 감사합니다. 스킨 설정 중에 블로그 설명 내용을 사이드 바쪽에 넣을 수 있는 기능은 없는 건가요?

    • 배포하는 스킨에는 블로그설명 치환자를 사용하지 않습니다.
      블로그 설명 자체를 표시하지 않습니다.

      사용하는 분이 있는 것 같아서 사이드바 프로필 밑에 표시되도록 옵션 항목을 추가했습니다.

      스킨이 패치되었으므로 다시 다운로드 받아서 재적용하면 사이드바 섹션에 블로그 설명 표시 옵션이 보일 겁니다.

    • 네 감사합니다~

  • 위에 대댓글을 남겼는데 글이 많아서 못보셨을 것 같아서 다시 남깁니다^^;

    화면 너비가 좁은 경우, 즉 모바일 같은 환경에서 썸네일이 없는 글들이 미리보기가 반만 표시되는 현상이 있습니다.

    화면 너비가 768px 이상인 경우에는 정상적으로 표시되는데, 767px 이하에서는 썸네일칸에만 글 미리보기가 표시됩니다.

    저만 그런건지..ㅜㅜ

    • 스킨 관련된 질문은 다음날까지는 답변을 다 답니다.
      답변이 안달린건 못보고 지나간 것입니다.
      해당 스킨 옵션 설정 상태에서 나타나는 버그입니다. 없던 현상인데 패치를 하면서 생겨난 것으로 보입니다.
      곧 패치를 해드리겠습니다.
      잠시만 기다려주세요.

    • 스킨이 패치되었습니다.
      스킨을 다시 다운로드 받아서 style.css 만 재적용 하면 됩니다.

    • 잘됩니다.
      시간내서 바로 수정해주셔서 너무 감사합니다.

  • 안녕하세요? 스킨이 깔끔하고 너무 좋아서 감사히 잘 쓰고 있습니다. 5월에 배포하신 2버전을 이상없이 잘 쓰고 있다가, 최근 에드센스 자동광고 중 상단에 개재되는 광고가 블로그 타이틀과 겹쳐지고, 상단광고와 블로그 타이틀이 내려앉아서 본문영역을 침범하도록 보이는 문제점을 인지하였습니다. 구글 자동광고의문제인가? 혹시 스킨패치가 있나? 해서 와보니 3.1버전이 있어 다운받아 잘 적용완료했습니다.
    적용하니까 상단 광고가 문제없이 깔끔하게 잘 뜹니다. (상단광고 겹쳐지는 문제는 해결)

    그런데 블로그 첫화면(최신글)에서 스크롤을 맨 밑으로 내리니까 거기에도 광고가 하나 더 뜨더군요..(저는 에드센스 자동광고를 사용중입니다.) 그 광고가 'Designed by 어포스트, 관리자, 글쓰기' 이 푸터 메뉴랑 겹쳐보입니다....
    제 광고 설정의 문제인지 아니면 제 사용환경의 문제인지(윈도우10, 엣지 브라우저를 사용, 데스크탑) 아님 뭔가 스킨호환의 문제일까요ㅠㅠ

    • 티스토리 애드센스나 웹브라우저 종류 문제는 아닌 것으로 보입니다.
      스킨 구조상 애드센스와 겹칠 수 없게 되어 있습니다.

      푸터나 애드센스 광고 모두 고유의 영역을 차지하기 때문에 구조상 겹쳐질 수가 없습니다.

      테스트를 해봐도 같은 증상을 재현할 수 없어서 추측하기로 자동 광고가 엉뚱한 위치에 광고를 삽입하면서 나타나는 현상이 아닌가 싶은 추측인데...

      자동 광고를 붙여서 같은 증상이 고정적으로 나타나면 댓글을 다시 달아주시면 블로그에 가서 확인을 해보겠습니다.

    • 스킨적용 이틀차인데 오늘도 이렇게 겹칩니다.
      (아래 사진 주소 링크)
      https://postfiles.pstatic.net/MjAyMTA3MTZfMTgy/MDAxNjI2NDIyMDU0MzI4.yIf0IGm-iak309339fSUWjJYmlYmNruJsjwDsCY1iJsg.lXdnTFux8c9ThAjmUAxHiGs3GKAu8N2fXYwT5mcBD78g.PNG.mar__/%EC%98%A4%EB%A5%98.png?type=w773

      에드센스 자동광고가 뭔가 아직 제 티스토리와 스킨에 적응(?)을 못한걸까요?

      매번 그러는 것은 아니고, 푸터에 광고가 뜰때도 있고 안뜰때도 있습니다.

      사실 푸터영역은 그렇게까지 치명적으로 거슬리는 것은 아니라 상관은 없는데
      제보 차..^^;;

    • 티스토리 자동 광고는 본문영역 밖에 자동 광고가 표시되지 않습니다.

      티스토리 자동 광고가 아니라 애드센스 자도광고를 사용하는 것으로 보입니다.
      광고 최대 표시로 애드센스 자동 광고를 표시하면서 온갖 위치에 자동 광고가 표시되는 것으로 보입니다.

      광고 표시량을 좀 줄여보거나, 티스토리 자동 광고를 사용하는 것을 추천합니다.
      블로그 관리자 수익>애드센스관리 메뉴에서 계정 연동을 해서 자동 광고를 설정할 수 있습니다.

      임의의 위치에 광고가 삽입되는 것에 대해서는 구글 애드센스쪽에 문의를 해보셔야 합니다.

      스킨이나 티스토리 레이아웃과 광고가 겹쳐보이는게 아니라, 광고가 티스토리 레이아웃의 광고가 들어가면 안되는 임의 영역(님의 경우는 푸터 영역에)에 표시가 되는 것입니다.

    • 티스토리 에드센스관리 메뉴에 구글계정이 연동되어있고, 전체자동광고가 ON되어있습니다... 처음 광고 승인하고 넣을때는 html에 에드센스 코드를 넣어서 했던 것 같긴합니다. 지금도 html에 에드센스 코드가있구요... 그 뒤로 티스토리 페이지에서 계정도 연동했던 것 같네요.
      (저는 지금 티스토리 자동광고인걸까요, 에드센스 자동광고인걸까요...?)

      전체 자동광고 on 말고 개별로 설정하여
      본문상단,하단,사이드바 등등을 다 키고
      목록 하단만 끄는 게 더 도움이 될까요?

      광고위치에 대해서는 구글쪽에 한번 문의는 넣어볼 생각입니다.

      바쁘신와중에 답글감사합니다^^

    • 티스토리 애드센스만으로는 표시가 안되는 위치에 광고가 나오고 있습니다.

      티스토리 애드센스는 스킨 코드상에 애드센스 관련 코드가 필요 없습니다.
      티스토리 시스템에서 자동으로 붙입니다.

      현재 블로그에는 별도로 구글 애드센스 자동 광고 코드를 붙여넣은 것으로 나옵니다.
      순서상 구글 자동광고 코드가 뒤이기 때문에 이게 적용되고 있는 것으로 보입니다.

      스킨 백업을 하신 후 스킨 skin.html에 붙여넣은 구글 자동광고 관련 코드를 모두 지워보시기 바랍니다.

      티스토리 애드센스의 목록 하단 광고 표시와는 무관한 문제입니다.
      티스토리 목록 하단 광고는 정확하게 목록 끝 위치에 자리를 자리를 차지하고 광고가 표시됩니다. 푸터 영역으로 밀려나는 경우는 없습니다. 광고가 표시되는 태그 정보도 님의 블로그와는 다릅니다.

      티스토리 애드센스는 자동광고 포함 전부 켜놓고 사용하면 됩니다.

    • 친절한 설명과 답변 감사합니다!
      말씀해주신대로 따라했습니다.
      좋은주말되세요^^


닫기