본문 바로가기

새로운 소식/스킨 (Skin)

Moving Box 스킨 3종 오픈 안내!

안녕하세요. TISTORY 입니다.

요즘 날씨가 너무 좋아서 봄이 언제 왔는지도 모르게 여름이 오고있다는 생각이 많이 들게 합니다. 외출을 하시면서 피어있는 벚꽃이나 철쭉 구경들은 많이 하셨는지 궁금합니다. 기분도 좋고, 뭔가 새롭게 시작하고 싶다고 마음이 생긴다면 이번 기회에 새로운 티스토리 스킨으로 옷을 갈아입어 보는 것은 어떨까요?

이번 스킨의 고민은 "브라우저 크기가 다른 상황에서도 누구든지 예쁘게 블로그를 볼 수 있는 스킨"은 없을까? 라는 생각에서 시작되었습니다. 이번 스킨은 본인의 브라우저 사이즈 (가로 사이즈 해상도)에 따라 2단 또는 3단으로 변형되는 스킨으로 매우 심플한 디자인으로 콘텐츠가 잘 보일 수 있도록 제작되었습니다.


Moving Box 스킨 공개!

이번에 소개된 Moving Box 스킨은 아래에 보시는 것과 같이 해당 블로그를 보고 계시는 사용자 컴퓨터의 해상도에 따라 2단 또는 3단으로 변형됩니다. 해상도가 큰 모니터를 사용하시는 분들은 3단형 스킨으로 보이고, 보통 또는 작은 해상도의 모니터의 경우에는 2단으로 보여지게 됩니다.

고해상도 (3단형)

고해상도 (3단형)

저해상도 (2단형)

저해상도 (2단형)



기존 3단형을 쓰시면서 본문 폭이 너무 좁은 것 같아 고민하셨던 분들, 혹은 해상도가 높은 모니터를 사용하셔서 작은 모니터에서 늘 스킨이 조금 잘려서 나오는 경우가 있어서 고민하셨던 분들이라면 한번 도전해보세요! 

이 스킨 특징은 ▼
  • 레이아웃 : 사용자의 모니터에 따라 2단 또는 3단 (사이드바 구성은 3단형을 기본으로 합니다.)
  • 색상 : 초여름 같은 느낌의 그린, 따뜻한 브라운, 세련된 블랙 3가지를 준비하였습니다.
  • 최적화된 본문(글쓰기 영역) 사이즈 : 전체 사이즈는 1178px이며, 본문은 620px 입니다.
  • 스킨위자드 : 배경 색/이미지, 타이틀 이미지 교체, 게시글 폭넓이 폰트 지정 등 가능합니다.
  • 저작권 : 티스토리 내에서 다시 수정, 재배포 가능합니다.
  • 설명 : 웹표준을 준수한 XHTML 기반의 스킨입니다. 시맨틱한 웹을 유지하기 위해 디자인 부분을 style.css 파일에 독립시켜 적용하였으며, 가로 사이즈는 1178px이며, 자유롭게 디자인을 수정하실 수 있습니다. 이 스킨은 IE 6, 7과 파이어폭스2 에서 최적화되었습니다.


Green

Green

Brown

Brown

Black

Black



심플하고 멋진 스킨으로 내 블로그를 변신시켜 보시면 어떨까요?
앞으로도 더욱 즐겁고 예쁜 티스토리로 찾아뵙겠습니다.

