Square

최초 배포: 2015-08-15
분류: Tistory
사용 언어: HTML5, CSS3, jQuery

가장 기본이 되는 2단 스킨에 불필요한 기능은 제거하여 더 가볍게 제작했습니다.

※ 티스토리 반응형웹 스킨 공모전 대상 수상

기본정보

반응형웹을 지원하고 간단한 스킨 옵션과 위젯을 지원합니다.

지원 위젯

  1. 메뉴
  2. 카테고리
  3. 링크
  4. 최근 댓글
  5. 방문자 카운터
  6. 검색

스킨 옵션

  1. 사이드바 숨기기
  2. 위젯 제목 숨기기
  3. 카테고리 위젯의 "분류 전체보기" 텍스트 숨기기

스크린샷

수정사항

2018.11.07 - Final 1.1.1

1. common.js 파일 수정
잘못된 변수명이 사용된 부분을 수정했습니다.
패치가 진행됨에 따라 스킨 내 버전 표기를 변경했습니다.

#1. 위치 : 48번째 줄

수정 전

if ( images !== null ) {

수정 후

if ( image !== null ) {

#2. 위치 : 78번째 줄

수정 전

console.log("Square final 1.1 / Skin by wallel.com")

수정 후

console.log("Square final 1.1.1 / Skin by wallel.com")

2. style.css 파일 수정

티스토리의 대표 이미지가 없을 경우 나타나는 기본 이미지가 변경되어 관련된 CSS를 수정했습니다.

#1. 위치 : 362번째 줄 ~ 368번째 줄

수정 전

#recent-post ul li img[src*='cssjs'] { position: absolute; top: 0; bottom: 0; margin: auto 0; opacity: 0.5;
	-webkit-filter: grayscale(1);
	   -moz-filter: grayscale(1);
	    -ms-filter: grayscale(1);
	     -o-filter: grayscale(1);
	        filter: grayscale(1);
}

수정 후

#recent-post ul li img[src*='openGraph'] { position: absolute; top: 0; bottom: 0; margin: auto 0; opacity: 0.5;
	-webkit-filter: grayscale(1);
	   -moz-filter: grayscale(1);
	    -ms-filter: grayscale(1);
	     -o-filter: grayscale(1);
	        filter: grayscale(1);
}

2018.10.05 - Final 1.1

1. Spoqa Han Sans 폰트 제거 및 Noto Sans KR 적용
스포카 한 산스 폰트를 제거하고 Noto Sans KR 폰트를 적용했습니다.
Cross Domain, SSL 적용 등의 이슈를 피하기 위해 용량이 크더라도 폰트 파일을 스킨 파일에 추가했습니다.

또한 모바일에선 웹폰트가 나오지 않게 하여 모바일 기기의 속도를 더 빠르게 했습니다.

2. 일부 CSS가 수정되었습니다.
폰트 변경에 따라 일부 CSS가 수정되었습니다.
줄 간격, 여백값 등이 수정되었고 좀 더 깔끔하게 볼 수 있게 수정했습니다.

3. skin.html 파일 개선
라인 재정렬, 스포카 한 산스 코드 제거 노토산스 코드 추가 등의 개선이 이루어졌습니다.

4. js 파일 개선
ygal-edit.js 파일이 제거되고 common.js 파일로 합쳐졌습니다.
티스토리의 SSL 인증서 적용 패치 이후 하단 최신글 위젯에 썸네일이 나오지 않던 문제도 수정했습니다.

5. 비밀글 체크박스 오류 해결
한 페이지 내에 여러개의 포스트가 불려질 경우 댓글을 작성할 때 SECRET 체크박스에 체크가 제대로 작동하지 않던 문제를 해결했습니다.

6. recent-post-long 옵션 제거
그다지 사용되지 않고 저 조차 잊고있던 옵션인 최신글 썸네일 늘려주는 옵션을 제거했습니다.

7. 글 목록 수정
글 목록에서 제목이 길 경우 댓글 갯수와 날짜 영역이 망가지는 부분을 수정했습니다.
반응형에선 글 제목 아래에 날짜와 댓글 갯수가 나오게 수정했습니다.

8. 방문자 카운터 툴팁 적용
사이드바 위젯 중 방문자 카운터에 툴팁을 적용했습니다.
이제 카운터의 숫자가 어떤 의미인지 좀 더 쉽게 알 수 있습니다.

9. 큰 글씨 사용 시 글자 겹칩 문제 해결
강조하고싶은 글자를 크게 했을 때 다른 줄의 글자와 겹치는 문제를 해결했습니다.
전체적으로 line-height 의 값을 % 에서 정수로 변경했습니다.


2015.07.28

Final 1.0.0 최초 배포

블로그
프로젝트
스터디