본문 바로가기

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

티스토리 반응형 스킨 34 - 반응형 그린라인 v3 스킨 배포합니다.

반응형

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

2021-09-02. 목차 기능 사용시 공감 버튼과 충돌하는 현상 패치 (스킨을 다시 다운로드 받아 script.js 파일만 재업로드)

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

 

구버전 스킨인 34. 반응형 그린라인 스킨의 신버전입니다.

초록창 회사 블로그랑 비슷한 느낌을 살린 2단 반응형 스킨입니다.

테두리선 색상, 두께와 각 영역별 배경색을 지정할 수 있어 다채로운 모양의 디자인을 만들 수 있습니다.

사이드바 너비와 레이아웃 전체 너비를 작게 조절할 수 있어 작은 레이아웃을 선호하는 블로거도 무리없이 사용할 수 있습니다.

 

 

 

 

스킨 특징

테두리선 색상과 테두리선 두께를 바꿀 수 있고, 영역별 배경색을 개별 설정해서 다채로운 변형 스킨을 만들 수 있습니다.

 

테두리선 너비 설정 옵션

 

테두리선 색상 선택 옵션

 

 

 

 스킨 적용전 주의사항

  • 스킨 소스 상단과 스킨 적용화면 하단에 표시되는 저작권 표시 삭제를 금지합니다.
  • 스킨의 개별 커스터마이징 요청은 받지 않습니다.
  • 새 스킨 적용전 기존 사용하던 스킨을 꼭 백업하시기 바랍니다.
  • 반응형 스킨은 티스토리 모바일 꾸미기를 꺼야 합니다. 티스토리 관리자 화면 메뉴 꾸미기 > 모바일에서 티스토리 모바일웹 자동 연결을 "사용하지 않습니다" 로 설정해야 합니다.

> 사용중인 티스토리 스킨을 보관, 또는 백업해 놓기

 

 

■ 스킨 주요 기능 안내

특징요약

  • 인터넷익스플로러11 지원
  • 바닐라 자바스크립트만으로 스크립트 기능 구현(jQuery 미사용)
  • 스킨 내장 아이콘 폰트를 이용해 아이콘 표시(외부 아이콘 미사용)
  • 티스토리 애드센스 전체 지원
  • 80여가지의 스킨 커스터마이징 설정 옵션
  • 구 버전 대비 2배 이상 빨라진 페이지 로딩 속도
  • 최소 크기를 가진 가벼운 스킨 리소스 파일들
  • 화면 영역별 컬러 테두리선으로 영역 구분 및 배경색 지원
  • 자동 목차 기능 지원
  • 구글 번역 기능 지원

검색 최적화(SEO) 지원

  • 빠른 블로그 로딩 속도
  • 운영체제 시스템 글꼴 사용 지원으로 빠른 검색 최적화 지원
  • 옵션 설정 항목에 검색 사이트 인증키 적용 지원
  • 오프스크린 이미지 지연 로딩(Lazyloading) 지원
  • 외부 자바스크립트 라이브러리(jQuery) 미사용으로 빠른 페이지 로딩 지원
  • 외부 아이콘 라이브러리 미사용
  • 가벼운 아이콘 리소스 사용
  • 시멘틱 태그 사용으로 검색엔진 인덱싱 지원

80여가지의 스킨 옵션 설정 지원

  • 블로그를 운영하면서 필요로 하거나 수정이 발생하는 대부분의 요구 사항을 옵션으로 지원
  • 데스크탑, 타블렛, 모바일 환경을 모두 지원하는 반응형 스킨
  • 모바일 글목록 타입으로 글목록형과 썸네일형 2종 지원

커스터마이징을 위한 소스 코멘트

  • CSS 가 각 영역별로 세분화되어 작성되어 있습니다.
  • 자바스크립트 코드에 상세한 코멘트가 작성되어 있습니다.
  • 알기 쉽도록 구조화 작업이 되어있어 수정이 용이합니다.

티스토리 애드센스 지원

  • 글목록 애드센스 지원
  • 사이드바 애드센스 지원
  • 자동 애드센스 지원

 

 

 스킨 적용 관련 안내

스킨 적용 방법을 모를 경우 다음 글을 먼저 읽어보시기 바랍니다.

 

> 다운로드 받은 티스토리 스킨 내 블로그에 적용하기

 

> 티스토리 스킨 적용하는 방법 상세 안내. 종결판.

 

> 티스토리 스킨 적용시 주의사항과 문제 해결 방법, 그리고 티스토리 버그 안내

 

 

 

 스킨 다운로드

 

34 그린라인 v3 다운로드

 

 

 주요 스킨 옵션 설정 항목 안내

