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 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • 이전 댓글 더보기
    • BlogIcon 이혼플래너
      2015.06.20 21:01 신고

      감사히 잘스겠습니다.

    • BlogIcon 윤마초
      2015.06.29 20:49 신고

      블로그의 전체적인 글씨체를 변경하려고 할때는 어떻게 해야하나요 지금은 나눔바른고딕체인데 서체 변경에 대해 궁금합니다

      • BlogIcon 뭐하라
        2015.06.29 21:06 신고

        body {
        padding-top: 65px;
        margin: 0;
        background: #eee;
        font-family: "NanumBarunGothic", 맑은 고딕, malgun gothic, AppleGothicNeoSD, Apple SD 산돌고딕 Neo, Microsoft NeoGothic, Droid sans, sans-serif;
        }
        css에서 이부분 수정하시면됩니다.

        기본서체가 아니라면
        @font-face {
        font-family: 'NanumBarunGothic';
        src: url("./images/NanumBarunGothic.eot");
        src: url("./images/NanumBarunGothic.eot?#iefix") format("embedded-opentype"), url("./images/NanumBarunGothic.woff") format("woff");
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        }
        이부분 맞는 폰트 업로드하시고 수정해서 쓰시면됩니다

      • BlogIcon 윤마초
        2015.06.29 21:26 신고

        eot woff 파일 바꿔주니 폰트도 변경이 되었습니다
        죄송하지만 한가지 더 여쭤볼게요 ㅠㅠ 폰트를 바꾸니까 본문 글씨크기가 작아서 좀 키워주고 싶은데 어떻게 변경하나요

      • BlogIcon 뭐하라
        2015.06.30 00:42 신고

        article{font-size:20px}
        css에 위와같이 한줄 추가해보세요~

    • BlogIcon 윤마초
      2015.06.30 21:00 신고

      scm player의 문제점은 해결이 안났나요? 플레이어 설치하니 블로그 화면자체가 뜨질않네요 ㅠㅠ

      • BlogIcon 뭐하라
        2015.06.30 22:02 신고

        네.. 어느부분에서 충돌하는지 찾질못하겠네요..

    • BlogIcon 검동
      2015.07.01 19:26 신고

      좋은 스킨 감사합니다! 잘 사용하겠습니다^^
      질문이 하나 있습니다!
      모바일로 접속 시



      으로 된 목록 버튼과
      돋보기 모양으로 된 검색버튼이 말썽을 부리네요 ㅠㅠ
      스크롤을 내리면 요것 두놈이 같이 따라왔다가 손을 떼면 다시 제자리로 돌아갑니다 ㅠㅠ
      왜 이러는걸까요?

      • BlogIcon 뭐하라
        2015.07.02 10:17 신고

        브라우저에따라 따라 그렇게 보일수 있습니다.
        스킨에서 해결할수있는 문제는 아닙니다

    • BlogIcon 류생
      2015.07.02 13:08 신고

      엄청 깔끔하고 멋지게 잘 만드셨군요! 좋은 스킨 잘 사용하겠습니다!!

    • BlogIcon 모피우스
      2015.07.07 19:46 신고

      최고 중 최고의 스킨이라 생각합니다. 다시 한번 감사드리며 공모전에 좋은 결과 있기를 바랍니다.

      • BlogIcon 뭐하라
        2015.07.07 22:30 신고

        감사합니다^^ 공모전 기간내에 새버전이 나올예정이니 기대해주세요

    • BlogIcon 모피우스
      2015.07.07 22:32 신고

      wow. 대박입니다.

    • BlogIcon 이거니거니료니
      2015.07.17 14:49 신고

      안녕하세요 스킨을 정말 잘 사용하고 있습니다 : )

      질문이 있는데 혹시 메인 화면의 글 등을 click 했을 때 해당 글로 이동 하는 기능 외에 휠 클릭했을 때 해당 글을 새탭으로 여는 기능을 추가 하려면 어떤식으로 수정을 해야 할까요ㅠ C 개발자다 보니 js 가 익숙치가 않네요 ㅠ

      보통의 링크의 경우 휠 클릭 할 경우 새탭으로 뜨게 되지만 div에 onclick으로 처리 된거라 어떻게 처리 해야 할지 조언을 좀 구하고 싶습니다~

      • BlogIcon 뭐하라
        2015.07.17 17:46 신고

        제가 표준을 지키지 않아 발생한 문제군요 ㅠㅠ
        다음버전엔 가능하면 a태그로 수정해보겠습니다.
        onclick="function(){if (event.button==1||event.button==4){window.open('url','_blank')} else {window.open('url','_self')}}"
        이런식으로 수정하면 될겁니다.

        ------------
        방금해보니 안되네요.. 쉬프트+클릭으로 새창으로 열기도 안되는군요
        다음버전부터 링크는 a태그로 표준을지키겠습니다

    • BlogIcon flsl13
      2015.07.17 19:48 신고

      잘 쓰겠습니다. 이런 분들 정말 신기하면서도 '이걸 어떻게 하지?'라는 생각이 많이 들어요. 이런 블로그 스킨들은 어떻게 만드나요. 궁금합니다.

    • BlogIcon 올에이
      2015.07.19 01:33 신고

      안녕하세요^^ 스킨 색상을 약간 변경하여 블로그에 적용하고 잘 활용하고 있습니다. 감사합니다!

    • BlogIcon 올에이
      2015.07.19 23:20 신고

      궁금한점이 하나 있습니다. 혹시, 부트스트랩에서 기본적으로 지원되는 텍스트 팝업 효과라든지, 버튼 같은 것은 사용이 불가능한가요? 버튼 html을 적용해보니까 안되서요.

      • BlogIcon 뭐하라
        2015.07.20 09:50 신고

        네 부트스트랩의 그리드시스템만 사용해서요.
        풀버전 부트스트랩으로 다시 업로드하시면 사용가능하실겁니다

    • BlogIcon Joo
      2015.07.20 18:16 신고

      이야~ 너무 멋져요 :)


    • 2015.07.26 05:03

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.07.26 15:23 신고

        지금은 바꾸셨는지 잘나오고있네요~

      • BlogIcon 맹수다
        2015.07.26 15:26 신고

        계속 같은 현상이어서 패스트붓으로 변경했네요.스킨 깔끔해서 좋았는데 반응형애드센스만 이상하게 나오지 않네요.

    • BlogIcon 은랑v
      2015.07.31 00:46 신고

      안녕하세요. 덕분에 이쁜 스킨 잘쓰고 있습니다!
      다름 아니라 본분에 반응형 광고를 넣으면 나오지 않는데요.

      혹시 왜인지 알 수 있을까요?ㅠㅠ

      • BlogIcon 뭐하라
        2015.08.02 21:25 신고

        http://nubiz.tistory.com/570
        이거 이용해서 고급형코드로 만들어주시면 잘 나오긴합니다
        아직까지 반응형광고 높이가 0으로 되는 문제 원인은 찾지 못하고있네요 ㅠㅠ

    • BlogIcon 백롱
      2015.08.10 02:32 신고

      안녕하세요. 스킨 정말 잘 쓰고 있습니다. 예쁘고 신기하네요. 적용은 사흘 정도 된 듯 한데 감사 인사를 질문과 함께 하려니 굉장히 민망합니다.... 가능한 혼자 해결하려고 애썼으나 답이 없어 질문드립니다 ㅠㅠ 티스토리 가로 길이 993~1400 픽셀 사이에서, 제목이 길어지면 카드 크기가 자동 조절되는 현상을 겪고 있습니다..ㅠㅠ.... 저희 티스토리 용도 상 제목 노출을 조절하긴 힘들 것 같고 혹시 해결책이 있을까요? 글자 수 노출로 조절하려 했으나 그럼 꽉찬 화면에서 글자수가 너무 적게 노출되서... ㅠㅠ~ 답변 부탁드립니다. 저희 주소는 http://missgamer.tistory.com/ 입니다.

      • BlogIcon 뭐하라
        2015.08.10 07:45 신고

        메인화면에서 말씀하시는것이죠?
        저도 그문제로 상당히 고민을하다가 mark3버전에서 그냥 아예 티에디션으로 방향을 바꿔버렸습니다. mark3로 바꿔보심이 어떠신지요..

    • BlogIcon 프리루트
      2015.08.20 13:46 신고

      안녕하세여 뭐하라님 먼저 이렇게 이쁜 스킨 제작해주셔서 감사드려여, 이렇게 댓글을 남기는건 다름아니라 궁금한 점이 있어서 물어보려구 하는데 이 Mark1 스킨을 적용시킨 다음에 블로그에서 글 본문에 폰트를 더깔끔한 뭐하라님의 글씨체나 나눔고딕체 같은 폰트로 바꿔 글을 쓰고싶은데 어떻게 해야되는지 방법좀 알려주실 수 있을까여??

      • BlogIcon 뭐하라
        2015.08.20 16:55 신고

        따로 폰트지정을 안했다면 본문 글씨체도 나눔바른고딕이 적용됩니다~
        다른글씨체는 웹폰트적용으로 검색해보시면 다른블로그에 많은데 따라해보시면될것같습니다

    • BlogIcon 프리루트
      2015.08.20 18:22 신고

      답변해주셔서 감사함다:D 다만 조금 햇갈리는게 있는데 따로 폰트지정을 안한다는건 포스트를 작성할때 무슨 폰트로 작성해야된다는거에여?? 따로 폰트지정을 안하는거면 굴림이나 돋음체.??

      • BlogIcon 뭐하라
        2015.08.20 19:31 신고

        그냥 아무것도 안하시면됩니다.
        이미 작성한글은 html편집모드에서 font="" 따위의 것들을 모두 지워주셔야할겁니다.
        쉬운방법으로는 글 전체를 복사했다가 컨트롤+쉬프트+V를 누르면 서식없이 텍스트만 붙여넣어집니다

    • BlogIcon 프리루트
      2015.08.20 19:54 신고

      아하 그럼 글을쓸때 굵게(컨트롤+B)설정 혹은 글씨일부에 색깔을 입히는건 글이 나눔바른고딕체로 자동으로 보이는데 있어서 상관없고 폰트부분만 포스트를 작성할 때 건드리지 않으면 되는건가여? 계속 이렇게 댓글로 물어보는게 실례가되는것은 아닌지 허허.. 죄송해요ㅠ

    • BlogIcon numnum_spoon
      2016.07.04 19:59 신고

      오늘 티스토리 처음 가입했어요 스킨에대해 잘 모르지만 시도해보려구요 ! 스킨 감사해요!

    • BlogIcon S꾸리
      2017.05.21 16:29 신고

      스킨 잘 사용 하겠습니다.

티스토리 툴바