본문 바로가기

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

티스토리 반응형 스킨 123 - 반응형 스쿨룩2 스킨 배포합니다.

반응형
2022.06.21 Version 1.1 패치
------------------------------------------
왼쪽에 고정된 자동 목차 기능 사용시, 페이지를 스크롤 하면 현재 위치의 자동 목차 항목이 하일라이트되는 기능 추가.
기존 사용자는 전체 스킨을 재 적용해야 합니다.

 

긴 내용의 글을 제공하는 블로그와 모바일 방문자가 많은 블로그에 최적화된 반응형 스킨으로 이용자 사용성이 초점을 두고 제작된 스킨입니다.

다양한 커버페이지 항목들을 지원합니다.

 

 

미리보기 화면에서 웹 브라우저 너비를 줄이면 모바일 화면에서 어떻게 보이는지 확인할 수 있습니다.

 

 

123 반응형 스쿨룩2 스킨 미리보기 #1

 

123 반응형 스쿨룩2 스킨 미리보기 #2

 

스킨 다운로드

 

 

 

1. 스쿨룩2 스킨 주요 특징

 

  • 1단 반응형 스킨
  • 모바일 사용에 더 최적화된 레이아웃
  • 다크모드 지원
  • 자동 목차 사이드 고정 기능 지원
  • 사이드바 모듈을 감추어진 사이드바 메뉴와 블로그 하단에 구분해 표시
  • 커버 슬라이더 기능 개선
  • 6가지 썸네일 목록 표시 방법 지원(모바일 2가지)

 

2. 자동 목차 사이드 고정 기능 지원

컨텐츠 영역 상단에 표시되는 자동 목차를 컨텐츠 영역 바깥 왼쪽에 고정 위치로 표시하는 옵션을 지원합니다.

긴 글을 읽을 때 원하는 목차 위치로 빠르게 이동할 수 있어, 긴 글을 많이 포스팅할 경우, 글의 가독성을 높이는데 도움이 됩니다.

자동 목차 사이드 고정 기능은 데스크탑 화면에서만 지원되며, 목차가 표시될 수 있는 영역만큼 좌우에 여백이 있을 때만 자동으로 적용됩니다.

 

자동 목차 사이드 고정 기능 옵션

 

 

 

 

3. 다크모드 지원

블로그 오른쪽 상단에 다크모드/라이트모드 전환 토글 아이콘을 표시할 수 있으며, 다크모드와 라이트모드를 사용자가 직접 전환해서 적용할 수 있습니다.

설정한 보기 모드는 사용자가 로컬 쿠키를 삭제하기 전에는 그대로 유지됩니다.

 

헤더-다크모드 표시 옵션

 

 

4. 다양한 썸네일 목록 표시 방법 지원

데스크탑 화면에서는 6가지, 모바일 화면에서는 2가지의 썸네일 목록 타입을 지원합니다.

데스크탑 썸네일 목록 중 한 행에 4개를 표시하는 경우는 예외적으로 태블릿 화면 너비에서 한 행에 2개 보기로 자동 변경됩니다.

 

6가지 데스크탑 & 2가지 모바일 화면 글목록 타입

 

 

 

 

5. 글목록 디자인과 같은 레이아웃을 지원하는 커버 리스트 지원

커버페이지 항목 중 "커버 리스트" 항목은 글 목록과 동일한 레이아웃을 지원합니다. 글목록 표시 타입으로 한 행에 4개의 썸네일 항목을 표시하도록 설정했으면, "커버 리스트" 항목도 동일하게 한 행에 4개의 썸네일 항목이 표시됩니다.

원하는 글만을 임의로 모아서 블로그 메인에 표시하고 싶은 경우 다른 커버 페이지 항목을 모두 지우고 "커버 리스트" 만으로 블로그 메인 페이지를 구성해서 글 목록을 표현할 수 있습니다.

 

 

커버 리스트

 

 

6. 스킨 옵션 설정 항목들

 

80여 가지 다양한 스킨 설정 옵션을 제공합니다.

 

반응형

