Hello there and welcome to my blog!
TODAY 80 TOTAL 2,323,867
티스토리 스킨 Whiteground 2 배포

 

 

티스토리를 위한 반응형 스킨 'Whiteground 2'를 배포합니다. 티스토리에서도 멋진 반응형 스킨을 이용한 블로그들이 나타나기를 바라는 마음으로 만들었습니다. 옛날에 제가 만들어 배포했던 'Whiteground' 스킨의 느낌을 이어간다는 뜻으로 그 이름을 따서 지었습니다.

 

Lightweight and powerful!

스킨 미리보기 페이지 열기 (지금 보고 계시는 블로그는 다른 스킨이 적용되어 있습니다.)


특징

가독성에 초점을 맞춘 간결한 디자인 (2단 구조)

반응형 디자인

- 데스크톱 화면에서는 상단 메뉴, 모바일 화면에서는 좌우 메뉴로 전환

빠르고 가벼운 구조

 - 400KB 미만의 한글 웹폰트

 - 순수 Javascript/CSS (별도의 라이브러리 등을 사용하지 않습니다.)

카테고리 롤오버 드롭다운 메뉴 (2단 하위 카테고리까지 지원합니다.)

스크롤시 상단 메뉴 고정 표시

편리한 커스텀 설정 및 부가 기능 지원 (단, 스킨위자드 일부 기능 제한)

티스토리 스킨 가이드를 준수합니다.


사양

최신의 웹 브라우저 환경을 권장하며, IE8 등의 낡은 웹 브라우저는 지원하지 않습니다.

- Google Chrome, Microsoft Edge, Internet Explorer 11 등에서 테스트되었습니다.

 

설치 및 초기 설정 


Whiteground2.1.0.3.zip


* 푸른색 배경 사진이 적용되어 있습니다. 스킨 적용 후 스킨위자드 등을 이용해 배경 사진/배경색을 설정하실 수 있습니다.

* 기본으로 배경 사진을 다른 색상으로 3가지 탑재하고 있고, 적용하는 색상에 따른 CSS 수식이 미리 설정되어 있습니다. (아래 3. 설명 참조)


1. 스킨 업로드 및 적용 과정은 일반적인 티스토리 스킨의 설치 과정과 같으므로, 스킨 설치 경험이 있는 분이라면 바로 2. 스킨 초기 설정부터 보시면 됩니다.

 

1. 티스토리에 스킨 업로드하고 적용하기

2. 스킨 초기 설정 (사이드바 등) - 꼭 읽어주세요!

3. 기본 배경 사진과 색상 CSS 활용하기

 

카테고리 출력

메뉴 설정에서 카테고리-분류 전체보기 (모든 글 보기) 메뉴를 설정하여 두었다면, 자동으로 데스크톱 화면에서는 해당 메뉴를 마우스 롤오버-드롭다운 형태로 세부 카테고리를 펼쳐서 보여주고, 모바일 화면에서는 오른쪽 메뉴에서 카테고리를 펼친 채로 메뉴를 보여줍니다.


폰트

이 스킨은 한글 웹폰트로 Google Noto Sans CJK KR을 자체 탑재하고 있으며, KS X 1001 표준 서브셋만을 지원함으로써 기본, 굵게 두 가지 두께를 합쳐서도 400KB가 되지 않게끔 경량화되어 있습니다. (WOFF2 기준) 한글 웹폰트 추출에 관해서는 Coderifleman님의 글에서 도움을 받았습니다. 아이콘은 Font Awesome의 아이콘 몇 개를 fontello를 이용하여 따로 떼어낸 것을 자체 탑재해 사용하고 있습니다. Noto Sans와 Font Awesome은 모두 SIL 오픈 폰트 라이센스 1.1을 따릅니다.


블로그 아이콘 등

댓글, 방명록에서는 블로그 아이콘을 보여줍니다. (기본 아이콘이 아닌 사용자들의 아이콘을 나타내기 위해서는 먼저 플러그인 설정에서 블로그 아이콘을 활성화하셔야 합니다.) 


이 스킨은 댓글/방명록 블로그 아이콘 플러그인 외에도 카테고리 다른 글 보기 플러그인을 지원합니다. 카테고리 다른 글 보기 플러그인을 사용하실 경우에는 회색 설정을 권장합니다. 그리고 페이스북, 트위터, 구글플러스로의 공유하기 버튼이 게시글 하단에 있습니다.


스킨을 공개하며

ghost를 비롯한 해외의 블로깅 툴을 보면, 가독성이 훌륭하면서도 오늘날의 웹 트렌드에 부응하는 미려한 반응형 디자인들이 많이 있습니다. 그런 느낌을 티스토리에 녹여내면 어떨까 싶었는데, 그 나름의 결과물을 특징 이번 티스토리 반응형 스킨 공모전이 열린 기회에 배포하게 되었습니다. 간결하고 가벼우면서도 기능은 강력한 스킨을 만들고자 해서 jQuery나 Bootstrap 등은 사용하지 않았으며, 웹폰트나 아이콘 역시 모두 최적화를 따로 했고 무엇보다도 직관적인 가독성을 중시했습니다.

 

예상되는 질문과 답변

배경사진을 없애거나 바꾸고 싶은데요?

배경사진 대신 배경색을 넣고 싶어요.

구글 애드센스 (반응형)를 설치하고 싶은데요.

본문 글자 크기가 너무 작게 나오거나 이상한 크기로 나와요!

인용구가 가운데에 표시되지 않는데요?

트랙백 수 표시를 지우고 싶은데요?

목록에서 사진 미리보기는 지원하지 않나요?

 

변경내역

1.0.0, 2015-07-31.

- 첫 배포

 

1.0.1, 2015-08-01.

- 오류 수정 및 3가지 배경 사진과 그에 맞는 색상 CSS 추가


1.0.2, 2015-08-03.

- 오류 수정 및 모바일 화면에서의 상단 디자인 수정


1.0.3, 2015-08-08.

- Noto Sans WOFF2 리패키지

 

라이센스

CC BY-NC-SA, 저작자표시-비영리-동일조건변경허락. 원작자 표기를 유지하고 2차적 저작물에도 동일한 라이센스를 적용하는 한에서 비상업적 목적의 변경, 재가공을 허락합니다.


감사합니다. 이 스킨에 관한 문의사항이나 오류 제보 등 남기실 말씀이 있으시다면 댓글을 남겨 주세요. 단, 기본적인 HTML/CSS 수정이나 스킨에서 제공하는 기능을 넘어서는 수정 등에 관한 질문에 대해서는 답변을 드리지 않을 수 있습니다.

신고
87  Comments
댓글 쓰기

티스토리 툴바