블로그를 하다보면 스킨에 대해서 관심을 가지게 되있고, 스킨에 관심을 가지다보면 html 과 css에 대해서 공부를 하게 됩니다.
처음에는 html 과 css를 쉽게만 봤습니다.

프로그래밍 언어에 비하면 쉽다고 생각했지요....
하지만 결코 쉬운것은 하나도 없는거 같아요.
얄팍한 html , css 실력가지고 스킨을 제작한다는것은 다소 무리가 있어 보였습니다. 하지만 나만의 스킨을 갖는다는것은 그만큼 효과가 나타납니다.

스킨 제작하면서 공부도 하게되고 그러다보면 스킨과 더불어 광고삽입도 원하는 형식으로 얼마든지 할수있다는 판단이 있어서요^^
광고 삽입에 있어 html 과 css 즉 디자인은 상당이 중요하다고 생각됩니다. 물론 좋은 컨텐츠가 받침된다는 가정하에서죠.

스킨에 중점을 둔 부분


  • 1024 의 해상도에서도 보여지는 스킨.
  • 1024 해상도지만 넓은 본문과 넓은 사이드바.
  • 여기에 욕심을 낸것이 댓글창과 RSS 롤오버 효과버튼, 그리고 타이틀 이미지.


한번 시도하고나면 얻는것도 있으니 무턱대고 시작을 했습니다.
 
그냥 티스토리 스킨을 수정할때는 몰랐는데 막상 제작을 하려고하니 첨부터 막막하더군요. html 과 css외에 티스토리의 치환자부분을 완전이 이해를 해야 맘대로 넣고 빼고 할수가 있습니다.

티스토리 치환자


티스토리 치환자 보기 => http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=4



스킨을 제작하려면 우선 치환자부분을 이해하고 시작을 해야합니다. html 을 바로 잡아야 css도 쉽게 할수 있습니다. 모르고 무턱대고 시작하니...넘 힘들군요.
스킨 제작자분들 정말 대단합니다. 더군다나 디자인 감각까지 있어야하니...저로서는 능력이상을 발휘해야하는 부분이더군요.

스킨 제작에 도움되는 글


스킨 수정과 제작을 하실려면 꼭 보셔야할것이 있습니다. 개인적으로 추천하는 글입니다.
제가 스킨을 제작할때는 그냥 처음부터 <html>..... 이렇게 시작했습니다. 하지만 곧 막히더군요.
스킨 제작과 수정에 도움되는 글이 있습니다.
용의자님 블로그 => http://yongja.tistory.com /category/블로그/블로그디자인
그레이스님의 티스토리 스킨만들기 => http://listentomyheart.net/194


위의 치환자부분과 위의 두분의 글을 보면 아마도 스킨을 만들수 있다고 생각합니다.
저는 용의자님의 스킨을 나름대로 수정을 했습니다.

스킨을 제작하거나 또는 기존 스킨을 사용하더라도 좀 더 보완할 부분이 있지요.
저도 타이틀을 이미지로 수정을 했습니다. 기존의 글씨로 된 타이틀보다도 잘 보이고 산뜻하게 꾸밀수있다는 장점이 잇지요. 디자인 감각이 없는 저로써는 해도 별로 좋은지는 모르겠네요.ㅎㅎㅎ

타이틀 이미지로 수정하는 법


타이틀 이미지로 수정하는 법 => http://yongja.tistory.com/54


또하나 RSS 버튼입니다.
수많은 RSS 버튼이 인터넷 상에 있습니다. 하지만 좋은 방법중에 하나가 롤오버 효과를 내는것입니다.

RSS버튼 롤오버 효과내는 법


롤 오버 효과를 내면서 이미지의 로딩시간을 단축시켜주는 방법이 있는데요. 한장의 이미지를 반반씩 사용해서 평상시는 위쪽이 보이고 마우스를 갖다대면  오버효과가 나타나는 즉 아래쪽 이미지가 보여지는 방식입니다.

저도 블로그 상단 우측에 RSS버튼을 하나 달았습니다. 테스트 해보세요^^
롤 오버 버튼 만들기 => http://yongja.tistory.com/97



저의 경우 한가지 또 수정한것은 바로 검색창입니다.
기존의 검색창은 좀 작은것 같은데 좀더 크게 했습니다.



기존의 용의자님 스킨의 검색창도 우수하지만 좀더 넓은 것이 좋아보여서 수정했습니다. 기존의 검색창은 아래 이미지를 참고하세요.

어때요 좀 더 넓어보이죠^^

또 한가지 수정했으면 하는곳이 바로 댓글창입니다.
용의자님의 스킨을 가지고 제작했다고 말했죠. 워낙 디자인 감각이 좋으시니 다른 스킨도 좋지만 저는 용의자님 스킨을 가지고 제작을 했습니다.
기존의 댓글창은 이렇습니다.


노란색으로 된 부분이 공으로 남아있습니다. 아마도 여러분들도 이런 형식으로 된 댓글창을 많이 보셨을겁니다.
노란색부분을 수정하려고 했는데 마침 용의자님 블로그에 좋은 케이스가 있습니다. 그래서 보고 따라해봤죠.
완성된것은 아래와 같습니다.


아무래도 전문가가 아니다보니 보다 직관적으로 수정하기가 쉽지가 않더군요. 그래도 우선 대략적인 부분은 수정이 된 상태입니다.
아직도 좀 더 수정을 해야하는 부분이 있지만 큰 그림은 대략 된듯합니다.

이 부분 말고도 한가지 더 보완할점은 바로 서식 부분입니다. 좀더 직관적이고 디자인이 가미된 서식을 항상 이용하면 글도 보기좋고 깔끔하다는 판단이 듭니다.

현재 위에서 처럼 대략 1차적으로 만든것이 블로그 전체 테마와 맞게 보라색의 바탕부분인데요. 요것을 좀더 보기좋게 만들어야겠습니다.

여러분도 시간이 되신다면 , 또는 관심이 있다면 해보세요. 스킨 수정하면 전체적인 것을 다 바꿔야 합니다.
심지어 사이드바에 들어가는 링크나 본문에 걸리는 광고까지 모두 수정을 해줘야 보기가 좋습니다.
들쑥 날쑥하면 보기가 않좋으니까요.

처음에는 블랙 바탕에 좀 어두운색 테마로 갔는데.......색깔의 선택에있어 한정적이여서 급 보라색쪽으로 수정을 했습니다만 좋은 테마를 많이 보고 참고해서 제작하는것도 좋은 방법인거 같습니다.

오피스 프로그램을 포터블로 만들다가 스킨에 손대는 바람에 중지됏네요. 요즘에는 Thinapp가 윈도우 7에서도 잘 돌아가서 모든 운영체제에서 사용가능한 포터블을 제작하고 있습니다.
이전에는 외부 코덱이 추가된 KMP, 곰플레이어, 다음팟 플레이어 등등을 만들었는데요. 윈도우 7 에서도 작동이 되니 좋습니다.