demun(대문블로그)

티스토리스킨수정/스킨수정팁2012. 1. 28. 06:00

제가 스킨을 수정하고 제작하고, 그리고 적용하면서 느낀점을 알려드립니다. 이제는 제가 스킨과 코드에 대해서 어느정도 아니까 수정이 가능하고 복구가 가능하지만 블로그를 처음하시거나, 코드를 잘 모르시는분들은 반드시 알고 넘어가야 할 부분입니다. 이점을 반드시 숙지하시고 스킨을 변경하거나 수정하거나 하세요. 이 부분을 간과하면 나중에 꼭 후회하게 됩니다. 꼭 참고하시기 바랍니다. 스킨을 수정하거나 변경하기전 제일 먼저 해야할것은 백업입니다. 1. html, css 코드 복사. 제일먼저 skin.html 과 style.css 를 먼저 에디터에 복사해서 붙여넣으세요. 그리고 알아보기 쉬운 이름으로 저장하세요.. 왜냐면 스킨을 변경한 후 코드를 붙여넣기 위함입니다. 스킨을 변경한후 코드를 붙여넣거나 수정해서 넣기..

티스토리스킨수정/사이드바2011. 12. 18. 11:26

제글에는 사이드바에 관련한 글들이 많이 있습니다. 기존의 스킨에서 변경할때 똑같은 스타일이 적용되게끔 변경하는 방법 말이죠. 이것도 그와 관련한 글입니다. 즉 해더에 배치된 검색창을 사이드바에 넣은 방법입니다. 질문으로 들어왔지만 글이 길어 포스팅하고 그와 관련한 방법도 참고가 되니 여기에 씁니다. 해결방법은 대략 이렇습니다. 1. 해더에 있는 html 검색코드를 지운다. 2. 사이드바에 검색창을 넣는다. (여기서 티스토리의 태그입력,모듈추가로 입력합니다. 또는 html 입력창에서 입력해도 상관은 없습니다.) 3. 관련 스타일 코드를 추가해준다. 대략 이렇습니다. 자 시작해볼까요???. 먼저 해더쪽에 있는 검색창 코드를 지우고 사이드바 설정에서 모듈추가를 합니다. Search 여기서 한가지 value="..

티스토리스킨수정/메인메뉴2011. 12. 8. 19:37

제가 이전에 배포한 에드센스 스킨에 이미지 없는 css3 의 네비게이션을 적용하는 방법을 모른다고 해서 이 포스팅을 합니다. 보시면 누구나 수정이 가능할겁니다. 일단 에드센스 스킨은 자바스크립트로 네비게이션 부분을 꾸밈니다. 그래서 이것으로 수정할경우 더 가볍게 사용할수 있죠. 먼저 html 부분부터 수정해보겠습니다. html 수정. menu 부분을 삭제합니다. 하위에 자바스크립트 두줄도 같이 삭제합니다. menu 부분에 제가 작성한 형태로 html 부분을 채웁니다. 대충 테스트형식으로 저는 아래처럼 채웠습니다. HOME TAG LOG MEDIA LOG GUESTBOOK folder 1 folder 2 folder 3 folder 4 이미지없는 네비게이션 메뉴를 잘보시고 따라하세요. 이제 css 를 수정..

티스토리스킨수정/스킨수정팁2011. 7. 24. 09:54

얼마전에 제가 티스토리 포럼에도 문의하고 티스토리 고객센터에도 문의를 드린내용입니다. 티스토리 블로그 서비스가 좋긴 좋은데.... 문제점이 없는것은 아닙니다. 그리고 현재도 계속 플러그인이 추가가 되면서 사용성이 점점 늘어나고 있고 , 블로거들한테도 선택의 폭이 넓어지고 있습니다. 문제는 티스토리에서도 티스토리 치환자를 표시할때가 있는데요 현재는 방법이 없다는 겁니다. 플러그인 목록을 보시면 정말 많은 플러그인이 있습니다. 그만큼 선택의 폭을 넓히라고 하나씩 하나씩 추가된것이지요. 그런데 치환자를 표시하는 방법 하나쯤은 티스토리 주최측에서 만들어줘야 하는데. 그렇게 하고 있지 않다는겁니다. 티스토리에서 티스토리 스킨에 대한 이야기를 나누는것은 당연합니다. 또 티스토리 스킨에 대해서 이야기를 나누다보면 치..

티스토리스킨수정/사이드바2011. 3. 13. 11:00

이번에는 사이드바를 수정하는 방법을 알려드리겠습니다. 질문도 있고 해서 본인의 스킨에서도 수정할수 있도록 알려드리겠습니다. 사이드바에 최근글, 최근댓글, 최근트랙백, 카운터, 태그...... 등등 많은 것이 있지요. 이는 스킨을 제작할때 어느정도는 스킨에 어울리도록 만들지만 그렇지 않은경우나 , 또 본인의 스타일대로 변경하고자 할 경우 아래처럼 수정하면 됩니다. 우선 html 부터 살펴봅니다. html 이 일정해야 css 스타일이 간단합니다. 티스토리에서 사이드바의 html 은 아래와 같습니다. 티스토리 스킨가이드에서 알려준 html 형식입니다. 최근글만 좀더 자세하게 표시하였습니다. ... 최근에 올라온 글 . . . ... ... ... ... 여기서 좀더 들어가보면 각각의 메뉴 즉 최근글, 최근댓글..

