본문 바로가기

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

반응형 티스토리 스킨 120 페민(fEmine) 스킨 배포합니다.

반응형

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

2022-05-21 1.1 패치 배포

모바일 화면 보기시 화면 스크롤 상태에서 검색바 활성화를 하면 블로그 타이틀과 겹쳐보이는 현상 개선

모바일 화면 보기시 글 목록 아이템 하단 여백이 상단 여백보다 넓어 불필요한 공간을 차지하는 현상 개선

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

 

배포 스킨 하단의 저작권 표시와 스킨 소스의 저작권 표시 삭제를 금지합니다.

임의로 저작권 표시를 삭제하는 경우가 자주 눈에 띄어서 명시적으로 공지를 합니다.

하단 저작권 표시

 

2022년 배포 스킨부터는 인터넷 익스플로러에 대한 공식 지원을 중단합니다.
인터넷 익스플로러에서 사용하는데 문제는 없지만, 최신 웹 브라우저와 동일한 동작을 보장하지 못하며, 인터넷 익스플로러와 관련된 문의 또한 지원을 하지 않습니다.
옵션 설정으로 따로 켜는 부가 기능 중 몇가지는 인터넷 익스플로러에서 동작하지 않습니다. ("IE미지원"으로 별도 표시)

 


 

120 반응형 페민 스킨의 주요 특징은 다음과 같습니다.

 

  • 블로그 하단에 고정 표시되는 사이드바 영역이 있는 스킨입니다.
  • 하단 사이드바 영역에 표시할 모듈은 자유롭게 설정할 수 있고, 사이드바 또한 왼쪽, 오른쪽으로 배치할 수 있습니다.
  • 사이드바를 감춰서 전체 너비를 모두 사용하는 1단 스킨으로 변경할 수 있습니다.
  • 검색최적화(SEO) 된 스킨으로 빠른 페이지 로딩 속도를 보장합니다.
  • 티스토리 내장 애드센스를 완벽하게 지원합니다.
  • 스킨을 커스터마이징 할 수 있는 90개 이상의 스킨 옵션 설정 항목을 제공합니다.
  • 스킨 수정이 용이하도록 스킨 소스에 풀 커멘트가 작성되어 있습니다.
  • 반응형 레이아웃으로 타블렛과 모바일 기기를 완벽하게 지원합니다.
  • 기본 아이콘으로 CDN 기반의 폰트어썸(FontAwesome) 아이콘 무료버전을 사용합니다.

 


 

미리보기1

 

미리보기2

 

스킨 다운로드

 

 


 

주요 기능 사용 안내

 

1. 하단 고정 사이드바에 모듈 배치하기

하단 영역에 3개, 또는 4개의 사이드 모듈을 고정 배치할 수 있습니다.

반응형 레이아웃이기 때문에 대상 기기에 따라 4개->2개->1개로 자동으로 1행에 배치되는 모듈 갯수가 변경됩니다.

하단 고정 사이드바 모듈 표시 화면

 

표시 개수는 스킨 옵션 설정 그룹 사이드바의 하단 사이드바(사이드바2) 항 행 모듈 개수 항목에서 설정할 수 있습니다.

 

 

하단 사이드바에 고정배치하는 모듈은 블로그 관리자 화면 사이드바 항목에서 "사이드바2" 그룹에 배치하면 됩니다.

 

블로그 관리자 사이드바 모듈 설정 화면

 

 

2. 사이드바 위치 변경

사이드바 표시 위치를 왼쪽/오른쪽 중에서 선택할 수 있습니다.

스킨 옵션 "레이아웃-사이드바 표시/위치" 에서 왼쪽, 또는 오른쪽을 선택하면 됩니다.

 

 

 

 

3. 사이드바를 감춰서 1단 스킨으로 변경하기

"레이아웃 사이드바 표시/위치" 항목을 "감춤"으로 선택하면 사이드바가 사라지고, 데스크탑 화면에서도 모바일 기기의 펼침 사이드바 메뉴처럼 동작하게 됩니다.

 

사이드바가 감추어져 펼침 메뉴로 변경된 레이아웃

 

사이드바 펼침 화면

 

4. 커버페이지 설정하기

커버페이지는 기본으로 꺼져 있으며, 스킨 설정 화면에서 "커버"를 선택해서 켜야 합니다.

사용할 수 있는 커버 아이템 종류는 8가지입니다.

다양하게 변형을 준 데모 커버 페이지가 미리 구성되어 있으며, 취향에 맞춰 필요한 커버 아이템만 남겨서 컨텐츠를 작성하면 됩니다.

거버페이지 구성 화면
커버 페이지 화면

 

