demun(대문블로그)

티스토리/스킨배포2012. 5. 2. 01:00

워드프레스 스킨중에서 Delucide라는 아주 좋은 스킨을 발견했습니다. 티스토리용으로 변환하여 사용할수 있게 만들어 봤습니다. 요즘은 시간이 없는 관계로 작업을 많이는 못하지만 틈틈이 시간을 내어 만들어 봤습니다. Delucide 티스토리 스킨 미리보기 Delucide 테마의 특징은 아래와 같습니다. 1. 사이드바 관리. 사이드바에서 관리를 할수 있도록 만들었습니다. 위 이미지를 보시면 사이드바 1 이라고 적힌곳에는 반드시 사이드바1 이라는 메뉴가 와야 정상적으로 보입니다. 누구나 알아보기 쉽게 제작하였습니다. 그러므로 메인메뉴와 슬라이더를 넣거나 뺄수 있습니다. 물론 사이드바에 사용하는 사이드바3은 선택적으로 사용할수 있습니다. 2. 드롭다운 메뉴. jQuery 를 이용한 드롭다운 메뉴입니다. 링크는..

티스토리/스킨변경제작이력2012. 4. 22. 15:39

얼마전에 워드프레스 스킨을 티스토리로 변환을 하였습니다. http://demun.tistory.com/2092 대략 보시면 아시겠지요... 그래서 이번에는 제 스타일에 맞는 워드프레스 스킨을 하나 골라서 작업을 해보았습니다. 완전이 다 작업이 끝난것은 아니지만 하다가 멈추었습니다. 몇가지 맘에 안드는것이 있어서지요..... 너무 포스팅이 없어 근황을 소개하는 페이지 입니다. 위의 테마도 유료스킨인데 개인적으로 한번 변환을 해봤습니다. 티스토리 스킨도 워드프레스 테마처럼은 아니지만 다양한 스킨이 있었으면 좋겠네요....

티스토리스킨수정/스킨수정팁2012. 4. 15. 22:43

개인적인 부탁으로 특정 사이트의 워드프레스 스킨을 티스토리용으로 변환해달라고해서 이틀동안 시간을 내서 마무리를 지었습니다.만든사람은 잘 알지만 사용상의 편의를 위해서 변경해야할 부분을 사이드바에서 수정할 수 있도록 하였습니다.변경할 부분은 아래 이미지를 클릭해서 보시면 됩니다. 사진이 너무 커서 더보기를 사용합니다. 위의 이미지를 보시면 1번~5번까지 표시를 한것이 보일겁니다.사이드바에서 수정할수 있도록 한것이며 관리자화면에서 사이드바 수정화면을 보겠습니다. 정확하게 사이드바 1 에는 사이드바 1-topnav 라고 적힌 것을 넣어줘야 합니다. 앞에 사이드바 1~사이드바 5까지 번호를 넣어놔서 사용하는데는 무리가 없습니다. 사이드바 4번이 우리가 알고 있는 사이드바입니다. 이부분은 넣을것은 넣고 뺄것은 빼..

티스토리/스킨배포2012. 2. 1. 06:00

대문입니다. 제가 이제까지 사용하던 스킨을 배포합니다. 오랫동안 이것 저것 만지며 테스트를 거쳐왔기 때문에 오류가 거의 없지 않나 생각됩니다. 원래 스킨명은 Stripe(스프라이프) 였는데 메인메뉴와 하단의 푸터부분을 수정하면서 그 부분을 추가한 버젼도 필요하면 배포하려고 스킨명을 Stripe_Default 로 정했습니다. 스프라이프로 이름을 정한것은 각각의 배경에 스프라이프가 들어가도록 제작하여 특징을 주었기 때문입니다. 본문의 너비는 구글 광고가 두개 들어가는 사이즈로 680px 입니다. 플로팅 메뉴가 있는 우측 사이드바는 너비가 250px 입니다. 하단에 위치한 사이드바의 너비는 왼쪽과 오른쪽 똑같이 310px 입니다. 이 스킨의 특징을 하나 하나 알려드리겠습니다. 특징. 1. 대표글꼴 - 나눔고딕..

티스토리/스킨배포2012. 1. 20. 16:32

demunWhite 스킨이 1단,2단,3단 각각 존재합니다. 2단과 3단을 같은 글에 써서 글을 두개로 분리했습니다. 전제적인 특징은 2단 스킨에 대한 글을 참고하세요. 자세히 적었습니다. demunWhite 3단 스킨도 2가지 테마를 가지고 있습니다. 화이트, 블랙 테마는 화이트가 기본입니다. 이름을 정할때 다른 스킨들도 화이트라는 이름이 많아서 저는 구별하기위해 demun 이라는 이름을 붙였습니다. 그래서 기본 이름은 demunWhite 입니다. 1. 화이트 테마, 블랙 테마. 이 스킨은 애초에 기획단계부터 다른 테마와 같이 사용할것을 전제로 만들어졌습니다. 기본 테마는 화이트테마로 만들어졌지만 어두운 색을 좋아하는 사람을 위해 블랙테마도 적용할 수 있습니다. 이 또한 스타일을 덮어쓰는 형식을 취했으..

티스토리/스킨변경제작이력2012. 1. 17. 20:52