티스토리스킨수정/스킨수정팁2011. 2. 27. 06:00

플로팅 메뉴를 혹시나 저처럼 똑같이 사용하기를 원하시는 분이 있을수도 있다고 생각해서 이 글을 작성합니다. 전편에 소개한 floating menu 에서 다소 부족한 부분이 있어 보충합니다. 이전글을 보지 않으신분은 다소 이해를 못할수도 있으니 이전글을 참고해주세요. 이번글을 저와 똑같이 home, top(위로이동), comment(댓글로이동), bottom(맨아래로 이동), 방명록, RSS(피드구독) 등을 이용하는 방법입니다. 사용법은 이전글과 똑같습니다. 약간의 수정만 하면 됩니다. 우선 아래의 이미지를 업로드하세요. 올려드린 이미지는 배경없는 png 파일입니다. floating menu 설정 다음 html 코드를 아래처럼 변경해주세요. 그다음 css 설정을 합니다. 위에 올려드린 이미지는 40*40p..

티스토리스킨수정/사이드바2011. 1. 19. 19:28

이글은 이전에 작성한 글과 많은 부분이 일치하지만 스킨을 적용하고 나머지 광고나 기타 링크를 삽입하는데 있어 모르는 부분을 매우기 위해 재작성 합니다. no.16 스킨의 사이드바는 박스형태로 되어 있습니다. 여기에 광고나 기타 링크등을 삽입할때 그냥 삽입하면 아래와같은 모습이 나옵니다.(흉보는것 아니니 기분나뻐하지 마세요.) 사이드바의 박스와 박스 사이에 광고가 위치하게 됩니다. 박스 즉 테두리에 넣어지지 않고 밖에 위치하게 됩니다. 이걸 스킨과 어울리게 자연스럽게 삽입해보도록 하겠습니다. 사이드바의 html 코드를 복사합니다. 아무부분이나 상관없습니다. 아래는 링크에 해당하는 부분이고 대략 아래처럼 되어있습니다. Link [#\#_link_site_##]. ADS 단지 id를 하나 생성합니다. id 는..

티스토리스킨수정/스킨수정팁2011. 1. 18. 21:54

이글은 초보자분들을 위한 글입니다. 블로그 스킨을 사용은 하고 싶고, 블로그 스킨을 수정은 하고 싶은데 어느곳에 어떤 스타일이 적용이 되어 있는지 모르시는 분들에게 하나의 방법을 알려드립니다. 일단 아주 초보적인 것 부터.... 브라우져 많이들 사용하고 계시는것이 익스플로러입니다. 이와 같은 동작을 하는 브라우져로는 크롬,파이어폭스,오페라,사파리,웹마....등등 아주 많이 있습니다. 그중에 블로그 스킨수정을 할수 있는것은 유명한 파이어버그라는 것이 있씁니다. 물론 크롬이나 오페라,사파리,익스플로러에서도 html, css, js 코드등을 볼수는 있습니다만 가장 유명하고 강력한것이 파이어폭스에 파이어버그라는 확장기능입니다. 서론접고 파이어폭스가 없는분은 파이어폭스를 다운로드해서 설치하시고 그다음 파이어버그 ..

티스토리스킨수정/스킨수정팁2011. 1. 13. 20:47

이 스킨은 원래 확장성에 중점을 두었기 때문에 하단에 사이드바를 놓고나 배너영역을 넣었습니다. 하지만 모든 분들이 이 경우에 해당한다고 생각지는 않습니다. 그래서 그런분블을 위해 애초에 css를 분리했습니다. 하단의 사이드바 수정하는 법과 하단의 배너영역을 수정하는 법을 알아보겠습니다. html 코드는 아래와같은 형식으로 되어 있습니다. 블로그전체를 감싸는 컨테이너 하단 사이드바 부분 배너영역 하단 사이드바 사용안하기. 1. html 삭제. html에서 아래 부분 삭제. 하단 사이드바 부분 2. css 삭제. 스타일(style.css)에서 아래부분을 삭제하세요. @import url("images/wrapper.css"); 자 그럼 끝입니다. 하단 배너영역 사용안하기. 1.html 삭제. html 에서 ..

티스토리스킨수정/스킨수정팁2011. 1. 13. 20:14

16번째 스킨을 배포했는데 너비를 수정하고 싶은 분이 있어 따로 포스팅합니다. 글을 보시고 너비를 수정하시면 됩니다. 알고 있는것을 글로 설명하려하니 정말 힘들군요. 16번째 스킨은 총 너비가 980px 입니다. 본문 : 670px 사이드바 : 280px 중간 여백 : 30px 입니다. 좀더 자세히 이야기하면 이렇습니다. #contentLeft 너비 670px =>본문을 감싸는 컨테이너. 이것은 아래 컨테이너를 포함합니다. {테두리(border) + 여백(padding) = 20px} + 본문(630px) 글로 설명하려니 정말 힘들군요. 이미지첨부합니다. 너비에 관련한것만 추려봅니다. 이정도만 수정하면 크게 레이아웃이 깨지지 않을거라 생각됩니다. 크게 980에서 본문쪽(contentLeft 670)과 사..