미디움틱 티스토리 테마, Tirium을 드디어 공개하게 되었습니다.


반응형 디자인

Tirium은 반응형 웹 디자인을 통해 어떤 크기의 화면에서도 완벽한 Tirium의 스타일을 보여줍니다.

반응형 디자인이미지 뿐만 아니라 유튜브에서 가져온 영상 자료도 화면에 대응하여 크기가 조절됩니다.

사이드 캡션

캡션의 위치를 이미지 왼쪽 상단에 배치함으로써 가독성을 높였습니다.

사이드 캡션모니터 상에서는 왼쪽 상단에서 태블릿이나 스마트폰 화면에서는 하단에 나타나게 됩니다.

애니메이트 사이드바

애니메이트 기능으로 사이드바를 유동적으로 숨김으로 인해 콘텐츠에 더욱 집중할 수 있습니다.

애니메이트 사이드바글을 읽는 외의 것들은 최대한 간추려서 필요한 기능만 표시하고 나머지는 사이드바와 함께 숨겨집니다.

원버튼 쉐어

글 상단의 share버튼을 통해 간단하게 페이스북, 트위터, 구글플러스에 공유할 수 있습니다.

원버튼 쉐어기존 티스토리 내에서 제공되는 것보다 다양한 플랫폼을 지원합니다.

간단한 글쓰기와 관리

상단의 직관적인 아이콘을 클릭하여 쉽게 글을 쓰고, 관리자 패널에 접속할 수 있습니다.

간단한 글쓰기와 관리기존에 우상단 내비에서 글을 쓰고 관리자 패널을 접속하는 것이 아니라 바로 아이콘을 통해 간단히 해결할 수 있습니다.

독특한 마우스 오버 효과

이미지에 마우스를 올리면 이미지가 원위치에서 한번 튕겨주면서 글을 읽을 때 이미지를 한번 더 환기시켜 줍니다. (Tirium 0.84b 예정)

이미지에 마우스를 올리면 흐림 효과가 나타나면서 글을 읽을 때 이미지를 한번 더 환기시켜 줍니다.(Tirium 0.83b 현재)

이미지에 마우스를 올리면 색상톤이 변화를 줌으로써 글을 읽을 때 이미지를 한번 더 환기시켜 줍니다. (~ Tirium 0.82b)

독특한 마우스 오버 효과마우스를 오버하면 색상톤이 변하며, 마우스를 떼면 천천히 원래 색상으로 돌아옵니다.

기존과는 다른 폰트 배치

네이버에서 제공하는 나눔 명조와 나눔 고딕을 사용하여 가독성을 높였으며, 기존의 제목=고딕, 본문=명조 공식을 탈피하여 제목은 명조, 본문은 고딕으로 구성하였습니다.

기존과는 다른 폰트 배치본문에 가독성이 좋은 고딕을 이용해서 좀더 독자들을 콘텐츠에 집중할 수 있도록 하였습니다.

심플한 댓글 디자인

원형 아바타와 함께 깔끔한 디자인을 차용한 댓글 영역

댓글 디자인게스트일 경우의 아바타와 관리자일 경우 아바타가 다릅니다.

- Tirium은 블로그 플랫폼 Medium에 영감을 받아 만들어졌습니다.

- Tirium의 디폴트 배경화면의 저작권은 제작자 본인에게 있습니다.

- Tirium의 폰트는 구글 폰트를 통하여 나눔고딕, 나눔 명조를 호스팅 받았습니다.

- Tirium은 기본적으로 CC 4.0 License를 따르며 상업적 이용을 제외한 변경/수정 가능(CC BY-NC 4.0) 합니다.


Tirium 0.81a 업데이트 로그 (June 17th 2014)

- 에디터에 따라 이미지 캡션 위치가 다르던 문제 수정

- share this post 버튼이 비활성되는 문제 해결

*** Tistory가 제공하는 Youtube 플러그인을 Tirium에서 지원할지 여부는 아직 미정입니다. Youtube를 첨부할때에는 직접 Youtube의 공유에서 소스코드탭의 소스를 복사하셔서 html상에 붙여넣는 것을 권장드립니다.

Tirium 0.82b 업데이트 로그 (July 11th 2014)

- 예전 에디터에서 작업했던 링크에 스타일이 제대로 적용안되는 문제 해결

- 댓글에서 사용자 아바타 중복 현상 해결

- 이미지 캡션에 Italic효과 추가

- 웹페이지 타이틀에 글 제목이 표시되지 않는 현상 해결

- 제목 글자 1줄 이상 늘어나는 경우 아바타와 아이콘이 밀리는 현상 해결

*** 전에도 계속 문의가 들어왔던 마우스 오버효과의 제거는 고심한 결과 이번 버젼의 티리움에는 포함되지 않았습니다. 다음 업데이트때 마우스오버효과가 있는 것과 없는 것 두버전을 내놓을지 어떠할 지는 앞으로 좀더 지켜본 후 결정하도록 하겠습니다.

