첫 티스토리 블로그 심플 스킨 꾸미기

처음 꾸민 블로그 대문

혹시나, 혹시나! 제 스킨에 관심을 가져주실 분이 있을까싶어 만드는방법을 조금이나마 설명해보려합니다.이미 너무 많은 부분을 건드려서, 기억에 없는부분도 있지만, 어느정도 초기화면은 만들 수 있을거라고 생각합니다. 저도 개인적으로 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="https://onedayof.tistory.com/" title="memorandus"><img src="./images/logo.gif" width=" ? px" height=" ? px" alt="memorandus" /></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="https://onedayof.tistory.com/">Home</a> : <a href="https://onedayof.tistory.com/location">Location Log</a> : <a href="https://onedayof.tistory.com/tag">Tag Log</a> : <a href="https://onedayof.tistory.com/media">Media Log</a> : <a href="https://onedayof.tistory.com/guestbook">Guestbook</a> : <a href="https://onedayof.tistory.com/manage">Admin</a> : <a href="https://onedayof.tistory.com/manage/entry/post">New Post</a><br /><a href="https://onedayof.tistory.com/"> 하루생각+</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