2008/10/31 19:31
티스토리 skyfac.diary v1.1 스킨을 공개합니다. 블로그 스킨2008/10/31 19:31
다운받기
skyfactory_diary_black.zip지난 skyfac.diary v1.0 스킨에서 몇 가지 수정을 거친후 v1.1 을 발표하게 되었습니다. 수정 된 사항은 다음과 같습니다.
- 레이아웃 최적화하기(메인 영역을 늘릴 때 쉽게 변경할 수 있도록)
- 카운터 수정하기(누적카운트 수가 올라가면 줄이 내려가는 현상 발생)
- rss feed / designed by skyfac.com 위치 옮기기
- 관리자모드 링크(기존의 새글쓰기에서 관리자 메뉴로 바꾸었습니다.)
- 기본 폰트 수정(나눔고딕/맑은고딕)
- wysiwyg.css 수정하기
- 코멘트 표시방식 수정
- 가로폭 수정(600px)
- 제목 플래시 조각 업데이트 버전 탑재(http://minsangk.com/85 참고)
이 스킨에서는 네이버에서 제공하는 '나눔고딕체'를 기본 글꼴로 사용하고 있습니다. 나눔 고딕체는 이곳에서 다운받으실 수 있습니다. 아래는 나눔고딕체를 적용했을 때의 모습입니다.
나눔고딕체가 없으면 맑은고딕체가 기본 글꼴로 표시됩니다. 각자의 기호에 맞게 사용하시면 됩니다.
스킨의 가로폭 수정
다음으로 많은 분들이 항상 문의하시는 스킨의 가로폭 수정에 대해 알려드리겠습니다. 가로폭을 수정하고 싶으실 때는 style.css 를 연 후 다음 내용을 수정하면 됩니다.
1 /* +++++++++++++++++++++++++++++++++++++++++++++++++
2 Layout
3 +++++++++++++++++++++++++++++++++++++++++++++++++ */
4 #container { margin:0 auto; width:810px;}
5 #header { width:600px; padding:5px; margin:0; background-color:#333; }
6 #content { width:600px; background-color:#fff; margin:0; padding:5px; float:left; clear:both; }
7 #sidebar { width:180px; background-color:#333; padding:0 10px; float:right;}
8 #footer { width:810px; clear:both; margin:0 auto; padding-top:15px;}
9
10
- 코멘트 입력창 부분
#content .writeForm .comment_content { background:url(images/bgInput.gif) 0 0 no-repeat white; border:1px solid #999; width:505px; padding:3px 2px; margin-top:5px; }
- 방명록 입력창 부분
.guestbook .writeForm .guestbook_content{ background:url(images/bgInput.gif) 0 0 no-repeat white; margin-top:5px; width:550px; height:50px; border:1px solid #999; overflow:visible;}
- 방명록 입력 버튼 부분
#content .writeForm .btnComment_gb { width:550px; font:7pt verdana; color:#555; margin-top:3px; padding:2px 0; border:1px solid #999; background-color:#eee; font-weight:bold;}
- 먼저 컨텐츠 영역의 width는 현재 600px로 지정되어 있습니다. 늘리거나 줄이고 싶은 만큼 #header와 #content의 width 값을 설정합니다.
- 늘이거나 줄인만큼 #container와 #footer의 width값을 변경합니다.(예를들어 컨텐츠 영역의 폭을 650으로 늘렸다면 #header와 #content의 width는 600px로 #container와 #footer는 현재 값보다 50을 늘린 860px를 입력합니다.
- index.xml 파일을 열어 <contentWidth>600</contentWidth>의 값을 변경합니다. 변경후에는 다시 업로드 합니다.(글을 쓰거나 편집할 때 나오는 창의 가로폭을 조절하는 역할을 합니다.)
- 기본값(600px) 보다 크기를 줄이실 때는 코멘트 입력창의 길이와 방명록 입력창의 길이도 함께 줄여주셔야 합니다.
글씨체 바꾸는 방법
style.css
*:lang(ko-kr) { font-family: "나눔고딕", "Malgun Gothic", gulim, dotum, applegothic, sans-serif;}
*:lang(en-us) { font-family: verdana, helvetica, sans-serif;}
body { font: 0.75em "나눔고딕", "Malgun Gothic"; line-height:1.5; color:#333; background-color:#333; padding:30px;}
#content .commentList { margin-top:10px; font:10pt/150% "나눔고딕", "Malgun Gothic", gulim; color:#333;}
.article { font:10.5pt/140% "나눔고딕", "Malgun Gothic", gulim, verdana; color:#333; overflow:hidden; text-align: justify; margin-top:10px;}
style.css 파일을 연 후 위의 내용을 찾아 원하는 폰트와 크기로 바꾸시면 됩니다.
스킨이 적용 된 페이지 : http://diary.skyfac.com
* 주의사항 : 위 페이지는 테스트용 페이지가 아닌 저의 일상을 기록하는 공간입니다. 따라서 시험 삼아 코멘트를 달아보셨다면 꼭 삭제해 주시기 바랍니다.
기타 스킨에 관한 문의사항은 http://diary.skyfac.com/16 에 남겨주시기 바랍니다. 감사합니다.
'블로그 스킨' 카테고리의 다른 글
| 스킨 제작 팁 - 비밀댓글, 운영자댓글에 강조효과 주기 (0) | 2009/05/20 |
|---|---|
| basic_gray 스킨 수정 배포 합니다. (5) | 2009/03/22 |
| 티스토리 skyfac.diary v1.1 스킨을 공개합니다. (21) | 2008/10/31 |
| 티스토리용 skyfac.diary 스킨을 공개합니다. (13) | 2008/09/12 |
| skyfac.diary 스킨 제작 중 (0) | 2008/09/07 |
| 티스토리 카테고리 펼치기 / 환경설정 대로 표시하기 (0) | 2008/09/02 |
댓글을 달아 주세요
배포하신 스킨을 좀 수정해서 사용했어요~
예전에 제가 처음 스킨 수정해서 사용한것도 엔하늘님거였는데.. ^^
항상 좋은 스킨 만들어주셔서 감사해요!!
별말씀을요~~ 가보니까 눈이 부시던데요 ㅋㅋ
관심 가져 주셔서 감사합니다!!^^
비밀댓글 입니다
앗 이렇게 찾아주셔서 감사합니다.
마음같아서는 제가 직접 도와드리고 싶은데
시간이 허락하질 않아서요(죄송합니다;;)
대신 조금 말씀을 드리자면
먼저 skin.html에서
<input type="text" class="comment_content" id="[ ##_rp_input_comment_## ]_[ ##_article_rep_id_## ]" name="[ ##_rp_input_comment_## ]" onKeypress="if (event.keyCode == 13) { [ ##_rp_onclick_submit_## ]}" value="내용을 입력하세요." onclick="this.value='';"></input>
이 부분을 찾으신후 위에 input type=text를 input type=textarea 로 바꾸셔야 할 거예요. 그래야 여러줄을 입력할 수 있거든요
그리고 style.css에서
#content .writeForm .comment_content { background:url(images/bgInput.gif) 0 0 no-repeat white; border:1px solid #999; width:505px; padding:3px 2px; margin-top:5px; }
부분을 찾으신 후
width 값과 height 값을 적당히 설정하시면 됩니다.
그리고 플래시는 제가 만든게 아니라 제목이 긴 경우에는 짤리구요.. 그건 제가 어떻게 해 드릴수가 없네요;;
대신 없애고 싶으시면
skin.html에서
<span class="title"><h2>
<script language="javascript">
showTitle("./images/", "viewTitle.swf", 480, 30, " ", "[ ##_article_rep_link_## ]", "center", "0x333333");
</script></h2></span>
이부분 찾으신 후 다른 부분은 다 지우고
<h2><a href="[ ##_article_rep_link_## ]">[ ##_article_rep_title_## ]</a></h2>
이렇게 하시면 될 것 같네요.
또 안 되면 코멘트 남겨 주세요.
좋은 하루 되세요:)
* 치환자 [ ##_xxx_## ] 처럼 생긴 것은
'[' 괄호와 # 사이에 공백이 없어야 합니다. 코멘트에서 치환자를 그대로 쓰면 공백처리가 되어서 일부러 괄호와 샵사이에 한 칸씩 띄웠습니다. 참고하세요~
왓! 너무 감사합니다~ 친절하게 제 블로그까지 와서 방법도 알려주시구요~ 덕분에 원하던대로 고쳤습니다! 앞으로도 애용하며^^ 잘 쓰겠습니다!
감사합니다!!
감사합니다. 스킨 잘 쓰시기 바랍니다^^
엔하늘님의 스킨 잘 사용하고 있습니다.
좋은 스킨 배포해 주셔서 감사합니다 .^^
감사합니다. 스킨 잘 쓰시기 바랍니다^^
비밀댓글 입니다
플래시에는 한자 및 특수문자가 포함되어 있지 않습니다. 그래서 일어나 한자를 사용하시려면 플래시를 제거하셔야 합니다^^; 제목이 긴 것도 플래시의 한계이므로 플래시를 제거하시면 모든 문제를 해결하실 수 있을 것 같습니다.
답변이 늦어서 죄송합니다.
엔하늘님 안녕하세요^^
스킨 잘 이용하고 있습니다
티스토리 스킨 만드는게 너무 어렵고 기본 스킨은 맘에드는게 없어서 포기하고 있었는데 엔하늘님 덕분에 블로그 시작하게 되었어요
감사합니다!! 잘 쓸게요!!!
별말씀을요. 감사합니다^^
감사합니다, 잘 쓸게요~ ㅜㅜ너무 이쁘네요..티스토리 기본 스킨 말고 이런 좋은 게 있었다니...정말 무궁무진한 세계네요..ㅎ 다시 한번 감사드려요~
별말씀을요^^;;
좋은 하루 되세요:)
블로그 이미지가 크기 설정이 안되고 그냥 나오네요..
제 블로그 확인 부탁드려요,^^
그건 아마 제가 블로그 이미지를 사용 안했었기 때문에 신경을 안 썼던 것 같네요^^;
style.css에서 blog image 부분에
width값과 height 값을 조절하시면 될 것 같습니다!
아니면 이미지 사이즈를 작게 해서 올리는 것도
한 가지 방법이 될 수 있겠네요^^;
감사히 잘 사용하겠습니다.
덕분에 예쁜 스킨 가져갑니다. ^^
우아 감사해요 ㅠ.ㅠ 덕분에 잘 사용하고 있습니다.
글씨체 바꾸는 방법도 쉽게 잘 설명해주셔서 감사해요!!!
스킨 받아가요.. 너무 이쁘고 좋아서 그냥 저질러 버렸어요. 감사합니다.
스킨이 넘 맘에 들어서 살짝 수정해서 사용중입니다^^
진짜 살짝 손보니까 너무너무 맘에 드네요.
소스가 수정하기도 너무 좋구요~ 최곱니다^^b
트랙백 보냈어요~
스킨이 정말 마음에 드네요 ^^
이쁜스킨을 만들어주셔서 정말 감사합니다. 최고최고에요~!