- 레이아웃

사이드바와 카테고리 표시 위치를 선택할 수 있습니다.

테두리선 너비를 최대 3px까지 선택할 수 있습니다.

 

레이아웃 옵션 항목들

 

- 색상

전체 배경색과 각 영역별 배경 색상을 선택할 수 있습니다.

 

색상 옵션 항목들

 

헤더 영역에 표시되는 카테고리 배경색은 데스크탑 > 헤더 표시 카테고리 배경색에서 따로 설정해야 합니다.

 

헤더 표시 카테고리 배경색 옵션

 

- 컨텐츠

컨텐츠 표시 영역들에 공통 항목을 설정합니다.

모서리를 둥글게 표시하는 정도를 설정할 수 있습니다.

 

컨텐츠 옵션 항목들

 

- 글목록/커버목록

 

글목록에 표시되는 컨텐츠의 속성을 설정합니다. 글목록 타입 3가지를 선택할 수 있습니다.

 

글목록 옵션 항목들

반응형 레이아웃의 모바일 글목록 타입은 모바일 > 모바일 글목록 타입에서 별도로 설정합니다.

 

모바일 글목록 설정 옵션

 

그 외에 총 80가지 이상의 옵션 설정을 사용해서 스킨 레이아웃을 자유롭게 설정할 수 있습니다.

 

전체 스킨 옵션 항목들

반응형

Comments

  • 초록색을 정말 좋아해서 보자마자 설치해서 잘 쓰고 있습니다. 구독도 눌렀어요 감사합니다!!

  • 좋은 스킨 감사합니다~~
    다른 스킨 적용한것에 사용할려고 스킨을 다운받았습니다
    잘쓰겠습니다 ~~
    하던일에 번창하길 ~`
    감사합니다~~~

  • 감사히 잘 사용하겠습니다~!!!

  • 익명 2022.03.13 22:02 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 마우스호버에는 반응하는 것으로 봐서는 아마 하이퍼링크 기본 상태에서 본문 내용 사이에 구분이 안된다는 것으로 이해됩니다.

      css를 조금 손을 봐야 합니다.
      스킨 편집 화면에서
      style.css
      에서
      Another Category
      로 검색하면 1개가 나옵니다.
      그 윗줄 빈 행에

      .entry-content a{
      text-decoration: underline;
      color: #008300;
      }
      요렇게 글 본문에만 영향을 미치도록 하이퍼링크 기본 상태의 속성을 추가해주는 클래스를 추가하면 됩니다.
      속성의 첫줄은 밑줄 추가, 둘 째줄은 어두운 녹색으로 표시입니다.
      잘 모르면 인터넷 검색해서 적당히 원하는 속성으로 붙여넣어주면 됩니다.

      본문 안의 하이퍼링크에 밑줄 표시를 하는게 좋을 것 같아 스킨은 패치를 했습니다.

    • 감사합니다!!!

  • 좋은 스킨 공유 감사드립니다. 다만, 검색 버튼을 눌러도 검색창이 확장이 안되는데, 어떤 이유에선지 모르겠습니다. 코드 봐도 다른 것과 다를게 없습니다. searh on으로 하면 문제없이 검색도 되구요. 다른 부분과 충돌이 있는걸까요?
    만약 해결이 안된다면, Search on으로 했을 때, 'X'말고 '돋보기'가 나오게 하려면 어떻게 하면 되나요?
    글고 모바일에서 햄버거 메뉴도 펼침이 안되네요.. 혹시 문제가 없는거면 스킨을 다시 업로드해보겠습니다.

    • 해당 현상이 발생하는 대부분의 이유는 스킨에 포함된 script.js 파일을 업로드하지 않아서입니다.
      스킨에 포함된 images 폴더 안의 모든 파일을 업로드 해야 합니다.

      다음글을 참고해서 스킨 재설치를 해보시기 바랍니다.

      https://blogpack.tistory.com/930

  • 넵.. 다른 계정으로도 스킨 재설치해봤고, script.js 파일 포함 모든 파일 업로드 했는데도 안되네요.. 좀더 확인해보겠습니다.

  • 헉.. 이렇게 늦게.. 죄송합니다..
    https://leconomy.tistory.com/

    • 버그입니다.
      버전관리가 잘못되서 패치되기 전 압축파일이 올라가 있었습니다.
      다시 다운로드 하셔서 script.js 파일만 재적용 하시면 됩니다.

  • script.js 파일 재업로드하니 모바일 포함 문제없이 작동되었습니다. 다시한번 좋은 스킨 공유 감사드립니다





❌ 닫기