**그동안 드러났던 메이저 버그들은 잡은 대대적인 업데이트이기에 기존에 티리움을 사용하셨던 분들도 새로 받으시는 걸 권장드립니다.

Tirium 0.82b fix 업데이트 로그 (July 20th 2014)

- 에디터에서 강제 적용되는 폰트 크기 태그로 인해 글자가 불규칙해지는 현상 해결

- 이미지 캡션 이탤릭 효과 적용안되는 상황 수정

- 푸터 저작자 네임 위치 수정

** 티스토리 에디터로 글을 쓸때 강제로 style태그가 적용되며 "transparent:100%; font-size: 9px;"가 적용되던 현상을 임시로 해결했습니다. 후에 좀더 보완해서 업데이트 할 예정입니다.

Tirium 0.83b 업데이트 로그 (December 1st 2014)

- 페이징 버튼 수정

- 푸터 CC 4.0 라이센스 표기

- 이미지 호버 효과 변경: Hue Change-> Blur

- 모바일 화면에서 이미지 캡션: 오른쪽 정렬->가운데 정렬

- 아티클 하단에 글쓴이 프로필 추가 (설정화면에서 수정 가능)

- Tirium 스킨 설정 가이드 업데이트

** 이번 업데이트는 기타 자잘한 기능 추가에 초점이 맞춰졌습니다. 오랜 휴식기 후에 나오는 업데이트이기에 기능 수정보다는 새로운 기능추가에 초점을 맞췄습니다. 전부터 이견이 갈렸던 마우스 오버효과는 Blur 효과로 대체하였고 이제부터는 글쓴이 정보를 하단에 나타낼 수 있게 되었습니다.

다운로드 링크

Tirium_Tistory_Theme_v0.83b.zip

적용 예시

확인하기

설치 및 필수 설정 가이드

확인하기

비하인드 스토리

확인하기

저작자 표시 비영리
신고

WRITTEN BY
강수명 Vanns Kang
하고 싶은거 하고 사는 조금은 잘 빡치는 평화주의자

