태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

    첫페이지 홈으로 | 전체글 | 웹툰 | 연예·드라마 | 건강·요리 | 여행 | 글쓰기팁 | 축구 | 이미지 | 방명록 관리자모드 관리자모드 관리자모드 프로필 | 로카인라디오 소개

티스토리는 설치형 블로그로 스킨을 꾸미는 것이 약간의 노하우가 필요합니다. 다음이나 네이버에서 운영하는 블로그는 스킨 수정에 '리모콘' 같은 기능이 있어 몇번의 클릭만으로 마음대로 꾸밀 수 있지만 티스토리 같은 경우에는 직접 HTML과 CSS를 입력해줘야 하는 어려움이 있습니다. 하지만 스킨을 직접 손봐서 포털 블로그에서는 시도할 수 없었던 다양한 나만의 스킨을 만들 수 있다는 장점이 있습니다.

처음에는 어렵게 느껴지지만 한번 시도해보면 무한매력에 빠져드는 티스토리 스킨 꾸미기에 대해 알아봅시다.

사용자 삽입 이미지

스킨 선택하기

1단 스킨
본문만 있는 경우입니다. 화면전체에 본문만 나오고 사이드바는 하단에 표시되는 스킨입니다. 고해상도 사진이나 동영상을 전문으로 올리는 블로그에 안성맞춤입니다.

2단 스킨
사용자 삽입 이미지
① 사이드바가 왼쪽인 경우
2단 스킨의 경우 많은 블로그에서 사용하고 있는데 사이드바가 왼쪽인 경우 안정적인 느낌을 줍니다. 왼쪽 사이드바에서 메뉴를 눌러 이동하기 편리합니다.

② 사이드바가 오른쪽인 경우
본문이 먼저 나오고 사이드바가 오른쪽인 경우 블로그에 가장 합리적인 스킨입니다. 본문의 가독성을 높여주면서 오른쪽 사이드바에서 메뉴나 배너를 다양하게 설치할 수 있습니다. 사이드바가 오른쪽인 2단 스킨이 블로그에 많이 사용되고 있습니다.

3단 스킨
사용자 삽입 이미지
① 사이드바-본분-사이드바
본문을 가운데 두고 좌우에 사이드바를 설치하는 스킨입니다. 사이트 같이 화려한 느낌을 줍니다. 하지만 좌우가 너무 화려하면 본문의 가독성을 해칠 수 있는 단점이 있습니다. 글만 있는 경우보다 사진이나 이미지를 주로 올리는 블로그에 적합합니다.

② 본문-사이드바1-사이드바2
블로그에 가장 알맞은 스킨이라고 할 수 있습니다. 2단 스킨의 경우 사이드바가 길어진다는 단점이 있어 많은것을 사이드바에 넣을 수 없는데 본문-사이드바1-사이드바2 스킨을 선택할 경우 사이드바에 많은 내용을 실으면서 본문의 가독성을 높일 수 있습니다.

처음 블로그를 만드신다면 2단 스킨을 권해드리고 싶으며, 사이드바에 많은 내용을 넣고 싶다는 분들은 본문-사이드바1-사이드바2 형식의 3단 스킨을 추천해드립니다.

사용자 삽입 이미지
스킨 위자드 사용하기

배경 꾸미기
블로그의 뒷 배경을 결정하는 것입니다.
50개가 넘는 이미지와 패턴 중에서 선택할 수 있습니다. 단색으로 만들고 싶으시면 색을 입력할 수 있습니다.

보통 본문에 글을 주로 적는 블로그라면 밝은 색 배경을 검은색이나 어두운 배경은 사진과 이미지가 함께 있을때 더욱 효과적입니다. 영화나 만화 같은 다양한 이미지가 함께하는 블로그라면 어두운 배경으로 몰입시키는 것도 효과적입니다.  

타이틀 꾸미기
블로그 맨 위의 타이틀 이미지를 선택하는 것입니다.
50개가 넘는 이미지나 패턴 중에서 선택할 수 있고, 택스트 문구도 넣을 수 있습니다.
자신이 직접 이미지를 제작해서 올릴 수 있습니다.

※ 직접 타이틀 이미지 올리기
① 스킨위자드-타이틀을 선택합니다.
② 상단 메뉴 중에서 '직접올리기'를 선택합니다.
③ 찾아보기를 눌러 만들어 놓은 이미지를 선택합니다.
용량은 512KB이하, jpg, gif, png확장자 파일만 가능합니다.
④ 상단 메뉴 '텍스트'를 눌러 높이를 알맞게 조절합니다.