Comments

  • 오호~~~ 잘 만드셨어요

  • 서치 영역이 겁나기네요~~ 호오

    옵션을 버튼식으로 구성하여 초보들도 자유롭게 사용을 배려하신

    매력만점 스킨입니다 10점~~만점에 10점,1 ㅋ

  • 지금도 어포스트님의 스킨 만족하며 사용하고 있습니다!ㅎㅎ 새로운 스킨이 나왔네요!!

    하나 여쭤보고 싶은게 있는데요,, 상단의 URL 링크 아이콘 중 velog도 있을까요?
    velog에서도 글을 간간히 작성해서 링크해놓으면 좋을 것 같아서요

    • velog는 없습니다.
      아이콘은 대중적으로 인기있는 몇몇 사이트만 제공합니다.

      배포하는 스킨은 폰트어썸 아이콘팩을 끌어다 쓰고 있고
      https://fontawesome.com

      아마도 사이트 아이콘은 가장 많이 제공하는 아이콘팩일텐데 벨로그는 없습니다.

      벨로그를 구지 연결해야겠다면 직접 벨로그 아이콘을 다운로드받아서 붙이는 작업을 해야 합니다.

      아이콘 이미지 붙이는 것 말고는 구조적으로는 동일하기 때문에 skin.html 을 조금 손을 보면 붙일 수 있습니다.

    • 다음 글을 참고해서 붙여넣으면 됩니다.
      https://blogpack.tistory.com/1135

    • 헉.. 직접 글까지 써주시다니 감동입니다..
      너무너무 감사합니다!! 잘 적용해보겠습니다!!ㅎㅎ

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

  • 너무 예뻐요,, 슬라이더 내용을 바꾸니까 표시되지 않는데요ㅜㅜ 방법이 있을까요?
    ==> 슬라이더 삭제 후 다시 만드니까 ㄷ해결됐습니다

  • 너무너무 감사해요 개발자님 ㅠ_ㅠ

  • 너무 좋아요~ 감사합니다!

  • 스킨 너무 맘에 듭니다! 혹시 좌측 상단 메뉴 버튼 클릭시 아무런 반응이 없는것은 왜 그럴까요...? 스킨 등록후에 아무 코드도 수정하지 않았는데 해결되지가 않습니다 ㅠㅠ

  • 와..이거 너무 좋은거 아닙니까. 대단하십니다.

  • 감사합니다!! 너무 마음에 드네요~~!! 고생하셨습니다 ^^

  • 너무 맘에 들어요~! 감사합니다!

  • 안녕하세요. 좋은 스킨 너무 감사합니다.

    오늘 적용해서 사용해보고 있는데요. 몇가지 해결이 되지 않는 문제가 있어서 글을 남김니다.

    우선, 좌측 상단에 있는 사이드바가 열리지 않습니다. PC, 모바일 둘다 아무 동작을 하지 않습니다.
    그리고, 제 PC상의 문제인지는 확실할 수 없지만, 처음 설치하면 화면에 아무 것도 보이지 않는 현상이 발생했습니다.

    html에서
    <s_if_var_show-darkmode>
    body{
    /* display: none; */
    }
    </s_if_var_show-darkmode>
    주석 처리 하니 정상적으로 보이기는 한데, 다크모드가 동작하지 않는다는 상황입니다.^^

    또한 가지, PC와 모바일 본문 글자 크기 조절하고 싶은데, 어떤 코드인지 알려주시면 고맙겠습니다.


    바쁘시겠지만, 스킨이 너무 마음에 들어 사용하고자 하오니 답변 부탁드립니다.

    감사합니다.

  • 안녕하세요. 또 해결되지 않는 문제가 있어서 도움을 요청합니다.
    구글 에드센스 적용 후, 노출이 되지 않는 문제로 상당히 고민중에 있습니다.

    관리자 에드센스 관리에서 자동으로 넣어보기도 하고, 수동으로 넣어 보기도 하는데,
    첫 페이지는 어떻게 한개가 나오는데, 다른 페이지에서는

    adsbygoogle.push() error: No slot size for availableWidth=0

    adsbygoogle.push() error: Fluid responsive ads must be at least 250px wide: availableWidth=0'

    등과 같이 크기를 지정할 수 없다는 오류가 계속적으로 나오고 있는 실정입니다. ㅠㅠ

    부디 좋은 해결책이 있으면, 도움을 바랍니다.

    감사합니다.




    • 애드센스 관리자라고 하는게 구글 애드센스 관리자를 말하는건가요? 아니면 티스토리 애드센스 관리자를 말하는 건가요?

      코드 상으로 봐서는 직접 애드센스 코드를 가져다 붙이신걸로 보입니다.

      1. 티스토리 플랫폼은 티스토리가 제공하는 애드센스를 사용하는 것을 추천합니다. 티스토리 관리자 화면에서 애드센스 계정을 연동해서 해당 애드센스 기능을 사용하는 것을 추천합니다.
      시간이 지나면 ads.txt 문제나 검색 노출 등 광고 단가나 구글 노출 부분에서 차이가 생기게 됩니다.
      블로그 마케팅 사기꾼들이 퍼트린 애드센스 광고 붙이는 기법은 10년전 옛날 얘기이고, 더더군다나 티스토리 플랫폼에서는 의미도 없습니다.

      2. 에러메시지는 광고를 너무 많이 붙이거나 2개 이상의 광고키를 사용해서 나오는 에러로 추정됩니다.(후자의 가능성이 더 높습니다.)
      하단에 붙인 광고 2개를 모두 빼보시기 바랍니다.
      하단에 붙은 광고 2개는 광고키가 서로 다릅니다.

      3. 미디어매스 광고를 붙이신건지 관련 리다이렉트 에러가 여러개 발생하는데 에러를 해결하던지, 지우던지 하는걸 추천합니다.
      웹사이트에 에러가 발생하면 구글 검색 결과에 않좋은 영향을 줍니다.

    • 안녕하세요. 답글 주셔서 감사합니다.

      저도 블로그를 10년이상 운영하면서 스킨 변경때문에 애 먹어본적은 처음이라, 자문을 구했습니다.

      정말 마음에 드는 스킨 이였는데, 저의 능력으로는 해결이 되지 않아, 우선은 다른 스킨으로 적용했네요..^^

      좋은 블로그 스킨을 공유해 주셔서 감사드리고, 항상 건승을 기원합니다.


❌ 닫기