반응형

    구버전입니다. 최신버전은 여기로

    Material T mark 5+ 티스토리 개편에 맞춰 업데이트 했습니다



    Material T skin Mark1


    구글은 최신 안드로이드 운영체제 롤리팝(Lollipop)을 발표하면서 새로운 디자인을 적용하였습니다.머티리얼 디자인은 최신 디자인 트렌드인 평평함(Flat)"과 "단순함(Simplicity)"을 반영하였으며,

    종이와 잉크를 이용한 디자인 연구를 바탕으로 종이와 동일한 느낌을 표현하여 실제와 같은 경험을 주는 것을 목표로 합니다.


    구글은 다양한 기기와 서비스를 일관성있게 통합하기 위한 수단으로 머티리얼 디자인을 선택했습니다.

    스마트폰, 태블릿, PC 등 어느 기기에서나 직관적이고 익숙한 사용자 경험을 제공하기 위한 구글의 디자인 철학!

    이제 티스토리 블로그에서도 Material T 스킨을 통해 느끼실 수 있습니다.



    Material T 스킨의 특징

    1단 반응형 블로그 스킨 -머티리얼 디자인의 깔끔함에 걸맞는 1단형 블로그 스킨은, 방문자가 더욱 본문에 집중할 수 있게 해줍니다.
    반응형 스킨 유일 데스크탑모드 탑재 -이전에 작성한 글들이 반응형 모바일 레이아웃에 맞지 않아도 걱정하지마세요. 사이드 드로워를 통해 데스크탑모드로 들어갈 수 있습니다.
    머티리얼 디자인 및 효과 적용 (메뉴, 물결 클릭 효과, 카드 및 버튼) - 안드로이드 롤리팝에 적용된 물결 클릭효과

    - 카드 및 버튼



    최근 글이 자동으로 나타나는 메인화면 -티에디션은 지원하지 않지만, Fastboot스킨과 같이 최근글로 메인화면을 자동으로 구성합니다. (RSS발행 필요)





    페이지 이동 없이 블로그 내 검색이 가능한 직관적인 시스템 -




    카드 형식으로 자동 정렬되는 사이드바

    -작은화면에서는 1열, 큰화면에서는 2열로 정렬되며, 빠르게 스크롤하면 사이드바가 올라오는 모습을 볼 수 있습니다.



    탭으로 쉽게 전환이 가능한 댓글 및 공유 기능 -


    모바일앱 스타일의 사이드 드로워 -




    다운로드



    설치 방법

    티스토리 커스텀 스킨 설치방법을 참조하세요.


    추가로 모바일 스킨 OFF시키는 것도 잊지 마세요.

    .


    설치 후 필수 설정

    1. 플러그인 설정에서 다음 항목들을 사용해주세요. (필수)

    • "Light TT EX (이미지 크게보기)"
    • "홈페이지 아이콘 표시 (파비콘)" 또는 "블로그 아이콘 표시"

    2. 화면설정-화면출력을 다음과 같이 설정했는지 확인해주세요.

    특히 애드센스 사용하실 분들은 위의 설정대로 해주셔야합니다.


    3. 블로그 기본정보를 입력해주세요.

    "설명"은 메인화면 및 사이드 드로워, 사이드바프로필패널에 나타납니다.

    "아이콘 및 파비콘"은 메인화면, 사이드 드로워, 댓글영역에 나타납니다.


    4. 글설정에서 다음 설정들을 확인해주세요.


    특히 발행, 공개정책부분이 맞지 않을경우 메인화면에 글이나 썸네일이 나타나지 않을 수 있습니다.

    스펙

    Bootstrap3(customized)

    Sass
    jQuery

    IE9 이상 지원 (IE7,8에서도 본문을 읽을 수는 있음)



    라이센스 및 도움주신 분들.

    크리에이티브 커먼즈 라이선스
    이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.

    Bootstrap - Code licensed under MIT

    Google material-design-icons : https://github.com/google/material-design-icons#license

    Readiz님 - 이전스킨인 Fastboot제작자이시고, 각종 기술에대한 힌트를 얻었습니다. http://blog.readiz.com/

    est0que님 - Modern Basic스킨의 뼈대를 많이 이용했습니다. http://est0que.tistory.com/2125

    해커C님 - 트랙백 스팸차단 스크립트 http://hackerc.tistory.com/700

    Kong님 - 디자인 도움주셨습니다. http://kong-story.tistory.com/



    수정 강좌

    Material T 커스텀 강좌 - 사이드바 추가하기


    Material T 커스텀 강좌 - 메인화면 편집


    Material T 커스텀 강좌 - 색상 변경


    Material T 커스텀 강좌 - disqus 설치 및 탭 추가



    추가 예정...




    Mark1의 2단형 버전?

    Material T Skin Mark2 다운로드


    반응형
    Posted by 뭐하라