Material T스킨의 마지막버전이 될 mark5입니다.


    당초에 유료스킨으로 공개할 예정이었지만, 유료로 판매할만한 퀄리티는 아닌것같아서 무료로 배포하게 되었습니다. 많은 이용 부탁드립니다.


    다만 커스텀 요청은 간단한 답변이 가능한 경우를 제외하고 유료로 제공하고자 하니 공지사항을 참조해주세요.


    Material T Mark 5의 2단형 버전!

    MaterialT mark 5.2 다운로드 - 2단형 반응형 스킨



    주요 특징

    • 반응형 1단 스킨 - 머티리얼 디자인의 깔끔함에 걸맞는 1단형 블로그 스킨은, 방문자가 더욱 본문에 집중할 수 있게 해줍니다. 

    • 반응형 스킨 유일 데스크탑모드 탑재 -이전에 작성한 글들이 반응형 모바일 레이아웃에 맞지 않아도 걱정하지마세요. 사이드 드로워를 통해 데스크탑모드로 들어갈 수 있습니다. 

    • 머티리얼 디자인 및 효과 적용 - 구글의 머티리얼 디자인 가이드에 따라 제작되었으며 곳곳에 머티리얼 효과들이 숨어있습니다.(예, 물결 클릭 효과)

    • 현재중심적인 시간표시 - 현재시간을 기준으로 시간이 표시됩니다. (예, 1시간 전, 5주 전) 1년 이상된 경우는 날짜가 표시됩니다.

    • 완벽한 썸네일 지원 - 티스토리의 최신 치환자가 적용되어있고, 최소한의 트래픽을 사용하여 썸네일을 불러옵니다.

    • 댓글영역 자동 링크 - 댓글영역에 url이 있는 경우 자동으로 하이퍼링크가 생성됩니다. 링크가 이미지인경우 이미지가 자동 삽입됩니다. (활성화 필요- 맨 밑에 강좌 참조하세요)

    • 관련글 지원 - 최신방식의 '카테고리의 다른글'기능입니다.


    • 모바일앱 스타일의 사이드 드로워 - 부드럽게 동작하며 빈공간을 클릭하는 것 뿐만 아니라 뒤로가기나 취소키로도 닫을수 있습니다!


    • 페이지 이동 없는 직관적인 검색방식


    • 페이지 이동 없는 추가 목록 불러오기


    • 반응형 티에디션 지원 - 티에디션을 사용하지 않아도 메인화면은 최신글 목록으로 표시됩니다. 거기에 원하는 글로 메인을 꾸미는 티에디션역시 지원합니다!

    • 스킨위자드 지원 - 스킨위자드를 통해 초보자도 쉽게 배경, 홈화면이미지, 본문 폭 등을 수정할 수 있습니다.





    필수 수정 사항

    이 부분을 수정하지 않으면 목록이 나오지 않습니다! 

    티스토리의 최신 구조에 맞도록 화면설정- 화면출력에서 붉은 부분을 수정해줍니다.

    (새로운 스킨 구조에서는 에드센스를 사용중이더라도 절대 정책위반이 될 위험이 없으니 안심하세요.)



    블로그 아이콘 표시를 해야 댓글,방명록에 작성자 아이콘이 표시됩니다.

    카테고리 글 더보기 플러그인은 새로운 방식으로 변경되었으므로 설정해지합니다.


    .


    다운로드

    materialTM5.zip


    이 파일은 오래된 버전입니다.


    Material T mark 5+ 다운받으러가기



    2016-02-14 14:00 : 일부 화면에서 카드 배경 없음 수정 (이전에 받으신 분들은 skin.html만 교체하셔도 됩니다.)

    2016-02-14 19:00 : 댓글 자동 링크기능 수정했습니다. 이제 정상작동합니다.(활성화 필요, 활성화 강좌 참조)

    2016-02-25 22:00 : style.css에서 색상 수정 관련해서 버그를 수정했습니다.

    2016-03-10 13:44 : 댓글 자동 링크기능이 방명록에서도 작동합니다.

    2016-04-02 21:35 : index.xml에서 버전표시가 잘못되어있던 것을 수정했습니다.
    2016-06-09 09:45 : materialT.min.js파일 수정

    2016-06-10 17:17 : 댓글신고관련 수정

    2016-07-29 22:55 : 방명록에도 더보기 추가

    후원 안내

    material T 는 무료스킨입니다.

    스킨이 유용하다고 생각하신다면 후원으로 마음을 표시해주세요!

    후원하러가기

    후원을 해주신 분들께는 스킨 수정을 적극적으로 도와드립니다.




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

    크리에이티브 커먼즈 라이선스 
    이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 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 mark3 이후버전 티에디션 적용 방법


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


    MaterialT 커스텀 강좌 - 색상 변경 방법(mark3 이후)


    material T mark5 댓글 자동링크 활성화 하기


    Material T home카드 수정하기


    Material T 글자 크기 조절하기


    material T 강좌 - toBottom 맨 아래로 가는 버튼 만들기



    수정 강좌는 댓글 요청사항 보면서 차차 업로드 하겠습니다.

    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • 이전 댓글 더보기
    • ㅇㅇ
      2017.05.22 02:11 신고

      구글 Polymer랑 비슷하네요 느낌이 ㅋㅋ

      • BlogIcon 뭐하라
        2017.05.23 17:50 신고

        polymer도 머티리얼디자인을 적용하고있으니까요~

    • BlogIcon 비아누
      2017.05.25 01:26 신고

      특정 태그의 innertext를 지우는 방법이 있을까요?
      블로그 게시글에 style 태그나 script 태그를 쓰는 경우가 있는데, 이 경우에 style태그나 script 태그의 내용이 모두 드러나더라구요.
      style 태그에 a {color : #123456;}이란 내용이 있으면 메인 페이지의 미리보기라고 해야하나... 간략하게 본문내용 나오는 부분에 고스란히 나오더라구요. 게다가 script에 <> 괄호가 사용되어있는데 도중에 끊겨버리면 html이 완전히 엉켜버리기도 하구요...
      추가로 js를 삽입해서 처리하려 해도 html이 꼬여버리면 처리가 안되더라구요...ㅠㅠ

      • BlogIcon 뭐하라
        2017.05.25 18:19 신고

        음.. 티스토리의 글요약을 그대로 쓰는것이라 스킨에서 따로처리하긴 어렵습니다..
        티스토리에 문의한번 해보세요

    • BlogIcon 전자사향
      2017.06.14 15:19 신고

      마크3에서 마크5로 업그레이드 했는데요. 정말 감사합니다.
      다름이 아니라 마크3에서 메인화면에 블로그정보랑 원형 아이콘에 블로그 이미지가 좌측 아래에 있었는데 마크5로 업뎃하면서 없어졌는데, 이걸 넣을 순 없을까요?

      • BlogIcon 뭐하라
        2017.06.14 17:03 신고

        html에서
        <div id="homeCards"
        부터
        <!--홈 화면 카드 끝-->
        이부분을 mark3것으로 바꿔주시면 될것같네요
        모양이 이상하면
        CSS에

        /*홈카드*/
        .home {
        margin-left: -4px;
        margin-right: -4px;
        }

        .homeBG {
        width: 100%;
        height: 300px;
        padding: 1em;
        background: url("./images/homeBG.jpg");
        background-size: cover;
        background-position-y: 0;
        }
        .homeBG img {
        width: 78px;
        height: 78px;
        border-radius: 50%;
        margin: 150px 8px 100px 0;
        float: left;
        box-shadow: 3px 3px 9px 0.9px rgba(0, 0, 0, 0.2);
        }
        .homeBG .homeProfile {
        color: #fff;
        text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;
        margin: 0;
        }
        .homeBG .homeName {
        font-size: 24px;
        margin-top: 150px;
        }

        @media (min-width: 768px) {
        .homeBG img {
        width: 106px;
        height: 106px;
        }
        }
        .homeCardWrap {
        padding: 0 4px;
        }

        .homeCard {
        max-height: 180px;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        overflow: hidden;
        }
        .homeCard img {
        max-width: 100%;
        width: 180px;
        height: auto;
        float: left;
        }
        .homeCard img[src^="http"] ~ .headAndDesc {
        width: 50%;
        }
        .homeCard .headAndDesc {
        float: left;
        }
        .homeCard .headAndDesc h3 {
        margin: 16px;
        }
        .homeCard .headAndDesc p {
        margin: 16px;
        }
        .homeCard:hover {
        box-shadow: 8px 8px 24px 2.4px rgba(0, 0, 0, 0.2);
        z-index: 2;
        }

        를 추가해보세요.
        왜 뺐는지 기억은 안나지만.. 정상작동을 보장하진 않습니다.

      • BlogIcon 전자사향
        2017.06.15 10:10 신고

        적용했습니다. 감사합니다 정상적으로 작동하네요!

    • BlogIcon 푹곰
      2017.06.16 08:46 신고

      지금 여기에 적용되어 있는 스킨이 이 스킨인가요? 아니면 3버전 인가요?

    • BlogIcon 파자루
      2017.07.12 20:58 신고

      잘 사용하겠습니다. 감사합니다!!


    • 2017.07.14 13:52

      비밀댓글입니다

      • BlogIcon 뭐하라
        2017.07.15 07:56 신고

        잘나오고있는데요~
        표시되지 않는 브라우저나 제목을 자세히 설명해주세요

    • BlogIcon Dawn
      2017.07.21 16:28 신고

      좋은 스킨 정말 마음에 들어요~
      하지만 카테고리나 프로필 부분에 위젯, 유튜브 같은 걸 넣을 수 있었으면 좋겠는데
      혹시 가능할까요..??

      • BlogIcon 뭐하라
        2017.07.21 17:23 신고

        강좌중에 사이드바 추가하기 참조하시면될겁니다

    • BlogIcon Dawn
      2017.07.22 09:06 신고

      제가 잘못 말 했네요... 원하는 위젯을 drawer 부분에다 넣고 싶은데, 이럴 때엔 어떻게 하면 좋을까요..?
      (번거롭게 해서 죄송합니다...)

      • BlogIcon 뭐하라
        2017.07.22 13:13 신고

        태그 링크추가 방명록처럼 한줄 추가하고싶으신거면
        <li> <a href="/guestbook"><i class="ic-sms"></i> 방명록</a>
        </li>
        아래에 같은 양식으로 추가하시면됩니다.
        href = 뒷부분에 원하는 링크를 넣으시면되고
        ic-sms부분은 아이콘인데 사이드바 추가하기 강좌에 쓸수있는 아이콘이 있을겁니다.

        위젯도 listWrap 안쪽에 그냥 넣으시면되는데.. 양식이 없어서 디자인까지 알려드리긴 무리가 있네요

    • BlogIcon Dawn
      2017.07.22 20:14 신고

      아하! 그냥 위젯 코드도 그 부분에 같이 넣으면 되는 거였군요... 정말 감사합니다..!!
      ... 근데 이렇게 해서 유튜브로 배경음악을 넣을려 했는데... 페이지가 바뀌면 자동으로 재생이 종료되더라고요...
      흔히 알려진 배경음악 플레이어인 SCM MUSIC PLAYER 도 블로그에 넣으면 블로그가 백지 상태로 뜨고...
      이 스킨에서 SCM MUSIC PLAYER 는 적용이 안 돼는 건가요..?
      아니면 다른 배경음악 넣을 방법이 있는건가요...??
      (쉽게 생각대로 풀리지가 않네요... 매번 중간에 번거로움이 존재하는... ㅠㅠ)

      • BlogIcon 뭐하라
        2017.07.22 22:49 신고

        SCM플레이어는 원인은 잘 모르겠고 제스킨과 충돌하더군요..
        다른 배경음악솔루션이 있는지는 모르겠습니다

        그리고 블로그에 배경음악 사람들이 별로 안좋아합니다..

    • Dawn
      2017.07.23 00:30 신고

      어쩔 수 없는 부분인가 보네요...ㅠ
      하나하나 답변 달아주셔서 진심으로 감사합니다...!

      • BlogIcon Luft Aquila
        2017.07.30 23:34 신고

        만들어 주신 테마 정말 잘 사용하고 있습니다. 그런데 방문자 그래프 사이드바가 크기에 안 맞게 쪼그라들어서 나오는데 이거 크기를 다른 요소들과 맞출 수 있는 방법이 있을까요?

    • BlogIcon LeoDays
      2017.07.31 00:18 신고

      이렇게 좋은 기능과 디자인을 무료로 풀어주셔서 감사합니다. 잘 커스터 마이징 해서 사용하겠습니다.

    • BlogIcon 뭐하라
      2017.07.31 16:21 신고

      @Luft Aquila
      방문자 그래프는 너비를 늘려보니 너무 깨져나와서 별로 추천드리고싶지 않네요. 나머지는 사이드바 추가하기 강좌를 참조해보시기바랍니다

      • BlogIcon Luft Aquila
        2017.07.31 17:36 신고

        그런 문제가 있었군요...! 알려주셔서 감사합니다~

    • BlogIcon Mark_IT
      2017.07.31 21:37 신고

      저 인용구 색깔이 회색으로 나오고 해서 인용구 설정은 어떻게 하나요?

      • BlogIcon 뭐하라
        2017.08.04 10:24 신고

        인용구는 아무런 설정도 안해놨습니다
        CSS에서
        blockquote{
        color:#123456;
        }
        이런식으로 인용구 설정이 가능합니다

    • BlogIcon 전자사향
      2017.08.31 15:12 신고

      티스토리 개편으로 일부기능이 추가되었는데요(페이지, 메뉴 기능) 혹시 지원하실 계획이 있으신가요?

      • BlogIcon 뭐하라
        2017.08.31 15:26 신고

        앗 오늘개편되었네요
        작업해볼예정이었습니다.
        금방될것같기도하네요^^

      • BlogIcon 전자사향
        2017.08.31 15:52 신고

        뭐하라님
        항상 감사드립니다.

    • BlogIcon 만년나무
      2017.09.05 20:33 신고

      그 검색하고 검색결과 ,닫기 색이 파란색으로 나오던데 어디서 바꾸나요?

    • BlogIcon 전자사향
      2017.11.04 17:51 신고

      댓글창 옆에 SNS공유하는 기능있는데, 그 기능은 어디서 수정할 수 있나요. 소셜아이콘들이 제 블로그 에서만 이상하게 보이네요.

      • BlogIcon 뭐하라
        2017.11.04 18:01 신고

        css에
        [class^="a2a"] {padding: initial;}
        이렇게 한줄 추가하시면 해결될겁니다

    • BlogIcon 전자사향
      2017.11.04 18:04 신고

      제대로 보이네요. 항상 감사합니다.

    • BlogIcon 리세드리카
      2017.12.15 00:30 신고

      안녕하세요, 카테고리별 글 보기에서 썸네일을 더 크게 해서 셋팅하고 싶은데, 크기가 84x47px에서 도통 벗어날 생각을 하질 않네요.
      어떻게 하면 좀 더 큰 사이즈의 썸네일을 사용할 수 있을까요?

    • BlogIcon 전자사향
      2018.02.01 09:19 신고

      안녕하세요. 새해복 많이 받으세요~!
      다름이 아니라 머리말 여백을 어떻게 설정해야될지 모르겠습니다.

      해결했습니다~!

      text-indent: 0;
      padding-left: 16px;

      이거 붙이면되네요!

    • 메뉴질문
      2018.02.21 22:52 신고

      메뉴(사이드)에서 태그나 방명록 버튼을 없애는 방법 알려주시면 감사하겠습니다.

      • BlogIcon 뭐하라
        2018.02.21 22:56 신고

        5+버전을 쓰시면 티스토리 관리화면-메뉴에서 설정할수있습니다

      • 메뉴질문
        2018.02.21 23:01 신고

        5+가 아닌 버전에서는 어떡해하나요?

      • BlogIcon 뭐하라
        2018.02.21 23:04 신고

        http://nubiz.tistory.com/724

      • 메뉴질문`
        2018.02.21 23:07 신고

        정말 감사합니다!

티스토리 툴바