댓글  367개가 달렸습니다.
  1. 이전 댓글 더보기
  2. 비밀댓글입니다
  3. 좋은 스킨 감사합니다. 티스토리 시작하게 되었는데 마음에 들어서 쓰게 되었어요.
    아직 HTML 같은 것을 다룰줄 모르는데 티스토리를 접하게 되니 어렵네요. ㅎㅎ
  4. 멋진 스킨 감사합니다~
  5. 스킨 멋져요!! 잘 사용하겠습니다 감사합니다!!
  6. 스킨 멋집니다 ~ 잘사용 하겠습니다 ~!
  7. 멋진 스킨 만들어 주셔서 감사합니다
    한가지 궁금한 게 있어서 글을 남깁니다.

    블로그를 방문하였을 때 블로그 이름 소개가 있는 커버 사진을 교체하고 싶어서
    관리자 모드에 들어가 살펴 보았지만 찾지를 못했습니다
    블로그 메인 커버사진 변경하는 방법 좀 알려주시면 감사하겠습니다 :-)
    • 정말 맘에 드는 스킨을 찾앗습니다.... 메인 커버사진 바꾸는 방법을 알려주시면 정말 좋겟습니다....부탁드려요~~~
  8. 스킨구경하고 갑니다. 처음 시작하는 블로그인데, 이 스킨을 활용하면 멋진 블로그를 만들 수 있을 것 같네요!
    현재 페이지에서 사용하고 계신 폰트 알 수 있을까요?

    알려주시면 감사하겠습니다!
  9. 너무예뻐서 스킨을 사용하려하나...
    완전초자는
    너무 어렵습니다
    설치가이드에서 다운로드는 하였는데
    2번 skin.html을 복사해서 html에서 첫번째 빈칸에 복사해서 붙이라는데...
    첫번째 빈칸이 어디인지...10번줄을 말하나요?
    두번째빈칸은 css에서...8번줄을 말하나요?
    나머지는 파일업로드창에서 업로드를 어떻게 해야하는지 ...
    궁금합니다
    • html란 전부 비우시고 확장자.html안의 내용들 전부 복사 붙여넣기 하시면 됩니다.
      두번째 css도 마찬가지로 설정화면의 css내용이 있다면 전부 비우시고 이분이 올려놓으신 .css안의 내용을 복사해서 넣어주시면 됩니다.
  10. 안녕하세요 스킨 잘 적용해서 사용하고 있는 데요!
    제가 카테고리로 접속을 하면
    'Capture/그 외'???대떦?섎뒗 湲€ 1嫄?/span>
    이런 오류문구가 뜨는데 어떻게 없애나요?ㅠ
    Capture와 그 외는 카테고리명인데 그 옆에 이상한 글자들과 함께
    카테고리 접속시 너무 상단에 크게 떠서 ㅜㅜㅜㅜ
  11. 프로필에 사진 등록하는 소스가 대강 어디쯔음에 있는지 알려주실 수 있으신가요
  12. 스킨 잘 사용하겠습니다^^ 감사합니다.
  13. 선생님~~~ 정말 좋은 스킨 맘에 듭니다.... 메인 이미지 교체하는 방법 알려주시면 더없이 좋겟습니다~~~~
  14. 이것저것 시도해보고 스킨적용했어요. 정말 잘 사용하겠습니다. 고맙습니다.

    댓글중에 참고했던 내용,
    마우스오버효과 변경
    <div id="overlay" style="display:none;position:fixed;top:0px;left:0px;z-index:150;width:100%;height:100%;"></div> 에서 z-index;150을 0으로 바꿈

    스킨 사용 시 한가지 주의할 점
    skin.html에 meta tag로 description과 author이 티리움 default로 지정되어 있으므로
    author의 경우 페이스북 링크 공유와 같은 상황에서 포스트 "작성자"가 vanns kang님으로 출력되니 유의해서 사용
    <meta name="author" content="Vanns Kang">으로 된 부분을
    <meta name="author" content="YoWu">와 같이 자기 이름으로 수정하시고, 이미 한번이상 공유되어 페이스북 캐싱이 되신분들은 https://developers.facebook.com/tools/debug/ 에서 게시물 주소 넣으시고 Debug 버튼 누른후 fetch new scrape information 버튼 누르셔서 캐싱을 새로 해주시면 작성자가 제대로 나타날 듯 합니다.

    페이지창 제목에 <s_page_title>이 나오는데 수정할 수 있는 방법
    html에서 컨트롤 f를 누른후 <s_page_title>~ </s_page_title> 부분을 찾아 삭제하고 그 앞에 있는 ##_tilte_##을 <##_page_title_##>로 바꿔주세요

    사진에 마우스 올려지면 흐려지는 효과 없애는 방법
    tiriumContent.css 파일안에
    -webkit-filter:blur(5px) 이부분 찾아서 5를 0으로 수정하면
    블러효과가 꺼집니다.
    • 와우 스킨을 정말 이쁘게 적용 하셨습니다 ^^ 한가지 더 이스킨이 모바일 에서 오른쪽 사이드바 출력시 페이지 스크롤을 하면 저절로 닫히는 버그가 있더군요 그점은 혹시 해결 하셨나요? 사이드바 메뉴를 짧게 적용하시는 분들은 상관 없겠지만 저처럼 길게 잡는 사람들은 불편함이 있더군요..
  15. 혹시 제 글 보면 다 글자간 줄 간격이 너무 큰데; 이거 어떻게 수정할 수 있을가요 ??ㅠㅠ
  16. 안녕하세요 스킨이 너무 예뻐요^^ 정말 감사합니다!
    혹시나 스킨 메인 이미지를 바꾸는 방법이 있다면 알고 싶어요 ㅠㅠ
    알려주시면 정말 더더 감사합니당^^
  17. 스킨 잘쓰고있어요:> 이런 깔끔한 스킨을 무료로 사용할수 있어 기뻐요.
    포스팅 넓이를 혹시 조절 가능할까요? 글을 길게 쓰고싶은데 조금 쓰면 다음줄로 넘어가서요..
    혹은 스크롤이 생기거나 ...
  18. 잘쓰고 있습니다. 상단 메인배경 높이조금 줄이고싶은데요. 방법이 없을까요??
  19. 감사합니다. 현재 너무 잘 사용하고 있습니다.
    사용상 한 가지 조언을 구하고자 여기까지 길을 찾아와 글을 남김니다.
    구글 serch console과 티스토리 연결을 할려니
    다음 사이트의 소유권을 확인하지 못했습니다. http://www.habiz.tistory.com/
    라는 메세지가 계속적으로 뜸니다.
    메타태그 HTML추가방법과 HTML파일 업로드 방법을 수 없이 해보았으나 '실패했습니다'라는 메세지입니다.
    Vanns Kang님의 도움을 받고져 이렇게 글을 남김니다.

    제 티스토리 블로그입니다.
    http://www.habiz.tistory.com
    꼭 좀 도움 부탁드립니다. 수고하시고요~
  20. 비밀댓글입니다
  21. 먼저 훌륭한 스킨을 제공해주셔서 감사드립니다.

    왼쪽 상단 메뉴를 펼침에서 자동으로 닫히는 현상이 발생합니다. 메뉴가 긴 경우 볼 수 가 없어 보완하는 방법이 없을까요?

    그리고 글자색, 글자링크, 글가크기, 글자간격등 수정할 수 있는 폴더 위치가 어디인지 알져주시면 정말로 고맙겠습니다.

    무더위 건강 유의하세요.
secret