본문 바로가기

Works/Tistory Skin

Material Design Lite Tistory - 1.0.0 beta

※본 스킨은 베타 버전이므로 예상치 못한 버그가 있을 수 있음. 버그 발견시 아래 댓글난에 제보바람



3년만에 만드는 티스토리 배포용 스킨이다. 현재 쓰고 있는 스킨을 만들기 위해 인터넷 여러 곳을 떠돌아 다니며 많은 것들을 보았다. 그러다 발견한 것이 바로 MDL 이다. MDL은 구글 디자인 팀에서 만든 머티리얼 디자인 웹 개발 키트이다. 기존의 머티리얼 디자인이 안드로이드와 그 외의 구글 제품들에 적용이 되었는데 여기서 한단계 나아가 웹에서도 머티리얼 요소를 쓰게 해준다. 



머티리얼 테마인 리플 버튼이나 갖가지 애니메이션이 모두 지원이 된다. 


이 테마는 기존에 있던 스킨을 티스토리용으로 변환 한것이다. MDL 홈페이지에 가면 원본 스킨을 볼 수 있다. 


MDLT 스킨은 티스토리에서 기본으로 지원하는 기능을 거의 모두다 지원 한다. 다만 관련글 기능은 제공하지 않는다. 

견본페이지



특징으로는 반응형 스킨이면서도 스킨 위자드를 지원한다. (단, 헤더 이미지와 배경 이미지에 한 함) 


새로 업데이트 된 퍼머링크 시스템을 지원하므로 섬네일이 나오는 메인화면을 사용 할 수 있다. 섬네일이 없는 글일 경우 스킨위자드에서 적용한 기본 헤더 그림이 뜨게 된다. 


사이드바는 오프켄버스 형태로 제공 된다. 티스토리에서 제공하는 모든 메뉴기능 사용가능


MDL에서 기본제공하는 영문 Roboto 폰트와 아이콘 폰트가 기본으로 제공 된다. 


댓글난에는 섬네일 표시기능은 티스토리에서 새로추가된 기능으로, MDLT는 이를 지원한다. 



footer에 있는 소셜 버튼은 뻥버튼이다. 자신이 계정 링크를 직접 걸어넣으면 된다. 


스킨 설치 방법

Material Design Lite Tistory.zip



첨부파일을 다운로드 받는다.


스킨 등록


환경설정 → 스킨에서 스킨 등록


새 스킨 등록


추가 버튼 클릭


파인더


파일 업로드 → images 폴더 안까지 싹다 업로드


업로드


스킨 저장명 지정하고 해당된 이름의 스킨을 스킨 보관함에서 선택 후 적용 완료




반응형 스킨이기 때문에 모바일웹 스킨은 끄는 것을 권장함.


스킨위자드

스킨위자드를 사용하기 위해서는 스킨 페이지에서 섬네일 옆의 스킨 위자드 버튼을 누르면 된다. 




지원되는 기능은 배경과 타이틀 이미지 변경이다. 


색상조합 변경

머티리얼 디자인은 몇가지 조합의 색상 프리셋을 지원한다. getMDL에 접속하여 원하는 색상 조합을 사용 할 수 있다. 



원하는 색상조합을 선택 후 아래에 나오는 코드를 복사하여 



skin.html에서 다음줄과 바꿔주면 된다. 


스킨관련 문의/버그신고

댓글 난에 작성, 그외 방명록이나 개인 메일로 요청시에는 가차없이 삭제


MDL 라이센스: 아파치 2.0

스킨 라이센스: MIT 라이센스

시간나면 커피한잔 이라도 사주는 센스