티스토리 뷰

처음 꾸민 블로그 대문


혹시나, 혹시나! 제 스킨에 관심을 가져주실 분이 있을까싶어 만드는방법을 조금이나마 설명해보려합니다.이미 너무 많은 부분을 건드려서, 기억에 없는부분도 있지만, 어느정도 초기화면은 만들 수 있을거라고 생각합니다. 저도 개인적으로 html이나 css를 공부한적이 없어 아직 까막눈이지만, 공대연구실에서 항상 컴퓨터앞에서 프로그래밍 코드를 보고 있는터라 수정은 어느정도 가능했습니다. 최대한 쉽게쉽게 설명!



1. 처음 스킨 고르기 : 티스토리에서 제공하는 Tistory Studio (White)

처음 백전백승님으로부터 초대장을 받아 티스토리를 시작하였습니다. (감사합니다!) 수많은 추천스킨들이 있지만, 처음엔 티스토리에서 기본적으로 제공하는 스킨으로 시작했습니다. 


티스토리관리 → 꾸미기 → 스킨 → Tistory Studio (White)선택



2. Tistory Studio 로고바꾸기

선택하시면 처음에 Tistory Studio라는 로고가 대문에 등장합니다. 블로그의 이부분부터 바꿔야겠지요? 

로고만들기 → 꾸미기  HTML/CSS편집  업로드  추가s

● 꾸미기  HTML/CSS편집  skin.html 코드를 수정  저장


전 로고를 간단히 파워포인트에서 나눔고딕을 배열해서 만들은후에 png로 저장했습니다. 가장 간단한 방법이 아닐까 싶습니다 :D 

만드셨으면 꾸미기  HTML/CSS편집  업로드  추가 의 순으로 업로드합니다. 이때 업로드하는 하일의 이름을 기억해두세요! 전 logo_new.png입니다.

업로드를 하셨다면 이제 코드를 수정해서 새로 업로드한 파일을 보여주게 해야지요? HTML/CSS 편집페이지로 갑니다. 그리고 Control + F 를 눌러줍니다. 그러면 검색창이 나오는데요, 거기서 logo 라고 입력하시고 검색. 총 6곳이 검색됩니다만 그중에서

<h1><a href="[##_blog_link_##]" title="[##_title_##]"><img src="./images/logo.gif" width=" ? px" height=" ? px" alt="[##_title_##]" /></a></h1>

를 찾아내서 logo.gif부분을 방금전 업로드하신 파일이름으로 바꿉니다. 

저의 경우는 logo_new.png. 이때, width(넓이)와 height(높이)는 마음대로 하셔도 좋지만, 좌우비율이 맞지않으면 사진이 비뚤어지니, 업로드한 파일을 오른쪽클릭 → 속성 → detail (자세히?) 에서 사이즈 (e.g. 500 px )를 보시고 좌우비율이 맞는 원하는 값으로 입력을 합니다.

예를들어 넓이 360px, 높이 90px 의 파일을 업로드 하셨다면 항상 원하시는 높이에대해 가로 = 높이 X (360/90) 의 값을 적으시면 됩니다. 로고가 60px의 높이로 하고싶으시다면, 가로값은 60 X (360/90) =  250px 가 되겠군요. 
입력하시고 저장하시면 로고바꾸기 성공!

저처럼 빨간go버튼도 바꾸고 싶으시다면, 같은 방법으로 btn_search.gif를 찾아서 바꾸시면 됩니다. 

참고로, 이유는 잘 모르겠습니다만 go버튼의 경우는 png파일로는 제대로 보여지지가 않아서, gif파일로 변환해서 올렷습니다.( 변환 프로그램에 따라 gif파일로 변환할때 그림이 이상해지는경우도 있습니다)





3. 전체적으로 빨간색 하이라이트, 링크의 색 변환

사람마다 다르겠습니다만은, 전 빨강색이 여기저기 있는게 싫더군요, 원하는 색으로 바꾸고 싶어요! 하시는분들은 이 과정을 따라하시기 바랍니다. 

 원하는 색상 선택 → 꾸미기  HTML/CSS편집  코드수정s


먼저 원하는 색상을 http://www.colorschemer.com/online.html 에서 선택합니다. 저의 경우는 #62cb96 가 좋더군요. 선택하셨으면 그 #?????? (Hex color code)를 잘 메모해두세요. 

이제 다시 티스토리로 돌아와 html/css편집에서 control + F 를 눌러 검색창을 켭니다. 

검색창에 #ff000a를 입력해서 검색하고 나오는것을 모두 #??????로 바꿔줍니다. 바꾸고 나서 미리보기를 하니, 대부분 바뀌었는데 태그 사이드바의 하이라이트는 아직도 빨간색이군요... lol  

