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


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


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


    Material T Mark 5의 2단형 버전!

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



    주요 특징

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

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

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

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

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

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

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


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


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


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


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

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





    필수 수정 사항

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

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

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



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

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


    .


    다운로드

    materialTM5.zip



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

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • 이전 댓글 더보기
    • BlogIcon alpacaman
      2017.03.29 00:37 신고

      사이드창 최상단에 블로그 아이콘으로 보이는게 새로고침할때마다 계속 바뀌는데 뭘 수정하면 바뀌는 건가요?
      블로그 아이콘이나 이미지를 변경해봐도 그대로네요

      • BlogIcon 뭐하라
        2017.03.29 00:39 신고

        블로그이미지입니다 브라우저 캐시때문에 안바뀔수있으니 이미지변경후에 캐시삭제해보세요

      • BlogIcon alpacaman
        2017.03.29 01:04 신고

        제 댓글 좌측의 아이콘은 제대로 바뀌는데 드로워 최상단에 있는 파비콘이 바뀌지 않습니다.
        새로고침할때마다 사진이 랜덤으로 계속 바뀌는데. 예를 들어 비행기 아이콘으로 바뀌면 비회원으로 달린 댓글 아이콘들도 전부 똑같이 비행기로 바뀌네요
        캐시 삭제해도 마찬가지인데 플러그인 문제인가요?

      • BlogIcon 뭐하라
        2017.04.06 19:30 신고

        비회원 아이콘은 의도된부분입니다~

    • BlogIcon 블랙커피&B
      2017.04.06 19:21 신고

      좋네요 잘쓰겠습니다 ^^

    • BlogIcon 구로댁
      2017.04.20 21:13 신고

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


    • 2017.04.28 19:33

      비밀댓글입니다

    • BlogIcon 옹봉이
      2017.04.29 02:22 신고

      이쁜 스킨 감사합니다. 티스토리 기본 #1 사용하다가 너무 맘에들어서 바꾸게 됐어요.

      moreless를 가운데 정렬 하고싶은데 포스팅 작성할때 <div align=center>로 하면 더보기 버튼은 가운데로 오는데 아래쪽 닫기 버튼이 오른쪽으로 밀리네요.
      css편집 가서 .moreless_bottom{text-align:center}를 추가해도 안되는거 같은데 어떻게 해야할까요?

      그리고 사이드바를 활용하려면 아래로 내려갈 일이 많아서 toTop 아래 toDown도 추가하고 싶은데 HTML편집에서는 불가능한가요?

      • BlogIcon 뭐하라
        2017.04.29 16:34 신고

        css에
        [class^='moreless'] {
        text-align: center;
        float: none;
        }
        이렇게 넣으시면 뒤아래 둘다 될겁니다.
        toDown은
        <div id="toBottom" class="iconbutton ripplelink" onclick="$('body,html').animate({scrollTop:$('body').height()},150);"><i class="ic-keyboard_arrow_down"></i>
        </div>
        를 toTop이 들어간 위치에 넣으시고 toTop이랑 위치조절은 css통해서 하시면될것같습니다
        #toBottom {
        display:fixed;
        rignt:0;
        bottom:0
        }

    • BlogIcon 옹봉이
      2017.04.30 00:39 신고

      에고 친절하게 답변 달아주셨는데 moreless는 마찬가지로 위에 꺼는 가운데로 오는데 아래 닫기 버튼이 우측으로 가네요.
      toDown은 toTop이랑 겹치는 위치에만 노출이 되고 다른 위치에서는 어딘가에 가려진건지 보이지가 않아요.

      • BlogIcon 뭐하라
        2017.04.30 00:41 신고

        none뒤에 !important를 붙여보세요
        toDown위치는 bottom옆에 0을 30px 이런식으로 조절해보세요

    • BlogIcon 옹봉이
      2017.04.30 00:56 신고

      와 바로 답변 주셨네요 감사합니다. !important 넣으니 되네요.
      toDown은 right:3px; bottom:40px; 정도에 toTop이랑 겹치는 부분만 마치 클리핑 마스크 한거처럼 보이고 아예 다른 위치인 right:10px; bottom:40px; 정도로 맞추면 완전 안보이네요.

      • BlogIcon 뭐하라
        2017.04.30 01:02 신고

        다행이네요 여유되면 제대로된 위아래로 이동버튼 강좌만들어 올리겠습니다

      • BlogIcon 뭐하라
        2017.04.30 16:05 신고

        강좌 올렸으니 참고해보세요

    • BlogIcon 옹봉이
      2017.04.30 01:15 신고

      강좌까지 신경써주시고 너무 감사드려요~

      너무 번거롭게 해드려서 죄송하지만 혹시 사이드바가 화면 사이즈에 따라 2단에서 1단 변형하는거 처럼
      본문을 내용을 2단으로 작성하려고 하는데 표를 2단으로 작성하고 모바일에서 1단으로 변형되게끔 할수도 있을까요?

      • BlogIcon 뭐하라
        2017.04.30 09:56 신고

        본문2단은 쉽지가않습니다 스킨에서만한다고 되는게아니고 글쓸때도 html css를 이해하고 작성해야해서요

    • BlogIcon 컴터의광
      2017.04.30 05:01 신고

      우선 좋은 스킨 감사합니다 ^^
      마음에 들어서 새벽에 이래저래 손보고 있는데 게시글 목록의 제목을 키울 수 있는 방법을 잘 모르겠네요 ㅠㅠ
      스킨은 올려주신 거 그대로 업로드 해서 사용하고 있습니다

      • BlogIcon 뭐하라
        2017.04.30 13:04 신고

        글자크기조절 강좌링크가 있는데요,
        거기서 body나 .article대신
        .entryList .title 를 넣어서 적용하시면됩니다


    • 2017.04.30 14:27

      비밀댓글입니다

      • BlogIcon 뭐하라
        2017.04.30 14:42 신고

        h태그를 쓰지않거나
        css에 h1,h2,h3,h4,h5 {border:none;}을 추가해보세요

    • BlogIcon 바이퍼워터
      2017.04.30 15:25 신고

      <"카테고리 이름" 관련 글>을 리스트 형식으로 나태낼 수는 없을까요?

      • BlogIcon 뭐하라
        2017.04.30 15:26 신고

        html에서 related post관련부분을 찾아 지우고 플러그인에서 카테고리다른글 쓰시면됩니다
        <s_article_related>부터
        </s_article_related>까지입니다


    • 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버전 인가요?

티스토리 툴바