작성일자
카테고리 CMS/티스토리 가이드



현재 티스토리 블로그가 커스텀 모바일 스킨을 지원하지 않고 모든 포털 사이트의 블로그가 그렇지만 모바일로 접속하면 일방적인 디자인으로 나타나고 있습니다. 저는 워드프레스 책을 쓰고 있는데 9월에 워드프레스 책이 쏟아져 나온다고 합니다. 제 책도 그 즈음에 나올 것이고 자유로운 디자인이 가능한 워드프레스 블로그가 많이 출현할 듯 합니다. 티스토리도 하루 빨리 커스텀 모바일 스킨이 가능한 제도 변경을 바라면서 워드프레스에 적용할 디자인을 공개합니다. 물론 워드프레스는 페이지도 만들 수 있기 때문에 블로그가 아닌 일반 웹사이트도 만들 수 있어서 디자인이 아주 달라질 것입니다. 티스토리는 제한이 있기에 위와같은 모양으로 밖에 나오지 못합니다. 


이 스킨에 사용된 트위터 부트스트랩은 하나의 플랫폼입니다. 웹디자인에서 사용되는 각종 요소에 대해서 미리 아이콘 이미지와 CSS를 만들어 놓고 HTML 페이지에 코드와 스타일시트 선택자만 삽입하면 디자인이 만들어지며 CSS에 숙달된 분이 아니더라도 멋진 디자인을 만들 수 있습니다. 기존의 스킨에서 사용된 모든 CSS를 지우고 HTML코드에 선택자만 삽입하더라도 추가적인 CSS는 필요없을 정도입니다. 다만 내가 원하는 디자인을 만들기 위해서는 조정이 필요하여 스타일시트를 추가해주면 됩니다.


부트스트랩은 모바일 디자인을 겸하고 있습니다. 스타일스트가 두개 있는데 하나는 기본 디자인용이고 하나는 모바일 전용이므로 스크린 사이즈에 따라서 웹페이지의 내용도 달라지도록 설계돼서 반응형(Responsive) 디자인이 바로 가능합니다. 이러한 반응형 디자인이 가능한 것은 HTML5와 CSS3로 인한 것입니다. 


HTML5가 발표될 때 2022년에 가서야 표준으로 승인될 예정이었으나 스마트폰의 영향으로 2014년에 표준으로 승인될 전망입니다. 표준으로 승인되기 위해서는 최소한 두개의 웹브라우저가 HTML5의 요건을 만족해야하는데 현재 구글 크롬과 파이어폭스가 계속 버전업되면서 작년 이후로 열단계 이상의 업그레이드 됐습니다.


그래서 소개하는 스킨도 HTML5와 CSS3를 기준으로 만들어졌고 인터넷 익스플로러 7,8 버전에서는 작동이 원활하지 않습니다. 하지만 이들 브라우저에서도 최소한의 기본 레이아웃은 나타나도록 하기 위해서 IE 핵을 삽입했습니다.


트위터 부트스트랩은 사용해보면 참 놀라운 도구입니다. 앵커태그에 정해진 클래스 선택자만 삽입해도 버튼이 만들어지고 <i class="icon-home"></i>만 삽입해도 아이콘이 추가됩니다. HTML코드에 이미지태그를 삽입하고 이미지를 추가만 해도 애니메이션 배너가 만들어집니다. 이외에도 툴팁, 탭기능 등 웹디자인에 필요한 모든 기능이 이미 만들어진 자바스크립트와 CSS로 가능해졌습니다. 외국에서는 이미 대세로 자리를 잡아가고 있어서 혹자는 이러한 디자인은 진정한 디자인이 아니고 웹디자이너를 게으르게 만든다고 우려의 목소리도 나올 정도입니다. 