1단 스킨을 만들때 적용했던 따라다니는 플로팅메뉴를 사이드바형식으로 적용했습니다. 사이드바는 전부 하단으로 내렸습니다. 사이드바도 플로팅 메뉴로 사용할 수 있게끔했지만 항상 따라다니기 때문에 높이제약이 있어 사이드바 메뉴 한두개 정도만 적용이 가능합니다. 많이 적용하면 보이질 않아요.... 플로팅 메뉴를 사이드바에 구성한것은 온오프믹스 사이트나 기타 신문사 사이트에 보면 징글징글하게 광고가 따라다니죠....ㅎㅎㅎㅎ 이걸 착안으로 한번 만들어 봤습니다. 광고야 나중에 떼면 되니까요.... 여기서 신경을 쓴것은 티스토리는 상단에 tistorytoolbarid 라는 메뉴가 있습니다. 요걸 아예 위에 배치하는 장소를 마련했습니다. 왼쪽으로는 소셜아이콘으로 배치를 했지요. 상단에 아이콘과 사이드바의 아이콘은 하나..

티스토리/스킨배포2012. 1. 17. 06:00

이전에 제작한 스킨 demunWhite1Col 은 애초부터 레이아웃 해상도를 변경하기 좋게 코드를 짯습니다. 제가 개인적으로 구글 애드센스를 달기좋게 본문너비를 730px 로 맞추어서 분명 다른분들도 있을거라 생각하고 레이아웃을 수정하기 좋게 만들었지요. 730px 가 본문너비로 적은것은 아니지만 1단 스킨이라면 남는 공간이 있지요. 그래서 플로팅 메뉴를 만들었지만 역시나 더 넓게 사용하고자 하는분들에게 필요한 해상도 레이아웃을 만들었습니다. 두가지 입니다. 1024의 해상도에서 사용하는 CSS 와 1280의 해상도에서 사용하는 CSS 이렇게 두개입니다. 각각의 해상도에는 1024css 와 ie7.css 이렇게 두개가 필요합니다. ie7이하 특히 ie6까지 호환하기 위해 수정이 필요하죠. 즉 1024해상..

티스토리/스킨배포2012. 1. 16. 14:00

이전에 만들었던 스킨을 레이아웃만 조정해서 이번에는 1단 스킨을 만들었습니다. 1단스킨은 사이드바가 없는 관계로 옆이 아무래도 허전한 느낌이 듭니다. 이점이 1단 스킨의 단점이기도 하지요. 그래서 이번에는 그 부분을 보완하기위해 플로팅메뉴(스크롤하면 따라다니는 메뉴)를 추가했습니다. 이 플로팅 메뉴도 선별해서 아주 가벼운것으로 적용했습니다. jQuery 로 적용된것들도 많은데 순수 자바스크립트로만 구성된 플로팅메뉴로써 가벼운것으로 적용을 했습니다. 여기에는 위로, 아래로 이동하는 링크와 광고를 넣어서 미리보기를 만들어봤습니다. 기본글꼴로 나눔고딕을 사용하며, 나눔고딕이 설치되어 있지 않을경우 웹폰트로 나눔고딕으로 보여지게 했습니다. 이전과 마찬가지로 black.css 주석만 제거하면 바로 블랙테마로 손쉽..

티스토리/스킨배포2012. 1. 10. 06:00

demunWhite 스킨 배포에 대한 글을 수정합니다. 2단과 3단 스킨을 같이 배포해서 글을 분리했습니다. 여기서는 demunWhite 2단 스킨에 대한 소개와 공통적으로 적용된 특징에 대해서 이야기 합니다. 우선 이번 demunWhite 의 스킨은 종류가 3가지 입니다. 그리고 각각 2가지 테마를 가지고 있습니다. 화이트, 블랙 테마는 화이트가 기본입니다. 이름을 정할때 다른 스킨들도 화이트라는 이름이 많아서 저는 구별하기위해 demun 이라는 이름을 붙였습니다. 그래서 기본 이름은 demunWhite 입니다. demunWhite 의 특징들을 소개합니다. 1. 가볍습니다. 이미지를 최소화할려고 노력하였고 이미지 없이 제작하려하다보니 너무 밑밑해서 아이콘 이미지를 넣었습니다. ie6 을 감안해서 모두 ..

티스토리/스킨변경제작이력2012. 1. 3. 06:00

이전에 제작한 스킨은 html5로 마크업한 스킨이였습니다. 현재 ie 가 지원하지 않는 부분이 많아서 어려움이 많았습니다. 다른곳의 html5로 제작된 스킨을 보면 ie 6,7로는 도저히 볼수 없던 사이트들이 많습니다. 하위 브라우져의 호환성을 염두해두지 않고 무작정 신기술인 html5로만 마크업을 했기 때문이지요. 하지만 이전에 제작한 html5로 마크업한 Gray Border 스킨은 써핑할 정도는 되게끔 제작되었습니다. html5는 자바스크립트에도 영향을 미칩니다. 여하튼 이번에는 비교적 가볍고, 깔끔한 스킨을 제작하려 했습니다. 되도록이면 이미지를 사용안하려고 했으며 비교적 색상을 입히지 않고 원초적인 화이트 색상을 유지하려 했습니다. doctype 가 xhtml 이니 만큼 하위 브라우져에도 신경을..