게시글 꾸미기
글 영역 크기를 선택할때 사용합니다.
보통 500px에서 650px 정도가 적당하며 본문 영역을 크게 사용하고 싶으시면 700px정도면 가능합니다.
글자색도 바꿀수 있습니다.

스킨 위자드가 끝났습니다.
솔직히 스킨 위자드로 할수 있는 것이 거의 없습니다. 앞으로 좀더 편리해지는 스킨 위자드가 나오길 기대해봅니다.

직접 올리기
사용자 삽입 이미지

파일을 직접 올릴수 있습니다.
예를들어 mylogo.gif 파일을 파일 업로드 버튼을 눌러 직접 올리기 합니다.
그다음 스킨의 HTML/CSS 버튼을 눌러 스킨 꾸미기로 들어갑니다.

여기서 해당 파일을 나타내고 싶을때 주소는
<img src="./images/mylogo.gif"> 입니다. 이미지 출력하는 태그에 절대 주소가 바로 <"./images/파일명">이 되는 것입니다.

※ 가장 많이 사용하는 HTML
이미지 출력하기 <img src="주소">
홈페이지 링크 이동 <a href="이동 홈페이지 주소">클릭 내용</a>
가운데 정렬 <center>정렬할 내용</center>

예) <center><a href="http://rocarlo.tistory.com"><img src="./images/mylogo.gif"></a></center>

이미지 올리기
안타깝게도 사이드바에서는 이 주소가 안먹힙니다. 사이드바에 자신의 이미지 출력하는 편법은 따로 있습니다.

※ 블로그 스킨에 이미지를 올리는 또다른 방법

①  비공개로 어떤 글이든 작성합니다.
② 이 글에 원하는 이미지 파일을 첨부해서 출력합니다.
③ 이미지에 마우스 오른쪽 버튼을 누릅니다.
④ 속성을 누릅니다.
⑤ 주소값이 뜨면 모두 복사합니다.
⑥ 원하는 곳에 붙여넣으면 됩니다.

절대 주소를 모를 경우 유용하게 사용할 수 있는 방법입니다. 특히 사이드바에 이미지를 출력할때 효과가 좋습니다.
사용자 삽입 이미지

사용자 삽입 이미지

HTML/CSS 가이드
티스토리에서 아주 자세하게 설명해 놓았습니다.  

티스토리 스킨가이드 바로가기
http//www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin


사용자 삽입 이미지
skin.html 과 style.css 가있습니다.
skin.html은 기본적인 구조를 설정하는 곳입니다.
style.css는 글자 크기나 색 위치 같은 세부적인 사항을 결정해 주는 곳입니다.

skin.html은 <container>안에 <header> <content> <sideinfo 또는 sidebar> <footer> 순으로 되어있습니다. <header>는 스킨 위자드에서 설정했던 타이틀 이미지죠. <header>바로 아래 이미지나 자신이 원하는 메뉴를 넣고 싶으시면 <header>가 끝나는 아래 바로 삽입하면 됩니다. 순서대로 출력되기 때문에 위치를 잘 맞춰서 코드를 입력해주면 됩니다.