트위터 부트스트랩으로 만든 디자인은 버튼 색상이나 아이콘이 같아서 웹 페이지를 보면 부트스트랩으로 만든 것이라는게 바로 눈에 띕니다. 그래서 색상을 원하는 대로 변경할 수 있는 웹사이트도 생겨나고 이 플랫폼과 관련된 여러가지 부수적인 현상이 나타나고 있습니다. 이제는 CSS의 기초지식만 있어도 블로그 스킨 만들기가 쉬워질 것 같습니다. 저도 몇시간만에 스킨을 만들었고 원하는 디자인을 만들기 위해 튜닝하느라고 며칠은 걸렸습니다. 


소개드리는 스킨을 사용하시려면 이전(http://martian36.tistory.com/950)글을 참고하시고 이전 글에 없는 내용에 대해 설명드립니다. 


데모 블로그입니다.--> http://explorer36.tistory.com/


이곳에 사용 조건이 있습니다. --> http://martian36.tistory.com/1069


1. 캐러젤 슬라이딩 배너


블로그 상단에 슬라이드 배너가 있습니다. 이미지가 회전목마처럼 순차적으로 나타난다고 해서 캐러젤이라고 합니다. 배너의 하단에는 이미지의 제목을 넣을 수 있습니다. HTML편집창 상단 부분에서 2의 h4태그를 수정하면 되고 설명을 넣으려면 3의 빈칸에 <p>태그를 이용해서 글을 입력합니다. 이미지를 추가하려면 4의 코드를 복사해서 5의 빈칸에 붙여넣은 다음 이미지를 가로 1170*180픽셀로 만들어 파일을 업로드한 다음에 파일이름을 변경해줍니다. 파일이름은 어떤 것으로 해도 상관없지만 관리의 편의를 위해 banner4로 합니다. 


위 배너를 사용하지 않으려면 1의 빨간색 박스 부분을 제거하거나 주석처리하고 6과 7의 주석처리부분을 제거하고 스타일시트에 .head-container {padding:20px;}를 입력하면 블로그 이름이 나타나면서 공간이 만들어집니다.


2. 이동하는 뷰온 버튼



본문의 좌측에 보면 스크롤하면 따라다니는 뷰온 버튼이 있습니다 HTML편집창에서 Ctrl+F키를 눌러 id="floating-box"으로 검색해서 찾은 다음 2부분에 자신의 블로그 아이디를 입력합니다. 뷰온 버튼 추가하기는 이곳(http://martian36.tistory.com/656)을 참고하세요. 뷰온 버튼과 같이 있는 화살표는 페이지의 상하로 이동할 수 있습니다. 이 뷰온 버튼은 넓은 화면의 모니터에서만 나타나도록 했고 좁은 화면에서는 보이지 않을 수도 있으므로 나타나지 않으니 오류는 아닙니다.


3. 구글 광고 삽입




이 스킨에는 본문에 구글광고를 두개 삽입할 수 있습니다. 1의 728*90에 해당하는 광고 코드를 삽입하고 주석처리를 제거합니다. 2에는 해당 사이즈의 광고를 넣고 마찬가지로 주석처리를 제거하면 광고가 나타납니다. 사이드바에도 300*250 사이즈의 광고를 넣을 수 있으며 이전 글을 참고하세요. 리더보드 광고는 화면 사이즈가 줄어들면 사라집니다.


4. 모바일 글쓰기 




이 스킨은 모바일 겸용 스킨이므로 모바일 글쓰기 링크를 추가했습니다. 글쓰기 메뉴에서 모바일 글쓰기를 선택하면 모바일 전용 글쓰기 화면이 나옵니다. PC화면에서는 입력이 안되는데 모바일에서 실험은 안해봤습니다. 




pc화면에서 글쓰기 화면은 화면이 커서 글쓰기에는 적당하지 않기 때문에 모바일 글쓰기를 삽입했습니다. 실험해보시고 이상이 있으면 댓글을 달아주세요.


스킨 파일 -->


Venusian(2013-08-11)ts-2.zip



Venusian(2013-10-25)ts-2.zip



저작자 표시 비영리 변경 금지
신고
이전 댓글 더보기
BlogIcon (◕‿◕✿)

감사합니다. 그런데 이 스킨 다른 브라우저에서는 화면 깨짐 현상이 있네요 .^^

BlogIcon 베누시안

안녕하세요. 아마도 인터넷 익스플로러 8이하 버전에서 디자인이 잘 안나올겁니다. 스킨이 순수하게 CSS로만 만들어져서 그렇습니다. IE가 웹표준을 무시한 웹브라우저라서 그렇답니다. 하지만 어느정도는 보완할 수 있으니 어느부분이 이상하게 나오는지 알려주세요. 수정해드리겠습니다.

BlogIcon 밍수니공간v

안녕하세요^^.. 다름이 아니라 베누시안님 이 스킨의 상단의 케러젤 슬라이딩 대신에 3D 슬라이더를 대신 적용해 보고 싶은데 1번설명의 배너를 없애는 방법으로 한뒤에 적용을 하면 되는것인지요??
저 자리에 그대로 적용을 하니 나타나지가 않던데...어떤 부분에 코드를 삽입해줘야 하는지요..
만약 3D슬라이더로 하게 된다면 여러곳을 건드려야 하게 되는지요?? 만약 그렇다면..제가 이쪽으로는 지식이 전무하다 싶이 해서 그냥 그대로 적용을 할려고 합니다.

BlogIcon 베누시안

안녕하세요. 3D 슬라이더의 위치와 이 스킨의 위치는 같습니다. 이미지가 나타나지 않는 것은 자바스크립트 코드가 잘못돼서 그럴겁니다. 또는 CSS가 잘못될 수도 있구요. 이들을 잘 해야 가능할텐테요.. 제가 도와드리고 싶지만 시간이 허락하지를 않네요. 죄송합니다.

BlogIcon 밍수니공간v

슬라이더 설치까지는 무사히 마쳤습니다^^;;
헌데 브라우져의 창의 크기를 줄이면 나머지는 반응을 하는데..
제가 설치한 슬라이더는 크기가 그대로 있던데..이것도 따로 소스를 적용해 주어야 하는건지요??

그리고 지금 카테고리가 왼쪽에 정렬이 되어 있는데...
이것을 우측으로 가게 할려면 어디를 고쳐야 하는도 알려주시면 감사하겠습니다^^

BlogIcon 베누시안

지식이 전무하다고 하시더니 잘 하셨네요. 이 스킨은 모바일 스킨이죠 하지만 3D 슬라이더는 반응형이 안됩니다. 플래시로 작동되는 것이라 그렇죠. 그래서 제가 이 슬라이더를 사용하지 못하고 다른 슬라이더로 바꾼거랍니다.

그리고 카테고리가 있는 부분이 사이드바인데요. 컨텐트 영역이 살아나면 사이드바가 우측으로 갈겁니다. 현재는 컨텐트 영역을 어찌 하셨는지 아무것도 안보이고 있네요.

BlogIcon Kolon

지금이랑 스킨이 좀 다르네요..? 개인적으로 베누시안님 티스토리 블로그 매일 꼼꼼히 살펴보고 있습니다 ㅎ. 근데 이런 기술적인거엔 능력이 전무하니 그저 바라만 볼 뿐이네요 ㅠㅠ... 혹시 현재 사용중인 스킨 파일좀 공유해주시면 안될까요? 아니면 유료로라두... 꼬옥 답변 부탁드려요! ㅎㅎ.

P.S. 하.... 저도 베누시안님처럼 빨리 이런 스킨을 만들어야 할텐데요 ㅠㅠ.... 현재 무/유료 배포스킨을 모두 적용해 보았지만 제마음에 드는게 없네요...

BlogIcon 베누시안

안녕하세요. 제 스킨이 마음에 드신다니 보내드리기는 하는데 사용하기가 어렵습니다. 저만 사용하려고 여러가지 변경을 해서 그렇죠. 티스토리 스킨을 좀 아셔야 설정이 자유롭습니다. 이메일을 알려주세요. 그리고 배포하시지 마시구요.

사이드바 부분은 좌우로 두개인 것이 있습니다. 사이드바 화면에서보면 총 7개의 사이드바가 나옵니다. 순서는 1, 2와 3이 좌우, 4, 5와 6이 좌우, 7은 희망나눔 부분인 푸터 영역입니다.

비밀댓글입니다

BlogIcon 베누시안

이메일이 틀립니다.

BlogIcon Kolon

관리자의 승인을 기다리고 있는 댓글입니다

비밀댓글입니다

BlogIcon 베누시안

http://martian36.tistory.com/1069 <--이곳을 참고하세요.

BlogIcon V_L

안녕하세요.. 저도 부트스트랩을 이용한 티스토리 스킨을 만들어보려고 하고 있습니다. 태터데스크 (첫페이지 만들기)를 활성화 하면 콜랩스가 작동을 안하는 것 같은데 혹시 비슷한 경험 있으셨나요?

BlogIcon 베누시안

안녕하세요 부트스트랩 책 마무리 단계에 있어서 바쁘네요. 답변이 늦어 죄송합니다. 부트스트랩의 기능이 작동되지 않는 경우는 설정이 잘못된 경우 밖에 없습니다. 설정을 제대로 하면 잘 작동됩니다.

BlogIcon 4차원섭이

2. 이동하는 뷰온 버튼 문의 입니다.
저는 티스토리 주소가 http://mapoku.co.kr 이렇게 도메인을 사서 설정을 했습니다.
실제로 다음뷰에도 위 주소로 했구요. 근데 왼쪽에 다음뷰 버튼에 숫자가 안나와서...

어떻게 해결 해야 될런지요 ㅋ

BlogIcon 베누시안

http://martian36.tistory.com/1252

위 글을 참고하세요.

BlogIcon 4차원섭이

스킨 적용되어 잘 쓰고 있습니다.

근데 덧글을 달게 되면 아이디가 두번 나오게 되는데요.. 제 티스토리 설정 문제인듯 한데 알수 있을까요?

방문자가 덧글을 달게 되면 --> 안녕 2013/08/13 11:02 [ : : ] ㅇㅇ
제가 덧글을 달게 되면 --> 마케팅코치 임섭규 마케팅코치 임섭규 2013/08/13 11:03 [ : : ] zz

참고 링크 : http://mapoku.co.kr/entry/%EC%98%A4%ED%94%84%EB%9D%BC%EC%9D%B8%EB%A7%A4%EC%9E%A5%EC%9D%98-%EB%A7%A4%EC%B6%9C%EC%83%81%EC%8A%B9-pop%EB%A7%88%EC%BC%80%ED%8C%85%EC%A0%84%EB%9E%B5%EC%9C%BC%EB%A1%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

BlogIcon 베누시안

티스토리에 관해 전반적인 사용방법을 익히셔야 될 것 같습니다.

비밀댓글입니다

BlogIcon 베누시안

방문자 수는 사이드바에서 모듈의 위치를 변경하면 됩니다. 슬라이드 이미지는 기존의 이미지와 같은 사이즈로 만들고 파일이름도 같은 이름으로 해서 업로드하세요. 그러면 기존의 이미지와 대체됩니다.

BlogIcon 보스아이

스킨 적용되었습니다. 앞으로 좋은 블로그 활동해서...
베누시안님의 노고에 보답해야겠네요.
- 블로거 파란안개 올림. ^^

비밀댓글입니다

BlogIcon 베누시안

http://martian36.tistory.com/1074

위 글을 참고하세요.

4차원섭이

지금은 캐러젤 슬라이딩 배너가 스마트폰에서 안나오는데요. 스마트폰에서도 나오게 할 수 있을까요?

BlogIcon 베누시안

이 스킨의 배너는 반응형이 안돼서 모바일에서는 나타나지 않도록 설정했습니다. 나중에 반응형으로 만들어서 내놓겠습니다.

BlogIcon 단비스

정말 멋진 스킨이네요~
바로 제 블로그에 설치해 보려고 테스트를 해보고 있는데, css 파일을 보니 애드센스 광고를 display:none으로 처리를 하던데, 이부분은 구글에서 어떤 경우에도 허용이 안된다고 하던데, 다른 방법은 없을까요?

BlogIcon 베누시안

저도 알고보니 규정 위반이네요. 지금은 시간이 안되고 나중에 수정하겠습니다.

BlogIcon 해피드래곤

우선 너무 좋은 스킨을 사용하게 해주셔서 감사합니다.
슬라이드 배너부분을 없애려고 따라해 보았지만 배포하신 스킨과 블로그 설명과는 약간의 차이가 있고
그래도 관련된 부분을 삭제하고 .head-container[padding:20px;}을 스타일 시트에 삽입하면
사이드 메뉴가 왼쪽 아래부분으로 이동합니다.
삭제한 스킨파일과 .head-container[padding:20px;} 삽입한 스타일시트 파일 2개만 보내주면 좋을텐데... 바쁘신 분에게 말도 안되는 부탁이지만 오전내내 헤매다가 답답해서 글을 쓰네요.
혹시 시간이 생기시면 terranhax@naver.com 으로 슬라이드배너 삭제 파일 2개만 보내주세요.
좋은 하루보내세요. 감사합니다.

BlogIcon 해피드래곤

아니면 슬라이드 배너 설명글 아래 변경된 스킨파일과 스타일시트 파일을 올려주시면 좋을것 같아요.
슬라이드 배너가 나오고 구글광고가 나오면 블로그 글이 너무 나중에 나오기 때문에 슬라이드 배너를
없애려고 하는것이고 또 하나는 슬라이드 배너에 시선을 빼앗겨서 구글 광고에는 시선이 가질 않아서 입니다. 슬라이드 배너가 필요한 분들도 분명 있을텐데 일반 블로거인 저는 불필요합니다. 감사합니다.

BlogIcon 베누시안

<div class="box_skitter box_skitter_large">부터 <!-- 태그 --> 바로 위의 </div>까지 제거하면 됩니다.

BlogIcon 해피드래곤

관리자의 승인을 기다리고 있는 댓글입니다

BlogIcon EasyMan

안녕하세요. 블로그를 처음시작하는 새내기 블로거입니다. 스킨을 찾다보니 여기까지 흘러들어오게 되었습니다. 카테고리를 접어놓은 설정으로 하셨는데 그것을 처음부터 펴게하는 방법은 없을까요? 이것저것 건들어보았더니 그냥 버튼이 사라져버리고 마네요.

접고 펴는 소스부분좀 알려주실수 있으신가요?


그리고 글을 쓰게되면 마지막에 Posted by 베이가 베이가 이렇게 이름이 두번 반복이 되는데 이건 무슨 이유로 되는지 알려주실수 있으신가요?

BlogIcon 베누시안

카테고리 모듈이 있는 곳에 "accordion-body collapse"가 있는데 "accordion-body collapse in"처럼 in을 추가하세요. 아이디가 두번 반복되는 것은 제가 알 수 없습니다. 설정이 아마 잘못됐을 겁니다.

BlogIcon EasyMan

관리자의 승인을 기다리고 있는 댓글입니다

비밀댓글입니다

BlogIcon 베누시안

감사합니다.

BlogIcon TISTORY

관리자의 승인을 기다리고 있는 댓글입니다

BlogIcon Cacka Imae

관리자의 승인을 기다리고 있는 댓글입니다

티스토리 툴바