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.04.30 18:04

      비밀댓글입니다

      • BlogIcon 뭐하라
        2017.05.01 09:18 신고

        토요일은
        #calendar tbody td:nth-child(7){
        color:#0000ff;
        }
        이런식으로 css추가하시면되고
        html에 .tt-calendar .cal_day3 a {
        display: block;
        color: #fff;
        width: 30px;
        height: 30px;
        line-height: 30px;
        background: #4285f4;
        border-radius: 50%;
        margin: 0 auto
        }
        이부분 다른내용 지우고 color만 노란색으로 잘 설정하시면될것같네요


    • 2017.05.01 19:02

      비밀댓글입니다

      • BlogIcon 뭐하라
        2017.05.01 19:05 신고

        원래 커스텀 요청은 기부자 대상으로만 지원드리는데요 여기까지만 알려드리겠습니다.
        #calendar tbody td:nth-child(7) 대신
        #calendar :nth-child(7)
        으로 쓰시면될겁니다

    • BlogIcon 바이퍼워터
      2017.05.01 19:09 신고

      정말 감사드립니다 ㅠ

    • BlogIcon 바이퍼워터
      2017.05.04 20:36 신고

      h 태그를 사용 안하려면 html 설정이 필요하죠?

      • BlogIcon 뭐하라
        2017.05.04 23:16 신고

        h태그를 사용안하려면이 아니라 쓰려면 html 편집모드로 들어가야합니다

        글들을 보니까 모든 문단이 h4태그 안에 들어있는데 이건 검색엔진 최적화에도 좋지 않으니 h태그는 진짜 소제목에만 사용하시기바랍니다

        전체복사해서 컨트롤+쉬프트+v하면 모든 태그가 사라지게됩니다. 글자크기나 색도 사라지니 다시 잘 설정하시면됩니다

    • BlogIcon 바이퍼워터
      2017.05.04 23:28 신고

      아.... 죄송합니다.. 티스토리는 운영 시작한지 얼마안되서 ㅠㅠ...

    • ㅇㅇ
      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 Leos
      2017.07.31 00:18 신고

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

    • BlogIcon 뭐하라
      2017.07.31 16:21 신고

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

      • BlogIcon Luft Aquila
        2017.07.31 17:36 신고

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

    • BlogIcon NAL_T
      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 신고

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

티스토리 툴바