[#?#?_article_rep_desc_?#?#] 가장 중요한 본문입니다.

많이 보셨을 것입니다. 애드센스 코드 삽입할때 중요한 문장입니다. 본문 위에 삽입하려면 [#?#?_article_rep_desc_?#?#] 위에 코드를 넣어주고 아래다 넣으면 본문이 끝나자 마자 출력됩니다. skin.html은 순서가 중요합니다. ?표시는 빼고 검색해서 찾으세요.

<div class="titleWrap"> 이 문장은 글 제목입니다. 제목 위에 뭔가를 넣고 싶으시면 이 문장 위에 삽입하면 됩니다.

<DIV>로 정렬하기

<div style="float:left; margin-right: 0px; margin-left: 0px; margin-top: 10px; padding-bottom: 10px;">...</div>

코드가 길어질 경우 사용하면 편리한 <div>입니다. float에서 left나 right를 설정해주면 좌우로 정렬이 되며 margin 값을 입력해서 좌우 여백으로 깔끔하게 마무리 할 수 있습니다.

애드센스 코드 삽입하기

사용자 삽입 이미지


간단하죠? 애드센스를 삽입할 수 있으면 어떤 것이든 스킨을 꾸밀 수 있는 것입니다. 댓글창의 색상도 바꿀 수 있고, 크기 조절도 가능하고, 코멘트 이미지도 바꿀 수 있고, 택스트 메뉴바를 이미지로 바꿔 넣을 수 있고 모든 것이 가능합니다.

그래픽 스킨 관련 추천 블로그
제가 매주 토요일 <추천 포스트 10>을 쓰고 있는데요. 나중에 그래픽 관련 블로그도 모아서 한번 써봐야겠습니다. 기대해주시구요. 오늘은 로고와 배너를 만드시는 멋진 블로그 두곳을 소개하겠습니다.
 
사용자 삽입 이미지
재아넷 http//www.jaea.net/
재아님은 RSS 아이콘제작에 있어 전문가이십니다. 최근에 쪼아님과 불닭님 아이콘을 만들어 공개해주셨는데 정말 놀랐습니다. 대단한 실력이십니다. 재아님 블로그에 자주 다니시다보면 언젠가 'RSS 아이콘을 만들어 드립니다'하고 포스트가 올라올때가 있습니다. 그때 잽싸게 신청하세요. 아이콘 하나로 최고의 스킨이 될 수 있습니다.

관련글 : 불닭님께 RSS아이콘을 선물합니다. http//www.jaea.net/730

사용자 삽입 이미지
UNLIMITED RENEWAL WORKS http//spiegel04.tistory.com/
스킨이 멋있기로 유명한 카르사마님은 배너제작에 있어 전문가이십니다. 배너는 블로그를 홍보하는데 필수적인데요 깔끔하고 멋지게 배너를 만드십니다. 카르사마님 블로그에 자주 다니시다보면 '배너 만들어 드립니다.'하고 포스트가 올라올때가 있습니다. 그때를 놓치지 말고 신청하세요. 배너는 다른 블로거분들과 공유할 수도 있는 명함 같은 것입니다.

관련글 : 배너 만들어 드립니다. http//spiegel04.tistory.com/873

마지막으로 RSS 이미지 입니다
제가 만든 RSS 이미지 10종 세트도 있습니다. 잘 못만들었지만 제 이미지를 써주시는 블로그를 볼때마다 정말 뿌듯함을 느낍니다. 잠깐 생각해도 제 rss 이미지를 다신 블로그가 몇군데 떠오르네요. 정말 달아주셔서 고맙습니다 ^^ 또한 디자인로그에서도 멋있고 깔끔한 rss 이미지를 배포하시고 있습니다.

로카르노 님의

RSS FEED 10종 세트를 공개합니다.
http//rocarlo.tistory.com/335


마루[maru] 님의
RSS FEED 아이콘, CUBE 디자인 배포 및 다운로드
 http//www.designlog.org/2511353


성렬 님의
RSS 아이콘, 궁극의 총정리!
http//srlog.egloos.com/4361806


마지막으로 티스토리 비우수 블로그 배너입니다.
단 100분에게만 티스토리 우수 블로그 배너가 주어졌는데요 이 배너가 상당히 멋집니다 -.-
저도 달고 싶었지만 우수 블로그가 아니라 좌절모드였는데 사춘기 소년님께서 삐딱한 비우수 블로그 배너를 제작해주셨습니다. 사선으로 방향이 틀어져 있는게 그야말로 최곱니다.
사이드바에 부착해 놓으면 재미도 있고 보기에도 좋습니다.

사춘기 소년님의
'삐딱하게' 우수 블로거 되는 방법

http//www.codistory.net/entry/삐딱하게-우수-블로거-되는-방법


저도 처음 스킨을 만질때는 정말 몇날 며칠동안 이곳 저곳 검색해가며 스킨을 완성했습니다. 블로그 스킨 수정에 도전하시는 분들께 도움이 되었으면 좋겠네요.

 

 

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. BlogIcon moonwalks south jersey 2013.01.04 00:08  댓글주소  수정/삭제  댓글쓰기

    위한 훈련이 더 거북하게 받아들여졌던 이유가 있다. 오늘 필요했던 훈련이 있었다면 차라리 방사능 낙진에 대비하는 훈련이었어야 한다고 생각하기 때문이다.

  3. BlogIcon Aluminum Pool Fence 2013.01.07 02:34  댓글주소  수정/삭제  댓글쓰기

    이 접촉하고 있던 임진강어구-판문점-철원북방-금성남방-문등리-가칠봉-고성남방의 전장 237킬로미터의 전선을 잠정..

  4. BlogIcon letmewatchthis 2013.01.09 06:34  댓글주소  수정/삭제  댓글쓰기

    구 천사가 완료됩니다. 그들은 여러 가능성을 고려하는 위협하지 않습니다. 웹사이트 웹사이트 독자 한랭 이내 측면을 보호하는 것

  5. BlogIcon eye drops 2013.01.09 16:52  댓글주소  수정/삭제  댓글쓰기

    I have been getting a lot of useful and informative material in your website

  6. BlogIcon breast cream 2013.01.14 06:11  댓글주소  수정/삭제  댓글쓰기

    걸림돌로 인식했던 군사분계선 문제가 타결되었기 때문에 이후의 협상은 순조롭게 진행될 것으로 판단하고 방

  7. BlogIcon dui attorney los angeles 2013.01.15 05:59  댓글주소  수정/삭제  댓글쓰기

    개입하면서 전쟁의 양태가 바뀌고 장기화 조짐이 보이자 획득된 포로들을 전선에서 가장 멀리 떨어진 최후방의

  8. BlogIcon Apple Car Loan - Austin Title Loans 2013.01.15 22:38  댓글주소  수정/삭제  댓글쓰기

    한 사람은 구의회 의장이다. 사실 ‘죄질’로 따지면 박 의장의 경우가 더 무겁다. 박 의장의 행패는 공무중에, 그것도 구의

  9. BlogIcon breast actives results 2013.01.17 21:05  댓글주소  수정/삭제  댓글쓰기

    Some affirmative action opponents reject the diversity argument outright.

  10. BlogIcon adficient phone call tracking services 2013.01.23 06:21  댓글주소  수정/삭제  댓글쓰기

    I posit that those individuals who adopt an inside view to forecasting, through the use of plans and financial projections

  11. BlogIcon reviews of provillus 2013.01.28 03:29  댓글주소  수정/삭제  댓글쓰기

    I really appreciate the information you have provided in this article. Thanks a lot ! Very nice !

  12. BlogIcon best hotels in paris 2013.02.02 05:43  댓글주소  수정/삭제  댓글쓰기

    고 했을 것이다. 이 의원이 자신이 저지른 행동에

  13. BlogIcon Relationship with Makhamreh Lawfirm 2013.02.05 19:28  댓글주소  수정/삭제  댓글쓰기

    I lately arrived throughout your weblog and are already reading through along. I believed I would leave my very first comment.

  14. BlogIcon Relationship with Makhamreh Lawfirm 2013.02.05 19:28  댓글주소  수정/삭제  댓글쓰기

    I lately arrived throughout your weblog and are already reading through along. I believed I would leave my very first comment.

  15. BlogIcon reviews wartrol 2013.02.06 04:34  댓글주소  수정/삭제  댓글쓰기

    This is really good for them to provide this one. I think this is really helpful. Keep up the good work.

  16. BlogIcon Saca BCC Website 2013.02.07 05:04  댓글주소  수정/삭제  댓글쓰기

    First of all Thanks for u Informative information you have shared here.It is very interesting for me to read this article.Keep it up!

  17. BlogIcon clearpores reviews 2013.02.13 22:53  댓글주소  수정/삭제  댓글쓰기

    상처들한 상처들을 조금 덜야 상처들한 상처들을 조금 덜야

  18. BlogIcon credit report judgment 2013.02.14 15:44  댓글주소  수정/삭제  댓글쓰기

    I really appreciate that you took all this time to try and help us. Keep up the good work. Keep on taking action.

  19. BlogIcon top home security systems 2013.02.15 00:46  댓글주소  수정/삭제  댓글쓰기

    I am really impressed by your post.

  20. BlogIcon EZ Finance Help 2013.02.18 19:04  댓글주소  수정/삭제  댓글쓰기

    Well, I am just new to your blog site and just spent about an hour lurking and reading.

  21. BlogIcon sbobet 2013.02.18 22:33  댓글주소  수정/삭제  댓글쓰기

    이야기하며 좋은 내가 블로그 전체에 해당 건너 왔다고인 문서에 대해 이야기하며 좋은 내가 블로그 전체에 해당 건너 왔다고..