5. "커버 리스트" 만으로 커버 페이지 구성하기

커버 페이지 아이템중 "커버 리스트" 아이템은 조금 특별하게 일반 글목록과 같은 레이아웃을 가집니다.

스킨 옵션 설정에서 설정한 글목록 설정과 같은 모양으로 표시되기 때문에 다른 커버 아이템들을 모두 삭제하고 "커버 리스트" 커버 아이템 만으로 원하는 글을 모아서 표시하는 메인 커버 페이지를 구성할 수 있습니다.

 

 

 

6. 구글 번역 기능 사용하기

해외 접속자를 위한 블로그를 운영할 경우 구글 번역 기능을 블로그에 추가해서 구글 자동 번역 기능 활용할 수 있습니다.

 

 

스킨에 구현된 구글 번역 기능 화면은 기본 구글 번역 언어 선택 목록 표시 방법과 깃발 아이콘으로 주요 9개 언어를 선택하는 두가지가 가능합니다.

 

구글 번역 기능

 

7. 모바일 화면 설정

반응형 모바일 화면 전용으로 설정할 수 있는 여러가지 설정 옵션을 제공합니다.

반응형 모바일 스킨 옵션 항목들

 

반응형 모바일 화면

 

 

8. 레이아웃 너비와 간격 설정하기

본문 메인 영역(컨텐츠영역 + 사이드바) 외곽의 좌우 여백과 컨텐츠 영역과 사이드바의 사이 여백을 조정할 수 있습니다.

기본 설정 값은 본문 영역 좌우에 15px씩 기본 여백이 있으며, 사이드바와 컨텐츠 영역 사이에는 60px의 여백이 있습니다. 사이드바 여백 사이에는 구분선이 표시됩니다.

 

스킨 옵션 설정을 이용해 이 여백을 조절할 수 있습니다.

 

메인 영역 좌우의 15px 여백 제거 옵션

 

 

컨텐츠 영역과 사이드바 사이에는 구분선으로 구분해서 총 60px의 여백이 있습니다.

사이드바/컨텐츠 영역 세로 구분선 표시 옵션을 끄면 여백을 구분선 없는 30px로 좁게 변경할 수 있습니다. 줄어든 30px는 사이드바 영역에 더해져서 사이드바 영역이 그만큼 넓어지게 됩니다.

 

 

구분선과 60px 여백으로 구분된 컨텐츠 영역과 사이드바

 

9. 사용 가능한 옵션 항목들

90여개의 스킨 옵션 항목을 설정할 수 있습니다.

스킨 옵션 항목들

 


 

 

반응형

Comments

  • "무료배포 해주시는분도 없는데....양심적으로 이용좀 ㅋ"
    "가끔 본의 아니게 수정하다 지워지는 경우가 있긴함 ㅎㄷㄷ"

    배포 스킨 하단의 저작권 표시와 스킨 소스의 저작권 표시 삭제를 금지합니다.
    임의로 저작권 표시를 삭제하는 경우가 자주 눈에 띄어서 명시적으로 공지를 합니다.

    "개발자에게 구독>공감>댓글은" 더 많은 스킨을 개발하는 원동력이 됩니다~ 별거 아니니

    총총 눌러주세요~♥" 현재 티스토리 스킨 고정적으로 올려주시는분이 3분도 안됨!!

  • 깔끔한 템플릿 무료공유 감사합니다. 잘쓰겠습니다.

    하나 궁금한 사항이 있어서 댓글남겨놓습니다. 돋보기클릭했을때 아무런 변화가없습니다. 블로그내 검색이 가능하게 하려고어떻게 하면될까요?

  • 감사합니다 그동안 이렇다 할 스킨이 없어 칙칙한 기본 스킨만 사용하고 있었는데, 덕분에 정말 좋은 스킨 적용하였습니다!!
    잘 사용하겠습니다~!

  • 익명 2022.05.11 14:31 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 만들 수는 있는데, 의도해서 사이드바쪽의 썸네일은 가로가 더 크게 설정된 것입니다.

      사이드바 항목의 썸네일이 정사각형이 되면 텍스트 내용이 너무 많이 나오게 되고, 모바일에서는 텍스트가 2줄만 표시되도록 설정되어있기 문에 아이템 하단에 공백이 떠보이는 다소 보기 좋지 않는 모습으로 연출이 됩니다.

      skin.html 에서
      C120x80
      을 검색해서
      C120x120
      으로 변경하면 됩니다.

      2군데 검색될거고 스킨 원본 기준으로
      1035, 1058 행입니다.
      C는 대문자, x는 소문자로 사용해야 합니다.





❌ 닫기