Stripe_Default 티스토리 2단 스킨 배포
- 티스토리/스킨배포
- 2012. 2. 1. 06:00
대문입니다. 제가 이제까지 사용하던 스킨을 배포합니다.
오랫동안 이것 저것 만지며 테스트를 거쳐왔기 때문에 오류가 거의 없지 않나 생각됩니다.
원래 스킨명은 Stripe(스프라이프) 였는데 메인메뉴와 하단의 푸터부분을 수정하면서 그 부분을 추가한 버젼도 필요하면 배포하려고 스킨명을 Stripe_Default 로 정했습니다.
스프라이프로 이름을 정한것은 각각의 배경에 스프라이프가 들어가도록 제작하여 특징을 주었기 때문입니다.
본문의 너비는 구글 광고가 두개 들어가는 사이즈로 680px 입니다.
플로팅 메뉴가 있는 우측 사이드바는 너비가 250px 입니다.
하단에 위치한 사이드바의 너비는 왼쪽과 오른쪽 똑같이 310px 입니다.
이 스킨의 특징을 하나 하나 알려드리겠습니다.
이 스킨에는 웹폰트를 사용하지 않았습니다. 웹폰트를 설치하려면 웹폰트를 사용하는 또 다른 방법(API) 이용을 보시면 됩니다.
대표글꼴로 나눔고딕을 설정했습니다.
그래서 나눔글꼴이 설치되어 있으면 나눔글꼴로 보이며, 맑은고딕, 돋음 ... 순으로 보여집니다.
2. w3c 통과.
html 에서는 마크업을 통과하였습니다.
여기를 클릭하시면 결과를 볼 수 있습니다.
CSS 에서는 티스토리에서 강제로 지정하는 스타일 외에는 오류가 하나도 없습니다. 이것도 여기를 클릭하면 결과를 보실수 있습니다.
w3c의 결과는 나중에 스킨이 변경되면 이 결과도 변경됩니다. 참고하세요.
혹 몰라 스샷을 첨부합니다.
CSS 는 이미지가 너무 길어 생략합니다.
3. 이미지 스트라이프와 품질.
스킨을 최적화 하려고 하나의 이미지에 이미지를 담아 background-position 으로 처리했습니다.
또한 on, hover 을 줘서 가독성을 향상 시켰습니다.
4. 아이콘 배치.
티스토리는 상단에 ttMenubar 라는 항목이 있습니다. 이걸 생각하지 않고 스킨을 만들어도 상관은 없으나 깔끔하게 배치하기 위해 왼쪽으로는 소셜아이콘이 위치하도록 하였습니다.
따로 소셜 아아콘 플러그인을 사용하지 않아도 링크만 수정해주면 사용이 가능합니다.
퀵메뉴에도 아이콘이 있습니다.
이것도 on, hover 을 사용해서 가독성을 향상시켰구요. 마우스를 갖다대보면 압니다.
5. 사이드 플로팅 메뉴.
사이드바처럼 보이지만 아래로 스크롤을 하는순간 따라 다니는 플로팅 메뉴가 적용이 되어 있습니다.
이 부분은 상당이 설명이 필요합니다.
플로팅 메뉴에 있는 모든 메뉴는 수정이 가능하도록 만들었습니다.
아래 이미지를 보시면 아실 겁니다.
플로팅 메뉴와 하단의 사이드바 메뉴는 각각 이동이 가능합니다.
단, 플로팅 메뉴의 세로너비가 한정이 되어있기 때문에 항목을 많이 놓을경우 다 안볼일수도 있습니다.
한두개 정도만 사용하세요.
1). 추천글에 사용하는 링크.
아래 이미지처럼 추천글등에 사용하려고 만들어놓은 링크입니다.
사이드바는 하단에 따로 존재합니다. 플로팅 메뉴를 활용하려고 만들어 놓은 링크입니다.
물론 사이드바 관리에서 삭제, 수정이 가능하도록 만들었습니다.
2) 따라다니는 광고.
구글 광고 사이즈 딱 맞추어서 제작을 했기 때문에 사이즈가 딱 들어갑니다.
물론 이것도 수정 가능합니다.
3) 링크 아이콘.
위에서 잠깐 설명했던 아이콘입니다. 클릭하면 홈, 아래로, 위로, 댓글로, 방명록으로 각각 이동하는 링크 아이콘입니다.
6. 부드러운 링크 이동.
플로팅 메뉴에 위치한 위로, 아래로, 댓글로 이동 버튼과 하단 푸터부분에 위치한 위로 이동 버튼을 클릭할때 부드러운 이동이 되도록 했습니다.
클릭해보시면 압니다.
7. 댓글.
댓글 부분에 신경을 썻습니다. 아이콘을 각각 다르게하여 어떤글이 비밀글이고, 방문자가 작성한 글인지, 그리고 관리자가 댓글에 대한 답글은 어떤글인지 구별하기 쉽게 하였습니다.
아래 이미지는 제가 다른 테스트 블로그에 가서 댓글을 단 모양입니다. demun 이라고 적힌 부분이 방문자 아이콘입니다.
이 아이콘은 방문자가 아이콘이 없을때 표시되는겁니다. 있을때는 방문자의 아이콘으로 표시됩니다. 아래처럼요.
7. 본문에 큰 이미지.
본문에 이미지가 큰것이 있을경우. 자동으로 본문의 사이즈에 맞쳐서 크기를 줄여줍니다.
아시는분은 아시겠지만 overflow:hidden 를 많이 사용합니다. 그럼 작은 이미지는 상관없는데 큰 이미지는 해당폭만큼만 보여지고 나머지는 짤려서 보이지 않게 됩니다.
하지만 이부분을 개선해서 모든 큰 이미지는 자동으로 본문 폭에 맞게 수정이 됩니다.
또 이부분은 ie6에서는 핵을 써야만 하는데 핵을 사용하지 않고 자바스크립트로 완벽하게 모두 지원합니다.
8. 마크업.
저의 경우 마크업 순서는 반드시 본문이 제일 먼저 오도록 합니다. 구글광고와 검색엔진때문에 본문이 사이드바보다 항상 먼저 오도록 마크업 합니다.
또 댓글 창을 먼저 마크업합니다.
방문자가 댓글을 달려고 할때 댓글이 없으면 상관없는데, 댓글이 많을 경우 무한 스크롤을 해야 합니다. 이점까지 저는 전부 알아서 댓글창이 먼저 오도록 마크업을 합니다.
제 블로그에서 댓글을 써보세요. 댓글창은 맨위에 있으니 쓰기 편할겁니다.
이 모든 사항은 크로스 브라우징 환경에 있어 IE6까지 모두 지원합니다.
w3c 테스트등 요건이 있어 CSS3에 해당하는 사항은 하나도 없습니다.그래서 웹폰트도 사용하지 않았구요.
추가적으로 사용할 분은 따로 수정해서 사용하면 됩니다.
이 스킨은 제가 구글광고나 링크등 추가적으로 미리 코드를 넣어놨습니다. 수정할 부분을 찾어서 꼭 수정한 다음 사용하시기 바랍니다.
Stripe_Default 스킨은 티스토리 사용자라면 누구나 무료로 사용할 수 있습니다.
하지만 아래의 조건이 있습니다.
1. 정상적으로 블로그를 하는 사용자입니다.
2. 스킨을 적용한 다음 현재의 글에 트랙백을 넣어주셔야 합니다.(이것은 다른분에게는 미리보기를 , 적용하신분에게는 트래픽을 제공하니 일석이조입니다.)
3. 신청하실 때 적용할 블로그 주소를 알려주어야 합니다.
위 세가지 조건이 해당되고 스킨을 사용하고 싶다면 저에게 메일로 적용할 블로그 주소를 적어서 신청 바랍니다.
hjm01@naver.com
오랫동안 이것 저것 만지며 테스트를 거쳐왔기 때문에 오류가 거의 없지 않나 생각됩니다.
원래 스킨명은 Stripe(스프라이프) 였는데 메인메뉴와 하단의 푸터부분을 수정하면서 그 부분을 추가한 버젼도 필요하면 배포하려고 스킨명을 Stripe_Default 로 정했습니다.
스프라이프로 이름을 정한것은 각각의 배경에 스프라이프가 들어가도록 제작하여 특징을 주었기 때문입니다.
본문의 너비는 구글 광고가 두개 들어가는 사이즈로 680px 입니다.
플로팅 메뉴가 있는 우측 사이드바는 너비가 250px 입니다.
하단에 위치한 사이드바의 너비는 왼쪽과 오른쪽 똑같이 310px 입니다.
이 스킨의 특징을 하나 하나 알려드리겠습니다.
특징.
1. 대표글꼴 - 나눔고딕.이 스킨에는 웹폰트를 사용하지 않았습니다. 웹폰트를 설치하려면 웹폰트를 사용하는 또 다른 방법(API) 이용을 보시면 됩니다.
대표글꼴로 나눔고딕을 설정했습니다.
그래서 나눔글꼴이 설치되어 있으면 나눔글꼴로 보이며, 맑은고딕, 돋음 ... 순으로 보여집니다.
2. w3c 통과.
html 에서는 마크업을 통과하였습니다.
여기를 클릭하시면 결과를 볼 수 있습니다.
CSS 에서는 티스토리에서 강제로 지정하는 스타일 외에는 오류가 하나도 없습니다. 이것도 여기를 클릭하면 결과를 보실수 있습니다.
w3c의 결과는 나중에 스킨이 변경되면 이 결과도 변경됩니다. 참고하세요.
혹 몰라 스샷을 첨부합니다.
CSS 는 이미지가 너무 길어 생략합니다.
3. 이미지 스트라이프와 품질.
스킨을 최적화 하려고 하나의 이미지에 이미지를 담아 background-position 으로 처리했습니다.
또한 on, hover 을 줘서 가독성을 향상 시켰습니다.
4. 아이콘 배치.
티스토리는 상단에 ttMenubar 라는 항목이 있습니다. 이걸 생각하지 않고 스킨을 만들어도 상관은 없으나 깔끔하게 배치하기 위해 왼쪽으로는 소셜아이콘이 위치하도록 하였습니다.
따로 소셜 아아콘 플러그인을 사용하지 않아도 링크만 수정해주면 사용이 가능합니다.
퀵메뉴에도 아이콘이 있습니다.
이것도 on, hover 을 사용해서 가독성을 향상시켰구요. 마우스를 갖다대보면 압니다.
5. 사이드 플로팅 메뉴.
사이드바처럼 보이지만 아래로 스크롤을 하는순간 따라 다니는 플로팅 메뉴가 적용이 되어 있습니다.
이 부분은 상당이 설명이 필요합니다.
플로팅 메뉴에 있는 모든 메뉴는 수정이 가능하도록 만들었습니다.
아래 이미지를 보시면 아실 겁니다.
플로팅 메뉴와 하단의 사이드바 메뉴는 각각 이동이 가능합니다.
단, 플로팅 메뉴의 세로너비가 한정이 되어있기 때문에 항목을 많이 놓을경우 다 안볼일수도 있습니다.
한두개 정도만 사용하세요.
1). 추천글에 사용하는 링크.
아래 이미지처럼 추천글등에 사용하려고 만들어놓은 링크입니다.
사이드바는 하단에 따로 존재합니다. 플로팅 메뉴를 활용하려고 만들어 놓은 링크입니다.
물론 사이드바 관리에서 삭제, 수정이 가능하도록 만들었습니다.
2) 따라다니는 광고.
구글 광고 사이즈 딱 맞추어서 제작을 했기 때문에 사이즈가 딱 들어갑니다.
물론 이것도 수정 가능합니다.
3) 링크 아이콘.
위에서 잠깐 설명했던 아이콘입니다. 클릭하면 홈, 아래로, 위로, 댓글로, 방명록으로 각각 이동하는 링크 아이콘입니다.
6. 부드러운 링크 이동.
플로팅 메뉴에 위치한 위로, 아래로, 댓글로 이동 버튼과 하단 푸터부분에 위치한 위로 이동 버튼을 클릭할때 부드러운 이동이 되도록 했습니다.
클릭해보시면 압니다.
7. 댓글.
댓글 부분에 신경을 썻습니다. 아이콘을 각각 다르게하여 어떤글이 비밀글이고, 방문자가 작성한 글인지, 그리고 관리자가 댓글에 대한 답글은 어떤글인지 구별하기 쉽게 하였습니다.
아래 이미지는 제가 다른 테스트 블로그에 가서 댓글을 단 모양입니다. demun 이라고 적힌 부분이 방문자 아이콘입니다.
이 아이콘은 방문자가 아이콘이 없을때 표시되는겁니다. 있을때는 방문자의 아이콘으로 표시됩니다. 아래처럼요.
7. 본문에 큰 이미지.
본문에 이미지가 큰것이 있을경우. 자동으로 본문의 사이즈에 맞쳐서 크기를 줄여줍니다.
아시는분은 아시겠지만 overflow:hidden 를 많이 사용합니다. 그럼 작은 이미지는 상관없는데 큰 이미지는 해당폭만큼만 보여지고 나머지는 짤려서 보이지 않게 됩니다.
하지만 이부분을 개선해서 모든 큰 이미지는 자동으로 본문 폭에 맞게 수정이 됩니다.
또 이부분은 ie6에서는 핵을 써야만 하는데 핵을 사용하지 않고 자바스크립트로 완벽하게 모두 지원합니다.
8. 마크업.
저의 경우 마크업 순서는 반드시 본문이 제일 먼저 오도록 합니다. 구글광고와 검색엔진때문에 본문이 사이드바보다 항상 먼저 오도록 마크업 합니다.
또 댓글 창을 먼저 마크업합니다.
방문자가 댓글을 달려고 할때 댓글이 없으면 상관없는데, 댓글이 많을 경우 무한 스크롤을 해야 합니다. 이점까지 저는 전부 알아서 댓글창이 먼저 오도록 마크업을 합니다.
제 블로그에서 댓글을 써보세요. 댓글창은 맨위에 있으니 쓰기 편할겁니다.
이 모든 사항은 크로스 브라우징 환경에 있어 IE6까지 모두 지원합니다.
w3c 테스트등 요건이 있어 CSS3에 해당하는 사항은 하나도 없습니다.그래서 웹폰트도 사용하지 않았구요.
추가적으로 사용할 분은 따로 수정해서 사용하면 됩니다.
이 스킨은 제가 구글광고나 링크등 추가적으로 미리 코드를 넣어놨습니다. 수정할 부분을 찾어서 꼭 수정한 다음 사용하시기 바랍니다.
Stripe_Default 스킨은 티스토리 사용자라면 누구나 무료로 사용할 수 있습니다.
하지만 아래의 조건이 있습니다.
1. 정상적으로 블로그를 하는 사용자입니다.
2. 스킨을 적용한 다음 현재의 글에 트랙백을 넣어주셔야 합니다.(이것은 다른분에게는 미리보기를 , 적용하신분에게는 트래픽을 제공하니 일석이조입니다.)
3. 신청하실 때 적용할 블로그 주소를 알려주어야 합니다.
위 세가지 조건이 해당되고 스킨을 사용하고 싶다면 저에게 메일로 적용할 블로그 주소를 적어서 신청 바랍니다.
hjm01@naver.com