여러분 감동적인 순간입니다. ㅠㅠ 드디어 첫번째 튜토리얼인 워드프레스 스킨 변환하기가 이 글과 함께 막을
내립니다.(?) 마지막까지 열심히 해서 모두 만족하실 수 있는 결과가 나오셨으면 좋겠습니다 ^^
지난시간에는 사이드바의 설정까지 모두 끝내셨을겁니다. 이 부분에서 오류가 나는 경우는 치환자의 오타이거나
<s_sidebar_element>의 섹션을 제대로 잡지 못해서 발생할수 있습니다. 이런경우는 눈만 똥그랗게 뜨고 찾으려
해도 찾아 고치실수 있습니다.
그동안 달려오면서 스타일시트에 대한 부분이 매우 소홀하게 다뤄졌는데 짧게 그 부분에 대해 설명을 하도록
하겠습니다. 스킨을 변환하면서 없던 부분이 생겨나고 또 워드프레스 스타일시트상에서 지정되지 않은 스타일도
많아서 복사해오도록 했습니다. 하지만 마음에 들지 않거나 좀 더 세부적인 것들이 필요할 수 있습니다.
(우리의 사랑 Firebug를 많이 애용해 줍시다.)
style.css파일을 수정함으로써 스타일을 수정할 수 있습니다. 스타일을 지정하는것은 크게 3가지 정도로 나눌수
있는데 id값과 class값과 그 오브젝트에 대한 값입니다.
id값을 쓰시려면 #id이름 { 들어갈 스타일:샬라샬라; } 이런식으로 하시면 되구요
class값을 쓰시려면 .class이름 { 들어갈 스타일:샬라샬라; } 이런식이고 마지막으로 오브젝트에 관한것은
그냥 어떠한 태그에 대한 모든 스타일을 설정해주는 겁니다. 예를들어 특별히 id나 class가 지정 안 된 input의
모든 스타일을 고치려 할때는 input { 들어갈 스타일:샬라샬라; } 라고 적어주시면 됩니다.
티스토리에 쓰이는 스타일에 관한것은 스킨 커뮤니티 사이트에 또한 자세히 나와있으니 참고 바랍니다.
CSS에 대한 더욱 자세한 정보를 얻고 싶으시면 다음에 올릴 포스팅인 CSS학 개론(?!)을 기다려주세요 ㅋㅋ
자, 이제 마무리 부분만 남았습니다. 이 부분은 index.xml 과 preview.gif파일을 만들어줌으로 끝을 내립니다.
index.xml파일은 스킨의 기본 정보나 설정이 들어가는 파일입니다. 밑의 그림과 샘플을 참고하여 자신에게
알맞는 xml파일을 만들어 봅시다. 원본은 http://retro.tattertools.com/ko/skin/skinmanual06.php에 있으니
거기서 복사해서 쓰시면 됩니다 :)
하는지 감이 오실겁니다. 다른 값들은 모두 설정후에 관리자모드에서 바꿀 수 있지만 다시 바꾸려면 재적용을
해야하는 까다로운 부분은 contentWidth 와 트랙백 부분과 카피라이트에 관한 부분입니다. 다들 적당히 설정
하시면 됩니다 contentwidth는 스킨에서 적용될 본문의 넓이를 적어주심 됩니다. 이 값에 따라서 글쓰기 창의
넓이가 변합니다. 이거 안맞으면 은근히 글쓸때 많이 불편하니까 꼭 맞춰주시길 바랍니다 ㅠㅠ
preview.gif파일은 스킨창에 출력되는 미리보기이미지 입니다. 크기는 150x150px로 맞춰주시면 됩니다.
적당히 캡쳐하셔서 사이즈 조절하시면 됩니다. 이 디자이니아 블로그의 기본스킨에 들어있는 프리뷰 파일입니다
스킨 성형설(?) 입니다. ㅋㅋ 우오오~ 좋은스킨이였는데 아주 죄다 뜯어 고쳤었지요 ㅋㅋ
여러분 모두 축하드립니다! 이제 드디어 스킨변환이 끝났습니다. 매우 어설픈 가이드였지만 가이드보다 훨씬
더 좋은 결과물을 만드셨으리라 생각이 됩니다 ^^! 모르는 내용이 있으시거나 질문이 있으시다면 댓글을
달아주세요 :) 제가 해결가능한 선에서 최대한으로 답변해드리겠습니다 :) 여러분 다시한번 수고하셨구요!
변환하신 스킨 멋지게 쓰시길 바라겠습니다 :)
내립니다.(?) 마지막까지 열심히 해서 모두 만족하실 수 있는 결과가 나오셨으면 좋겠습니다 ^^
지난시간에는 사이드바의 설정까지 모두 끝내셨을겁니다. 이 부분에서 오류가 나는 경우는 치환자의 오타이거나
<s_sidebar_element>의 섹션을 제대로 잡지 못해서 발생할수 있습니다. 이런경우는 눈만 똥그랗게 뜨고 찾으려
해도 찾아 고치실수 있습니다.
그동안 달려오면서 스타일시트에 대한 부분이 매우 소홀하게 다뤄졌는데 짧게 그 부분에 대해 설명을 하도록
하겠습니다. 스킨을 변환하면서 없던 부분이 생겨나고 또 워드프레스 스타일시트상에서 지정되지 않은 스타일도
많아서 복사해오도록 했습니다. 하지만 마음에 들지 않거나 좀 더 세부적인 것들이 필요할 수 있습니다.
(우리의 사랑 Firebug를 많이 애용해 줍시다.)
style.css파일을 수정함으로써 스타일을 수정할 수 있습니다. 스타일을 지정하는것은 크게 3가지 정도로 나눌수
있는데 id값과 class값과 그 오브젝트에 대한 값입니다.
id값을 쓰시려면 #id이름 { 들어갈 스타일:샬라샬라; } 이런식으로 하시면 되구요
class값을 쓰시려면 .class이름 { 들어갈 스타일:샬라샬라; } 이런식이고 마지막으로 오브젝트에 관한것은
그냥 어떠한 태그에 대한 모든 스타일을 설정해주는 겁니다. 예를들어 특별히 id나 class가 지정 안 된 input의
모든 스타일을 고치려 할때는 input { 들어갈 스타일:샬라샬라; } 라고 적어주시면 됩니다.
티스토리에 쓰이는 스타일에 관한것은 스킨 커뮤니티 사이트에 또한 자세히 나와있으니 참고 바랍니다.
CSS에 대한 더욱 자세한 정보를 얻고 싶으시면 다음에 올릴 포스팅인 CSS학 개론(?!)을 기다려주세요 ㅋㅋ
자, 이제 마무리 부분만 남았습니다. 이 부분은 index.xml 과 preview.gif파일을 만들어줌으로 끝을 내립니다.
index.xml파일은 스킨의 기본 정보나 설정이 들어가는 파일입니다. 밑의 그림과 샘플을 참고하여 자신에게
알맞는 xml파일을 만들어 봅시다. 원본은 http://retro.tattertools.com/ko/skin/skinmanual06.php에 있으니
거기서 복사해서 쓰시면 됩니다 :)
index.xml 파일소스 보기
무척이나 친절하고 자세하게 스킨 커뮤니티에 설명이 나와있습니다. 이미지와 함께 보시면 어느 값을 조정해야하는지 감이 오실겁니다. 다른 값들은 모두 설정후에 관리자모드에서 바꿀 수 있지만 다시 바꾸려면 재적용을
해야하는 까다로운 부분은 contentWidth 와 트랙백 부분과 카피라이트에 관한 부분입니다. 다들 적당히 설정
하시면 됩니다 contentwidth는 스킨에서 적용될 본문의 넓이를 적어주심 됩니다. 이 값에 따라서 글쓰기 창의
넓이가 변합니다. 이거 안맞으면 은근히 글쓸때 많이 불편하니까 꼭 맞춰주시길 바랍니다 ㅠㅠ
preview.gif파일은 스킨창에 출력되는 미리보기이미지 입니다. 크기는 150x150px로 맞춰주시면 됩니다.
적당히 캡쳐하셔서 사이즈 조절하시면 됩니다. 이 디자이니아 블로그의 기본스킨에 들어있는 프리뷰 파일입니다
여러분 모두 축하드립니다! 이제 드디어 스킨변환이 끝났습니다. 매우 어설픈 가이드였지만 가이드보다 훨씬
더 좋은 결과물을 만드셨으리라 생각이 됩니다 ^^! 모르는 내용이 있으시거나 질문이 있으시다면 댓글을
달아주세요 :) 제가 해결가능한 선에서 최대한으로 답변해드리겠습니다 :) 여러분 다시한번 수고하셨구요!
변환하신 스킨 멋지게 쓰시길 바라겠습니다 :)
정말 너무나 자세하게 작성하신 가이드라 스킨제작을 시도해보려는 많은분들에게 추천해드리고 싶군요 ^^
으앙 감사합니다 ㅠㅠ 흑흑 보람찬걸요~
오늘 제 블로그가 갑자기 원인모를 애러가 생겼는데...;;
저도 공부 좀 해봐야겠네요~^^
앗, 무슨 오류실까요 :)? 궁금해지네요
이글보고 궁금증을 많이 해결하였습니다.
이번달에는 나만의 스킨을 만들어 봐야겠어요~
기대하고 있어도 되죠 ?ㅎㅎ
자기가 포토샵으로 만든 디자인을 블로그에 적용은 못시키나요?
스킨작업을 통해서..
아니면 모든것이(디자인을포함) 명령어로만 이루어지는건가요?
초보라 모르는게 너무 많아서..