나머지도 다 바꾸기위해 이번엔 빨가스루무한 #fc010a를 다 찾아내 바꾸어줍니다. 그러면 빨간색 하이라이트 없애기 완성 !



4. 디자이너 이름 넣기 ! Designed by ME!

이쯤되니 신경쓰이는 홈페이지 제일 아래쪽의 DESIGNED BY TISTORY?? 티스토리?? 내가 많이 바꿨는데? ㅋㄷ
style의 맨 마지막에 있는


title="TISTORY">TISTORY</a>
</div>
<div class="copyright">
<p><a href="[##_blog_link_##]">Home</a> : <a href="[##_localog_link_##]">Location Log</a> : <a href="[##_taglog_link_##]">Tag Log</a> : <a href="[##_blog_link_##]media">Media Log</a> : <a href="[##_guestbook_link_##]">Guestbook</a> : <a href="[##_owner_url_##]">Admin</a> : <a href="[##_owner_url_##]/entry/post">New Post</a><br /><a href="[##_blog_link_##]"> [##_blogger_##]</a>'s BLOG IS POWERED BY <a href="http://daum.net" onclick="window.open(this.href); return false">DAUM</a> / <span class="tistory">DESIGNED BY <a href="http://www.tistory.com" onclick="window.open(this.href); return false">TISTORY</a> AND MODIFIED BY <a href="         ①        " onclick="window.open(this.href); return false">      ②      </a></span></p>
</div>
</div>
</div>
</s_t3>
</body>
</html>


각각 1번에는 블로그주소를, 2번에는 자신의 이름을 넣어주시면 완성! 예를들면,

AND MODIFIED BY <a href="http://personalshelf.tistory.com" onclick="window.open(this.href); return false">오늘생각</a>

이렇게 초기 디자인 설정이 완료되었습니다 !!





P.S. 파비콘 만들기


파비콘이란, 제 블로그를 보시면 브라우저 주소창에  

http://devotionnoath.tistory.com/967



댓글
  • 프로필사진 BlogIcon Visiter 감사합니다 !

    막 블로그 개설한 저에게 필요한 정보였어요. ㅎㅎ
    2013.01.28 13:38 신고
  • 프로필사진 BlogIcon 온화수 ㅎㅎ 후아! 엄청 고맙습니다! 하루 투자해서.. 낑낑 대서 겨우 했어요. 설명대로 했는데 이상하게도 그대로 안 돼서 좌절했는데.. 밖에 나갔다 와서 다시 해보니 됐네요. ㅎㅎ 정말 만족합니다! 2013.04.10 12:33 신고
  • 프로필사진 BlogIcon 하루생각 하루생각 아닙니다!! 어떤부분이 어려웠나요??ㅠㅜ 최대한 쉽게 적으려고 했읍니다만 죄송합니다 ㅋㄷ 참고해주셔서 감사합니다!! 2013.04.15 16:30 신고
  • 프로필사진 BlogIcon 꿈봄 안녕하세요. ^^
    처음으로 티스토리 블로그를 시작하는데 요로코롬 심플한 디자인이 좋아서 따라 만드는 중인데.. 질문이 있어요. ^^

    저 메인 큰 사진 두장은 어떻게하면 저렇게 나오나요?
    또 왼쪽에 프로필 사진과 소개 넣는 것 없애고, 카테고리를 위로 끌어 올리려면요?

    도저히 모르겠습니다. ㅠㅠ html편집 참 어렵네요.
    가르쳐주실 수 있으신가요? ^^

    좋은 하루 보내세요!! 감사합니다.
    2013.05.26 05:22 신고
  • 프로필사진 bs.kickflipin@gmail.com 이제서야 댓글을 보네요 ㅠㅜ 저도 다시 찬찬히 봐야하는데, 어떻게 알려드려야할지가 막막하네요 >_< 2013.07.23 16:37 신고
  • 프로필사진 BlogIcon 꿈봄 제 나름대로 열심히 따라서 꾸몄어요. ㅎㅎ 처음엔 정말 힘들었는데, 직접하다가 보니 알겠더라고요. ^^ 헤헤~ 감사합니다. 2013.07.31 22:58 신고
  • 프로필사진 BlogIcon 하루생각 하루생각 오호! 코딩보는 소질이 있으신가봐요 :D 예쁜 블로깅하세요~ 재밌는 이야기나 정보 있으면 알려주시구요 :) 2013.08.01 10:48 신고
공지사항
글 보관함
링크
«   2018/12   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
Total
101,650
Today
23
Yesterday
97