감사합니다. 모두 즐거운 주말되세요!





  • 이전 댓글 더보기
  • 2008.04.19 00:29

    비밀댓글입니다

  • 루미넌스 2008.04.19 00:46 신고

    스킨 바꿔야겠군요..
    바꾸면 또 편집 해줘야겠군요.. 각종 스크립트와 메타태그 등..
    귀챦..;;;

  • 금빛 2008.04.19 10:27 신고

    자꾸 본글아래로 내려 같다가 옆으로 오네요.
    이런 무빙은 아닐텐데...쩝

  • 금빛 2008.04.19 11:25 신고

    사이드가 본문 아래로 가는데 본문 제목에 날짜 나오기 전까지 사이드가 아래 내려갔다가 날짜 나오면 사이드로 오네요. 어떻게 해결 해야 하나요?
    본문제목에 나오는 날짜는 어디서 로딩되길래 늦나요?

  • esstory 2008.04.19 12:16 신고

    스킨은 정말 좋은데 해상도에 따라, 브라우저에 따라 사이드바가 사라지는 문제가 있습니다. 가로 사이즈가 모자라는 것도 아닌데 사이드바가 통채로 아래로 가버리네요.
    자동으로 2단, 3단으로 변경되다 보니 어느정도 감수해야 할 부분인것도 같은데, 이 스킨 사용하시는 분들은 1024, 1280 등에서 꼭 테스트 해 보세요

  • Bengi 2008.04.19 20:44 신고

    꽤 괞찬은 것 같아요..
    다만 자진이 브라우져 마다 짤릴거라는 생각이 드네요 ;;

  • iF 2008.04.20 11:25 신고

    이게 head에 스크립트 부분만 삭제하면 자동으로 3단 스킨이 되는 건가요? 크기 조절없이 2 또는 3단으로 가운데 정렬 시키는 방법 아시는 분 답변 부탁 드려요~

  • 곰단지 2008.04.20 13:01 신고

    깔끔하네요.티스토리 스킨은 깔끔을 많이 지향하는 듯? ^^

  • hanahachi 2008.04.22 07:27 신고

    클리닝~!! 와우!~?

  • @naerro 2008.04.23 19:57 신고

    트랙백 사이즈가 커서 트랙백 걸린 글의 오른쪽 영역이 짤려 보입니다.
    제가 스스로 수정하기는 했는데....좀 더 신중을 기해서 스킨을 만들어 주셔야 할듯 합니다.

  • 호아범 2008.04.23 21:01 신고

    또 바꿔야겠군요. 2단만 고집하다가 미친척하고 갤러리 스킨으로 바꿨었는데, 불편한듯 하여 이걸로 써야겠습니다.

    • 콜드레인 2008.04.24 14:59 신고

      Crazybar님 답변감사합니다.
      그런데... 그렇게 하면 기존의 스킨이랑 이미지 파일명 같은것들이 달라서 충돌이 일어나지 않을까요?

  • EnJI 2008.04.29 00:32 신고

    스크립트 문제인지 무슨 문제인지, 첫 접속후
    사이드 바가, 본문의 페이징 아래에 죄다 내려가 있는데
    몇 분 지나야 계산이 끝나는 지
    제자리(사이드)로 오는데요.

    무빙 안해도 좋으니, 2단으로 고정시켜 쓰고 싶은데
    css를 손보려해도 도통 복잡하게 되어있어서...
    난감하네요.

    • 비나와라 2008.04.30 16:18

      [무빙기능 없애기]
      skin.html 상단에 자바스크립트 부분에서

      function pageLoad(){
      imgDate();
      }

      이렇게 호출되는 함수 두개를 지워버리시고~
      style.css에서 body.column2 #wrap을 찾으셔서 아래처럼 고치시면 끝입니다.

      background:url("images/bg_wrap2.gif")
      (지금은 bg_wrap.gif로 되어있는 듯...)

  • 채소밭 고구마 2008.04.29 09:09 신고

    아주 색감이 맘에 듭니다...
    그런데 본문의 사진이 짤리는 .. ( 워낙 사진이 중구난방이라... ㅠㅠ ) 현상으로
    어쩔수 없이 3단을 2단으로 맞추어 사용중입니다...
    그러나.. 적용이 쉽게 되더군요.. 맘에 들어요.. 감사합니다... 꾸벅..

    그런데.. 이건하나 있었으면 하는것이 있습니다...
    네이버 블로그에 보면, 게시글 목록을 검색 할때 본문 및 전체가 새로고침이 아니라.. 게시글 목록만.. 고침이 됩니다. 이 좋은 기능이 여기에도 있었으면 합니다.. 그러면 더 빠르고 안정적인 블로그 환경이 될것 같아요... 네이버블로그보다.. 아쉬운점... 이였습니다.

  • 장대군 2008.04.30 09:40 신고

    글을 적었던 것 같은데...

    좋은 스킨 잘 적용해서 사용하고 있습니다.

    메인사진의 상단에 검색창이 나오는데

    위치를 바꾸거나 없앨 수 있는 방법을 알고 계시면 답변 좀 부탁드립니다.

    항상 감사합니다. 티스토리!!

    • 비나와라 2008.04.30 15:55

      없애는게 위치 이동보다 간단할 것 같습니다.

      skin.html에서 아래 내용을 찾아서 삭제하시면 되겠습니다~

      <div class="module_search">
      <div class="input_box">
      <input type="text" name="search" id="searchKeyword" value="" onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25'); return false;}catch(e){} }" class="input_search" />
      <input value="검색" type="image" src="http://cfs.tistory.com/custom/blog/12/126598/skin/images/btn_search.gif" onclick="try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25'); return false;}catch(e){}" class="input_btn" />
      </div>
      </div>

    • 장대군 2008.05.01 12:38 신고

      비나와라님 진심으로 감사드립니다...^^;

  • OkVin 2008.05.02 05:26 신고

    이 스킨을 사용하시는 님들이 많으시네요.
    색감이 좋아서 맘에 들어요 ^^

  • 장대군 2008.05.10 17:00 신고

    태그 색상을 바꿀 수 있는지 알고 싶습니다.

    어떻게 바꾸는지 방법도 알고 싶구요...^^;;

    알고 계신분은 꼭 알려주시길 부탁드립니다..!!

    • 비나와라 2008.05.13 23:51

      스킨편집에서 style.css를 편집하시면 됩니다.
      태그는 각 포스트 아래와 사이드바, 그리고 상단에 Tag 메뉴에 나타나죠. 하나씩 보면...
      1) 각 포스트 하단 태그 색상 변경
      .article .article_tag a { color: #ffffff; }

      2) 상단의 Tag 메뉴 및 사이드바의 태그 색상 변경
      /* 태그 클라우드 */
      .cloud1, .cloud1:hover {color: #5c72bd !important; font-size: 1.4em; font-weight:bold;}
      .cloud2, .cloud2:hover {color: #5c72bd !important; font-size: 1.2em; font-weight:bold;}
      .cloud3, .cloud3:hover {color: #5c72bd !important; font-size: 1.1em; font-weight:bold;}
      .cloud4, .cloud4:hover {color:#5f5f5f; font-size: 1em; font-weight:bold;}
      .cloud5, .cloud5:hover {color:#565555; font-size: 0.9em; }

      color: 값을 변경하시거나, font-size를 변경하시면 되겠습니다.

    • 장대군 2008.05.14 11:04 신고

      좋은 팁 알려주셔서 진심으로 감사드립니다.
      비나와라님...^^; ㅜ.ㅜ

    • 장대군 2008.05.14 14:24 신고

      그런데 죄송하게도 제 블로그에 적용 해 보니...

      한 번 오셔서 보시면 아실거에요...^^;

      제일 큰 태그만 적용되네요...

  • 지나가다 2008.05.17 09:07

    스킨을 좌측 정렬에서 가운데 정렬로, 그리고 항상 2단으로 고정하고 싶은데, 어찌하면 되는지요

  • BLUE'nLIVE 2008.05.23 15:49 신고

    이 스킨의 버그가 비밀글 체크를 하고 댓글을 달아도 비밀글이 되지 않는다는 점이더군요.
    (버그 리포팅은 이미 되어 있더군요)
    혹시 수정이 되었나요?

    그리고, 스킨을 대폭 수정한 지금 와서 뭔가를 테스트할 수는 없을 것 같은데 제가 뭘 수정해야 하는지도 알고싶습니다.

  • yueisu 2008.09.29 11:54 신고

    깔끔한 스킨입니다. 저도 적용을 시켰습니다만, 게시글 본문의 링크부분 텍스트 색이, 구분이 않되는군요. 링크부분의 텍스트 색을 바꿀 순 없는지요?

  • Funny Quotes 2010.11.24 19:45

    버그 수정방법을 포스팅했습니다.
    트랙백을 확인해주시기 바랍니다.