달력

03

« 2010/03 »

  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
2009/05/20 15:26

스킨 제작 팁 - 비밀댓글, 운영자댓글에 강조효과 주기 블로그 스킨2009/05/20 15:26

  텍스트큐브, 티스토리의 블로그를 둘러보다 보면 비밀댓글의 색깔이 다르게 지정되어 있는 것을 흔히 볼 수 있다. 기본 스킨의 경우 주로 붉은색 계열이었는데 보통 댓글과 쉽게 구분할 수 있다는 점에서 유용하다고 생각한다. 그런데 오늘 내 블로그의 스킨을 수정하다가 운영자의 댓글 및 방명록의 스타일을 지정할 수 있는 class를 발견했다. 아직까지 운영자가 쓴 댓글을 강조해 주는 블로그는 본적이 없는 것 같은데 운영자가 쓴 글을 강조 하고 싶다면 아래를 참고하여 style.css 파일을 수정해 보자.

/* 종류별 코멘트 */
    .rp_general                 { }
    .rp_admin                   { }
    .rp_secret                   { }

/* 종류별 코멘트 */
    .guest_general            { }
    .guest_admin              { }
    .guest_secret              { }

 general은 일반 사용자, admin은 운영자, secret은 비밀글이다. 중괄호{}안에 color속성이나 font-weight 속성을 주어 강조할 수 있다. 또한 rp로 시작하는 것은 일반 댓글이고 guest로 시작하는 것은 방명록에 해당된다.


저작자 표시 비영리 변경 금지

'블로그 스킨' 카테고리의 다른 글

스킨 제작 팁 - 비밀댓글, 운영자댓글에 강조효과 주기  (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
TAG 방명록, 비밀댓글, 스킨, 운영자, 텍스트큐브, 티스토리, 팁
Trackback (0) : Comment (0)
Posted by 엔하늘

댓글을 달아 주세요

2009/03/22 15:50

basic_gray 스킨 수정 배포 합니다. 블로그 스킨2009/03/22 15:50


 basic_gray 2단 스킨 수정 배포 합니다[각주:1]. 티스토리에서 기본 스킨으로 등록되어 있는 것을 기존의 3단에서 2단으로 바꾼 후 가로폭을 좀 넓게 수정하였습니다. 태터툴즈에서 사용하실 분들은 메뉴에서 간단히 미디어로그만 삭제하고 사용하시면 될 것 같습니다. 현재 본문의 가로폭은 700px이며 손쉽게 수정하실 수 있습니다.

basic_gray2.zip

  1. 예전 블로그에서 2007년에 수정 배포하였던 자료를 찾아서 다시 배포합니다. [본문으로]
저작자 표시 비영리 변경 금지

'블로그 스킨' 카테고리의 다른 글

스킨 제작 팁 - 비밀댓글, 운영자댓글에 강조효과 주기  (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
TAG 배포, 스킨, 티스토리
Trackback (0) : Comment (5)
Posted by 엔하늘

댓글을 달아 주세요

  1. 2009/03/25 01:09  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  2. 가젯킹 2009/07/19 21:56  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 가젯킹입니다.
    하늘 공작소님의 스킨을 감사히 잘 사용하고 있습니다.
    급 질문이 있어서 이렇게 댓글을 남깁니다.

    혹시 본문에서 제목의 글씨크기만 크게 할 수 있을까요?
    모자란 실력에 CSS 파일을 보았지만 잘 찾을 수가 없네요

    부탁드리겠습니다.
    시간나시면 저의 블로그도 들려주시면 감사하겠습니다.

  3. 2009/12/17 00:13  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  4. lee 2009/12/30 16:19  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 스킨 정말 멋진데 화이트버전은 없는건가요?

    제일 맘에드는스킨인데 그레인게 약간 거슬려서요

    2단스킨중 가장 멋집니다!

  5. miro 2010/03/09 02:06  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 엔하늘님
    Basic gray 스킨을 블로그에 설치하여 사용하고 있습니다. 개인적으로 너무 흡족해 하며
    깔았던 스킨이라 왠만해선 바꿀일이 없을 것 같습니다. 늦게나마 감사드립니다. ^^

    다만 한 가지 불편한 부분이 있어 여기 댓글로 여쭤봅니다.
    현재 스킨에선 자신이 보고 있는 페이지가 볼드나 다른 색으로 구분이 되어 있질 않습니다.
    관련하여 볼드체로 표기가 되거나 별색을 지정하는게 가능한지, 가능하다면 어떤식으로
    수정하면 되는지 알려 주시면 감사하겠습니다. 좋은 하루 되세요.

2008/10/31 19:31

티스토리 skyfac.diary v1.1 스킨을 공개합니다. 블로그 스킨2008/10/31 19:31


다운받기


지난 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
Trackback (5) : Comment (21)
Posted by 엔하늘

댓글을 달아 주세요

  1. kkommy 2008/11/06 14:40  댓글주소  수정/삭제  댓글쓰기

    배포하신 스킨을 좀 수정해서 사용했어요~
    예전에 제가 처음 스킨 수정해서 사용한것도 엔하늘님거였는데.. ^^
    항상 좋은 스킨 만들어주셔서 감사해요!!

  2. 2008/11/12 00:00  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

    • 엔하늘 2008/11/12 19:14  댓글주소  수정/삭제

      앗 이렇게 찾아주셔서 감사합니다.
      마음같아서는 제가 직접 도와드리고 싶은데
      시간이 허락하질 않아서요(죄송합니다;;)
      대신 조금 말씀을 드리자면

      먼저 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_## ] 처럼 생긴 것은
      '[' 괄호와 # 사이에 공백이 없어야 합니다. 코멘트에서 치환자를 그대로 쓰면 공백처리가 되어서 일부러 괄호와 샵사이에 한 칸씩 띄웠습니다. 참고하세요~

  3. SHIENA 2008/11/13 15:18  댓글주소  수정/삭제  댓글쓰기

    왓! 너무 감사합니다~ 친절하게 제 블로그까지 와서 방법도 알려주시구요~ 덕분에 원하던대로 고쳤습니다! 앞으로도 애용하며^^ 잘 쓰겠습니다!
    감사합니다!!

  4. 북풍 2008/11/20 03:09  댓글주소  수정/삭제  댓글쓰기

    엔하늘님의 스킨 잘 사용하고 있습니다.
    좋은 스킨 배포해 주셔서 감사합니다 .^^

  5. 2008/12/08 17:28  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

    • 엔하늘 2009/01/03 00:14  댓글주소  수정/삭제

      플래시에는 한자 및 특수문자가 포함되어 있지 않습니다. 그래서 일어나 한자를 사용하시려면 플래시를 제거하셔야 합니다^^; 제목이 긴 것도 플래시의 한계이므로 플래시를 제거하시면 모든 문제를 해결하실 수 있을 것 같습니다.

      답변이 늦어서 죄송합니다.

  6. Seduction 2009/01/02 00:44  댓글주소  수정/삭제  댓글쓰기

    엔하늘님 안녕하세요^^
    스킨 잘 이용하고 있습니다
    티스토리 스킨 만드는게 너무 어렵고 기본 스킨은 맘에드는게 없어서 포기하고 있었는데 엔하늘님 덕분에 블로그 시작하게 되었어요
    감사합니다!! 잘 쓸게요!!!

  7. Sammie 2009/02/01 16:47  댓글주소  수정/삭제  댓글쓰기

    감사합니다, 잘 쓸게요~ ㅜㅜ너무 이쁘네요..티스토리 기본 스킨 말고 이런 좋은 게 있었다니...정말 무궁무진한 세계네요..ㅎ 다시 한번 감사드려요~

  8. 광대 2009/03/06 22:51  댓글주소  수정/삭제  댓글쓰기

    블로그 이미지가 크기 설정이 안되고 그냥 나오네요..
    제 블로그 확인 부탁드려요,^^

    • 엔하늘 2009/03/07 22:42  댓글주소  수정/삭제

      그건 아마 제가 블로그 이미지를 사용 안했었기 때문에 신경을 안 썼던 것 같네요^^;
      style.css에서 blog image 부분에
      width값과 height 값을 조절하시면 될 것 같습니다!
      아니면 이미지 사이즈를 작게 해서 올리는 것도
      한 가지 방법이 될 수 있겠네요^^;

  9. 스누피 2009/07/21 02:32  댓글주소  수정/삭제  댓글쓰기

    감사히 잘 사용하겠습니다.

    덕분에 예쁜 스킨 가져갑니다. ^^

  10. 생선 2009/08/03 09:46  댓글주소  수정/삭제  댓글쓰기

    우아 감사해요 ㅠ.ㅠ 덕분에 잘 사용하고 있습니다.
    글씨체 바꾸는 방법도 쉽게 잘 설명해주셔서 감사해요!!!

  11. 몽인 2009/11/14 22:51  댓글주소  수정/삭제  댓글쓰기

    스킨 받아가요.. 너무 이쁘고 좋아서 그냥 저질러 버렸어요. 감사합니다.

  12. 꿈꾸는엘프 2009/11/29 01:16  댓글주소  수정/삭제  댓글쓰기

    스킨이 넘 맘에 들어서 살짝 수정해서 사용중입니다^^
    진짜 살짝 손보니까 너무너무 맘에 드네요.
    소스가 수정하기도 너무 좋구요~ 최곱니다^^b

    트랙백 보냈어요~

  13. 코코아 2010/01/17 00:40  댓글주소  수정/삭제  댓글쓰기

    스킨이 정말 마음에 드네요 ^^
    이쁜스킨을 만들어주셔서 정말 감사합니다. 최고최고에요~!

2008/09/12 23:08

티스토리용 skyfac.diary 스킨을 공개합니다. 블로그 스킨2008/09/12 23:08



(클릭하면 조금 더 큰 이미지를 볼 수 있습니다.)

  지난 한주간 작업한 제 인생의 첫! 스킨입니다. 그동안 다른 분들이 만드신 스킨을 수정해 재배포만 했었는데 이렇게 밑바닥부터 스킨을 만들어보니 역시 보통일이 아니더군요. 스킨이름은 그냥 skyfac.diary로 정했습니다. 이 스킨을 만들게 된 동기가 결정적인 역할을 했습니다. 대부분의 스킨은 블로그라는 미디어의 특성상 정보를 기록/저장/발행 하는 데 최적화되어 있다보니 사이드바를 이용해 이것저것 제공하는 기능도 많고, 그래서 상당히 덩치가 커지게 되었습니다. 하지만 블로그를 운영하다보니 때로는 2~3줄짜리의 개인적인, 소소한 일상의 기록들, 혹은 사진 1장 정도만 담았으면... 하는 생각이 들게되었습니다. 그래서 불필요한 것을 다 빼고 오로지 내용에만 집중할 수 있는 비교적 작고 아담한 스킨을 만들어보자 해서 탄생한 것이 바로 skyfac.diary 스킨입니다.
  사실 스킨의 초안에는 사이드바가 전혀 없었지만 스킨을 배포해야겠다는 생각이 드니 그래도 어느 정도 기본적인 정보는 제공해야겠다 싶어 사이드바를 만들게 되었습니다. 하지만 저는 제가 필요하다 싶은 기능 이외는 모두 제거해서 사용중입니다.(관리메뉴에서 사이드바 설정을 통해) 각설하고 스킨에 대한 세부적인 특징에 대해 설명드리겠습니다.

9월 12일 추가사항

  • 스킨은 위의 그림처럼 2가지 컬러셋이 있습니다. 하나는 블랙이고 하나는 퍼플입니다. 원래는 블랙버전만 있었는데 클로즈베타테스터분(한 분 계십니다.)께서 원하시는 색상대로 하다보니 컬러셋 하나가 더 탄생하게 되었습니다.
  • 사이드바가 예쁘게 보이기 위해서는 관리->스킨->화면출력 설정 에서 사이드바의 글자수를 다음과 같이 설정해 보시기 바랍니다. (최근글 25자, 최근 댓글 27자, 최근 트랙백 27자, 공지25자) 이 수치는 단순히 제가 추천하는 것입니다. 여러분들의 입맛에 맞게 설정하여 사용하시기 바랍니다.
  • 아래의 그림처럼 기본적인 댓글은 '한줄'입니다. 개인적인 공간을 표방하는 스킨이기때문에 문단을 제공하는 것보단 한줄로 간단히 댓글을 다는 것이 더 편할 것 같아 내용을 입력하고 그냥 엔터를 치시면 됩니다.(단, 이미 운영하던 블로그에서 스킨을 바꾸었을 경우 여러줄로 이루어진 댓글이 있다면 화면출력이 다소 이상할 수도 있습니다. 이건 FF와 IE에서 같은 결과를 얻으려고 포기한 부분입니다. 제 실력이 부족해서 포기할 수 밖에 없었습니다^^;) 방명록은 여러줄로 작성할 수 있으며 댓글도 물론 엔터를 치지 않고 계속 이어서 작성하시면 긴글을 입력하실 수 있습니다.
  • 타이틀을 표시하는 플래시 파일은 민상k님이 제작하신 것을 폰트만 수정하였습니다. 이 플래시조각에 대한 자세한 설명은 이곳에서 확인하실 수 있습니다. 수정 및 배포를 허락해 주시고 각종 질문에 답변해 주신 민상k님께 이자리를 빌어 감사의 말씀을 드립니다.
  • 죄송하지만 제가 텍스트큐브를 사용하지 않는 관계로 텍스트큐브용 스킨은 제작하지 못했습니다. 하지만 혹시 필요하신 분들이 있다면 리체님의 플라이투스킨 티스토리에서 사용하기 포스트를 참고하셔 역으로 수정한다면 이용가능할 것 같습니다.
  • skyfac.diary 스킨은 사실 지금 이 블로그에서 사용되고 있는 리체님의 플라이투스킨의 skin.html 파일과 style.css 를 뼈대로 제작되었습니다. 리체님께도 감사의 말씀을!!^^
  • 클로즈베타테스트를 만 하루만에 무사히 마쳐주신 앨리스님께도 감사의 말씀을 드립니다.
  • 블랙버전은 http://diary.skyfac.com 에서 퍼플버전은 http://soulmelody.tistory.com 에서 확인하실 수 있습니다.
  • 처음 만든 스킨이라 부족한 점이 많을 수 있지만 혹시 출력에 문제가 있다거나 이상이 있으시면 언제든지 댓글 부탁드립니다.
  • 제작 및 테스트 환경은 IE6, FF3 입니다. 감사합니다.

skyfactory_diary_purple.zip

저작자 표시 비영리 변경 금지

'블로그 스킨' 카테고리의 다른 글

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
플라이투 티스토리용 스킨 배포합니다.  (29) 2008/07/17
TAG skyfac.diary, 스킨, 티스토리
Trackback (2) : Comment (13)
Posted by 엔하늘

댓글을 달아 주세요

  1. PPoZZak 2008/09/13 08:38  댓글주소  수정/삭제  댓글쓰기

    오홋! 깔끔합니다 멋져요 ^^
    가볍워서 좋고 심플해서 좋아요~
    잘 쓸게요

  2. 달님　 2008/09/18 16:07  댓글주소  수정/삭제  댓글쓰기

    제가 잘 몰라서 질문이요~~
    1.
    가로폭을 늘리고 싶은데 소스편집 부분에 들어가도 손댈게 한두군데가 아닌 것 같아서 못했어요 ㅠ_ㅠ
    본문 가로폭을 늘리려면 어떤걸 수정해야 할까요?
    2.
    그리고 카테고리가 기본 펼쳐지게 하고 싶으면 뭘 수정해야 할까요?
    3.
    제목이 길어서 짤리는 경우는 어떻게 해야 하죠?
    (여러가지 물어서 죄송합니다...)

  3. lvodman 2008/10/07 19:52  댓글주소  수정/삭제  댓글쓰기

    본문의 가로폭을 좀 더 늘리고 싶은데 어떻게 해야 하는지요?

    꼭 알려주시면 감사하겠습니다.

    • lvodman 2008/10/07 20:19  댓글주소  수정/삭제

      자문자답입니다. 폭을 600px으로 넓힌 style.css입니다.

      @charset "utf-8";

      /* +++++++++++++++++++++++++++++++++++++++++++++++++
      諛섎뱶???ㅼ뼱媛€???섎뒗 ?ㅽ????쒖옉
      +++++++++++++++++++++++++++++++++++++++++++++++++ */

      /* ?섏씠吏?- ?꾩옱 ?섏씠吏€ */
      .selected { font-weight:bold; color:#f30;}
      .no-more-prev,
      .no-more-next { color:#ccc;}

      /* 移댄뀒怨좊━ - ?대?吏€ 踰꾪듉 */
      .ib { }

      /* 移댄뀒怨좊━ - ?몃━ ?€ */
      .branch3 { }

      /* 移댄뀒怨좊━ - 移댄뀒怨좊━ ??媛쒖닔 ?ㅽ???*/
      .c_cnt { font:0.75em Tahoma; letter-spacing:0; color:#006666;}

      /* ?щ젰 ???쒖떆 */
      .cal_month { height:20px; font-weight:bold; letter-spacing:0;}

      /* ?щ젰 ?붿씪 ?쒖떆(th ?곸뿭) */
      .cal_week1 { height:20px;}

      /* ?щ젰 ?쇱슂???쒖떆(th ?곸뿭) */
      .cal_week2 { color:#f30; }

      /* ?щ젰 Week(tr ?곸뿭) */
      .cal_week { }
      .cal_current_week { }

      /* ?щ젰 Day(td ?곸뿭) */
      .cal_day { text-align:center;}

      /* ?щ젰 Day, ?쇱슂??(td ?곸뿭) */
      .cal_day_sunday { color:#f30;}
      .cal_day_sunday a { color:#f30;}

      /* ?щ젰 吏€?????좎쭨 ?쒖떆(td) ------------------------> ?ъ슜?섍퀬 ?덉? ?딆?寃?媛숈쓬 */
      .cal_day1 { }

      /* ?щ젰 ?ㅼ쓬 ???좎쭨 ?쒖떆(td) ------------------------> ?ъ슜?섍퀬 ?덉? ?딆?寃?媛숈쓬 */
      .cal_day2 { }

      /* ?щ젰 ?대쾲 ???좎쭨 ?쒖떆(td) */
      .cal_day3 { }

      /* ?щ젰 ?ㅻ뒛 ?좎쭨 ?쒖떆(td) */
      .cal_day4 { color:#000; font-weight:bold; background-color:#eee;}

      /* ?щ젰 湲€????留곹겕 ?ㅽ???*/
      a.cal_click:link { color:#333; text-decoration:underline;}
      a.cal_click:visited { color:#333; text-decoration:underline;}
      a.cal_click:hover { color:#f30; text-decoration:underline;}

      /* 醫낅쪟蹂?肄붾찘??rp_general */
      .rp_general { }
      .rp_admin { } /* ?대옒?ㅻ챸???쒕?濡??ъ슜?섍퀬 ?덉? ?딆?寃?媛숈쓬 */
      .rp_secret { }

      /* 醫낅쪟蹂?肄붾찘?? */
      .guest_general { }
      .guest_admin { } /* ?대옒?ㅻ챸???쒕?濡??ъ슜?섍퀬 ?덉? ?딆?寃?媛숈쓬

      /* 鍮꾨? ?볤? (濡쒓렇?꾩썐??鍮꾨?湲€ ?쒗쁽) */
      .hiddenComment { }

      /* ?대?吏€ ?꾨옒 罹≪뀡 ?ㅽ???*/
      .cap1 { color:#999; text-align:center;}

      /* 洹몃┝ */
      .imageblock { }

      /* ?쇱そ */
      .left {}

      /* 媛€?대뜲 */
      .center {}

      /* ?ㅻⅨ履?*/
      .right {}

      /* 洹몃┝ 2媛?諛곗튂 */
      .dual {}

      /* 洹몃┝ 3媛?諛곗튂 */
      .triple {}

      /* 蹂몃Ц - more / less */
      .moreless_fold { color:#000; font-weight:bold;}
      .moreless_top { color:#000; font-weight:bold;}
      .moreless_body { background-color:#f5f5f5;} /* ?대옒?ㅻ챸??moreless-content濡?諛붾€먮벏 */
      .moreless_bottom { color:#999; font-weight:bold; text-align:right; }

      /* ?ㅼ썙??*/
      .key1 { cursor: pointer; border-bottom: 1px dotted #ccc; }


      /* +++++++++++++++++++++++++++++++++++++++++++++++++
      諛섎뱶???ㅼ뼱媛€?쇳븯???ㅽ?????- ???꾨옒???먯쑀濡?쾶 異붽?, ??젣 媛€??
      +++++++++++++++++++++++++++++++++++++++++++++++++ */

      *:lang(ko-kr) { font-family: gulim, dotum, applegothic, sans-serif;}
      *:lang(en-us) { font-family: verdana, helvetica, sans-serif;}

      body { font: 0.75em gulim, "Malgun Gothic"; line-height:1.5; color:#555; background-color:#333; padding:30px;}
      a:link { color:#555; text-decoration:none;}
      a:visited { color:#555; text-decoration:none;}
      a:hover { color:#339999; text-decoration:none;}
      a:active { color:#339999;}

      * { padding:0; margin:0; border:0;}
      button { cursor:pointer; font-family:"Lucida Sans", "Lucida Sans Unicode"; padding:1px 2px 0 2px;}
      textarea { font: 9pt dotum; border:1px solid #bbb; background-color:#fff; padding:3px;}
      input { font: 9pt dotum; }
      .textField { border:1px solid #bbb; background-color:#fff; padding:3px 2px 1px 2px;}

      hr { display:none;}

      h1 { font-size:1.6em;}
      h2 { font-size:1.4em;}
      h3 { font-size:1.4em;}
      h4 { font-size:1.2em;}
      h5 { font-size:1.1em;}
      h6 { font-size:1em;}

      .date { font:0.9em Tahoma;}
      .name { font-size:1em;}
      .cnt { font:0.9em Tahoma; color:#003366;}


      /* +++++++++++++++++++++++++++++++++++++++++++++++++
      Layout
      +++++++++++++++++++++++++++++++++++++++++++++++++ */
      #p_container { margin:0 auto; width: 840px;}
      #main_container { float:left; width:625px;}
      #title_container { width:625px; padding:5px; margin:0 auto; background-color:#333; }
      #header { float:left; background-color:#333;}
      #menu { float:right; font:7pt verdana; background-color:#333; margin-top:5px;}
      #container { clear:both; width:625px; padding:5px; margin:0 auto; background-color:#fff;}
      #body { background-color:#fff; border:1px dashed #ccc;}
      #content { width:600px; padding:10px;}
      #sidebar { float:right; width:180px; margin-top:50px; background-color:#333; padding:0 10px;}
      #footer { width:740px; clear:both; margin:0 auto; padding-top:15px;}

      /* ***** Header **************************************** */
      #header h1 { font:2.2em "Lucid Sans"; padding:0 0 5px; letter-spacing:0.1em;}
      #header h1 a { color:#ddd; text-decoration:none;}

      /* ***** Menu **************************************** */
      #menu .blogMenu ul { float:right; padding:10px 0 0 10px;}
      #menu .blogMenu li { display:inline; padding:0 5px;}
      #menu .blogMenu a { color:#ccc; text-decoration:none; font-weight:bold;}
      #menu .blogMenu a:hover, a:active { color:#339999; text-decoration:none; }

      /* ***** Footer **************************************** */
      #footer .inner { border-top:1px solid #444; font:7pt verdana; color:#666; padding:5px;}
      #footer .copyright { font:0.9em Verdana;}


      /* +++++++++++++++++++++++++++++++++++++++++++++++++
      Content Part
      +++++++++++++++++++++++++++++++++++++++++++++++++ */
      #content .group { padding:0 0 50px 0;}
      #content .group h3 { padding-bottom : 5px; border-bottom:1px solid #ddd; margin-bottom:10px;}

      #content .result h3 strong { color:#000;}
      #content .result h3 .cnt { font-weight:bold;}
      #content .result ol { padding-left:25px;}
      #content .result li { border-bottom:1px solid #eee; padding:3px 0;}
      #content .result .date { margin-right:5px; color:#000;}
      #content .result .name { margin-right:5px;}
      #content .result p { color:#999;}

      #content .noEntry ol,
      #content .noEntry ul,
      #content .noEntry li { list-style:none;}

      #content .entry .titleWrap { color:#ccc;}
      #content .entry .titleWrap h2 { clear:both; padding-top:15px; text-align:center; letter-spacing:-1pt; font:11pt HYgothic-medium; font-weight:bold;}
      #content .entry .titleWrap h2 a { color:#006633;}
      #content .entry .titleWrap title { }
      #content .entry .titleWrap .titleInfo { float:left; }
      #content .entry .titleWrap .admin { float:right; color:#999; }
      #content .entry .titleWrap .category a { color:#777;}
      #content .entry .titleWrap .date { font:10pt georgia; color:#666;}
      #content .entry .titleWrap .name { color:#999;}

      #content .writeForm dl { border-bottom:1px solid #eee; padding-bottom:5px; margin-bottom:5px;}
      #content .writeForm dt { float:left; width:150px; padding-top:3px;}
      #content .writeForm .textField_name { background:url(images/bgInput.gif) 0 0 no-repeat white; width:90px; color:#333; border:1px solid #999; padding:3px 2px;}
      #content .writeForm .textField_pw { background:url(images/bgInput.gif) 0 0 no-repeat white; width:90px; color:#333; border:1px solid #999; padding:3px 2px;}
      #content .writeForm .textField_website { background:url(images/bgInput.gif) 0 0 no-repeat white; width:250px; color:#333; border:1px solid #999; padding:3px 2px;}

      #content .writeForm label { font-size:0.9em;}
      #content .writeForm .checkbox { margin-left:5px; vertical-align:middle;}
      #content .writeForm .comment_content { background:url(images/bgInput.gif) 0 0 no-repeat white; border:1px solid #999; width:425px; padding:3px 2px; margin-top:5px; }
      #content .writeForm .btnComment { width:45px; font:7pt verdana; color:#555; margin-left:5px; padding:1px 0; border:1px solid #999; background-color:#eee; font-weight:bold;}
      #content .writeForm .btnComment_gb { width:487px; font:7pt verdana; color:#555; margin-top:3px; padding:2px 0; border:1px solid #999; background-color:#eee; font-weight:bold;}

      /* 諛⑸챸濡?*/
      /* noEntry - Guestbook */
      .guestbook .writeForm { margin-bottom:30px;}
      .guestbook .writeForm .guestbook_content { background:url(images/bgInput.gif) 0 0 no-repeat white; margin-top:5px; width:479px; height:50px; border:1px solid #999; overflow:visible;}
      .guestbook .commentList

      .comment { margin-top:5px; }
      .comment h3 { background-color:#eee; padding:10px; color:#333; font-size:1em; border:0 !important; }
      .comment .commentList { padding:0 10px;}
      .comment .writeForm { margin-top:15px; padding-left:10px;}

      #content .commentList { margin-top:10px;}
      #content .commentList ol { list-style:none;}
      #content .commentList li { list-style:none; margin-bottom:5px; padding-bottom:5px; border-bottom:1px solid #f3f3f3;}
      #content .commentList li ul li { border:none; padding-top:12px; padding-left:45px; background:url(images/ico_reply.gif) 15px 10px no-repeat;}
      #content .commentList .name { color:#000; font-weight:bold; margin-right:15px;}
      #content .commentList .name a { color:#000;}
      #content .commentList .comment_desc { }
      #content .commentList .date a { color:#999; margin-left:3px;}
      #content .commentList .control { }


      #content .commentList .reply { font:9pt dotum; background-color:#fff; color:#333; }
      #content .commentList .modify { font:9pt dotum; background-color:#fff; color:#333; padding:1px 0 0 1px; margin-right:1px;}

      /* noEntry - Localog */
      .localog .spot { background:url(images/ico_indent.gif) 0 5px no-repeat; padding:5px 0 5px 17px; color:#999;}
      .localog .info { background:url(images/ico_list.gif) 0 5px no-repeat; padding-left:12px; border-bottom:1px solid #eee;}

      /* noEntry - Taglog */
      .taglog ul { text-align:justify; }
      .taglog li { display:inline; font-weight:bold; }
      .taglog li .cloud1 { color:#333366; font-size:1.6em;}
      .taglog li .cloud2 { color:#666699; font-size:1.5em;}
      .taglog li .cloud3 { color:#333; font-size:1.4em;}
      .taglog li .cloud4 { color:#666; font-size:1.3em;}
      .taglog li .cloud5 { color:#999; font-size:1.2em;}

      /* noEntry - Keyword */
      .keywords li { padding-top:5px;}

      /* entry - protected */
      .entryProtected dl { }
      .entryProtected dt { }
      .entryProtected dd { }
      .entryProtected input { vertical-align:middle; margin-right:4px;}
      .entryProtected button { vertical-align:middle; background-color:#fff; border:1px solid #ccc; font:0.85em Tahoma; padding:2px; font-weight:bold;}
      .entryProtected .textField_secret { background:url(images/bgInput.gif) 0 0 no-repeat white; width:140px; color:#333; border:1px solid #999; padding:3px 2px;}

      /* entry - post */
      .tagTrail { background:url(images/ico_tag.gif) 0 5px no-repeat; padding-left:20px; margin-bottom:5px;}
      .tagTrail span { display:none;}

      .communication { padding-bottom:10px; border-top:1px solid #f1f1f1; padding: 3px 0; font:7pt verdana; color:#666;}
      .communication .cnt { font:7pt verdana;}
      .communication .cnt a { color:#666; }

      .trackback h3 { display:none;}
      .trackback .trackbackAdd { text-align:center; font:7pt verdana; color:#777; border:1px solid #f1f1f1; margin-top:5px; padding:5px;}
      .trackback ol { list-style:none;}
      .trackback li { list-style:none; border-bottom:1px dashed #ccc; margin:5px; padding:5px;}
      .trackback p { line-height:1.2em; color:#999; font-size:9pt; padding-top:3px;}
      .trackback h4 { font-size:1em; font-weight:normal; }
      .trackback h4 a { color:#000;}
      .trackback .delete { background-color:#fff; font:9pt dotum; padding:2px 0 0 1px; color:#999; margin-left:4px;}

      .paging { text-align:center;}
      .paging a { padding:5px;}
      .paging a:hover { }

      .footMenu { text-align:right; font:7pt verdana; color:#777; font-weight:bold; margin-top:10px; padding:3px 0;}
      .footMenu .rss { vertical-align:middle;}
      .footMenu .rss img {}
      /* Article Basic Style */
      .article { width:600px; overflow:hidden; padding-top:10px; padding-bottom:20px; font:9pt/140% dotum; }
      .article p { margin:5px 0 10px 0;}
      .article a:link { color:#339999; text-decoration:none;}
      .article a:visited { color:#339999; text-decoration:none;}
      .article a:hover { color:#66cccc; text-decoration:underline;}
      .article a:active { color:#66cccc; text-decoration:none;}

      /* .article blockquote { background:url(images/ico_blockquote.gif) top left no-repeat; padding-left:25px; margin:10px 20px;}*/
      .article blockquote {margin: 10px 20px 10px; display:block; border-left: solid 5px #ECF2DB; padding:10px; background:#FBFBF4; }
      .article blockquote cite {color:#000000}
      .article blockquote p {}
      .article li { margin-left:25px;}
      .article h1 { font-size : 1.5em;}
      .article h2 { font-size : 1.4em;}
      .article h3 { font-size : 1.3em; margin-top:30px; border:none !important;}
      .article h4 { font-size : 1.2em;}
      .article h5 { font-size : 1.1em;}
      .article h6 { font-size : 1em;}

      .article dl { padding:10px;}
      .article dt { }
      .article dd { margin-left:20px; padding-bottom:10px;}


      /* +++++++++++++++++++++++++++++++++++++++++++++++++
      Sidebar Part
      +++++++++++++++++++++++++++++++++++++++++++++++++ */
      #sidebar h3 { font:7pt verdana; font-weight:bold; background-color:#222; color:#339999; padding:5px 10px; margin-bottom:2px;}

      #sidebar .box { background-color:#222; padding:10px;}
      #sidebar .box a { color:#aaa; }
      #sidebar li { list-style:none;}
      #sidebar .module { padding-top:10px; }
      #sidebar .date { color:#666;}
      #sidebar .name { color:#666;}
      #sidebar .cnt { color:#006666; }

      #sidebar a:hover, a:active { color:#ccc;}

      #sidebar .search { }
      #sidebar .search .textField_search { background:url(images/bgInput.gif) 0 0 no-repeat white; width:150px; color:#333; border:1px solid #999; padding:3px 2px;}

      /* Sidebar module */
      .blogImage img { border:4px solid #333; width:220px; padding:1px;}

      .blogDesc { padding:10px;}

      .notice.module { margin-top:0 !important;}
      .notice h3 {}
      .notice li { }

      .link.module .title { font:7pt verdana; font-weight:bold; color:#339999; }
      .link.module li { display:inline;}
      .link.module li a { color:#999; }
      .link.module li a:hover, a:active { color:#ccc; }

      .category li ul li { padding-top:5px; }
      .category li ul li a { color:#000;}
      .category li ul li ul { padding:0 0 5px 0;}
      .category li ul li ul li { background:url(images/bull_paper.gif) 2px 8px no-repeat; padding-left:18px; }
      .category li ul li ul li a { color:#999;}

      .recentComment li,
      .recentTrackback li { padding-bottom:3px;}

      .tagbox ul { text-align:justify; }
      .tagbox li { display:inline;}
      .tagbox li a.cloud1 { color:#003366; font-size:1.4em; font-weight:bold;}
      .tagbox li a.cloud2 { color:#336699; font-size:1.3em; font-weight:bold;}
      .tagbox li a.cloud3 { color:#333; font-size:1.2em; font-weight:bold;}
      .tagbox li a.cloud4 { color:#666; font-size:1.1em;}
      .tagbox li a.cloud5 { color:#999; font-size:1em;}

      .counter { }
      .counter li { font:8pt georgia; color:#999; }
      .counter li .emp { color:#006666; }

      /* +++++++++++++++++++++++++++++++++++++++++++++++++
      Sidebar2 Part
      +++++++++++++++++++++++++++++++++++++++++++++++++ */

  4. 로켓펀치 2008/10/10 19:50  댓글주소  수정/삭제  댓글쓰기

    좋은 스킨 정말 감사합니다

    스킨 적용했습니다^^

    한번 놀러와주세요~~

  5. 지구색연필 2008/10/13 20:22  댓글주소  수정/삭제  댓글쓰기

    가로폭 늘리는 방법이 궁금합니다.
    스타일에서 레이아웃을 고쳤음에도
    본문은 그대로 500으로 나오더라구요.
    그리고 글을 쓰면 오른쪽 끝 간격이
    약간 지저분하게 정렬되는데
    깔끔하게 하는 방법은 없는지요 ^^

    • 엔하늘 2008/10/13 20:36  댓글주소  수정/삭제

      죄송합니다. 제가 레이아웃을 복잡하게 구성하는 바람에 본문폭을 넓히려면 상당히 많은 값들을 변경해야 합니다. 일일이 나열해 드리지 못해서 죄송합니다만, 조만간에 수정된 버전을 내놓도록 하겠습니다. 불편하시더라도 지금처럼 사용해 주시면 감사하겠습니다^^;

  6. 지구색연필 2008/10/13 23:55  댓글주소  수정/삭제  댓글쓰기

    윗분 댓글을 붙여넣으니 일단 넓이는 넓어진듯 합니다.
    혹시 댓글쓰는 부분을 이 부분처럼 넓고 엔터로 다음줄로
    넘길 수 있게 수정하려면 어떻게 해야하는지요 ^^;;

  7. 두루누리 2008/11/04 22:57  댓글주소  수정/삭제  댓글쓰기

    질문 있습니다! ^_^포스트 제목을 플래시로 출력하게 되있는데요. 혹시 출력되는 제목의 크기를 키우려면 어떻게 해야 하나요?

  8. 감사맨 2009/05/22 11:36  댓글주소  수정/삭제  댓글쓰기

    ㄳ합니다 잘 쓰겠습니다

2008/09/07 22:42

skyfac.diary 스킨 제작 중 블로그 스킨2008/09/07 22:42


  지난 며칠간 심혈(?)을 기울여 일상에 관한 이야기나 자그마한 사진을 올리기에 좋은 아담한 사이즈의 스킨을 만들었다. 난생 처음 스킨 작업을 완성한 거라 감회가 새롭다. 지금까지 몇 번 스킨을 제작하려는 시도는 했었지만 번번히 실패를 하고 말았다. 이유는 귀찮아서?ㅎ
  일기장에 초점을 두고 만든 스킨이라 불필요하다고 생각되는 것들은 과감히 삭제했다. 굳이 스킨 파일에서 제거할 필요 없이 사이드바 설정 기능을 이용할 수도 있었지만 어차피 내가 쓰기 위해서 만든 거니까. 그냥 그대로 두기로 결정했다. 며칠 더 써보고 큰 문제가 없다면 배포도 해 볼까 생각중이다.
 

  이 블로그가 생성됨으로써 더이상 여기에 내 일상 생활에 관한 이야기는 쓸 필요가 없게 되었다. 사실 별거 아닌 시시콜콜한 나의 일상적인 이야기에 구글 광고가 펼쳐지는 것도 내심 못마땅하긴 했었는데 잘 된 것 같다. 안그래도 기존의 블로그가 주제중심적이지 못했기 때문에 이를 계기로 좀더 교육적인 분야로 파고 들어볼까 생각중이다. 물론 내 주된 관심사인 컴퓨터/과학과 접목된 교육이겠지만! 많이 생각하고 많이 쓰자. 그러면 나를 발전시키리라.


적용된 사이트 보기 : http://diary.skyfac.com

저작자 표시 비영리 변경 금지

'블로그 스킨' 카테고리의 다른 글

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
플라이투 티스토리용 스킨 배포합니다.  (29) 2008/07/17
TAG skyfac.diary, 블로그 분리, 스킨
Trackback (0) : Comment (0)
Posted by 엔하늘

댓글을 달아 주세요

2008/09/02 22:55

티스토리 카테고리 펼치기 / 환경설정 대로 표시하기 블로그 스킨2008/09/02 22:55

  얼마전부터 리체님의 ply2 스킨을 사용하고 있다. 스킨의 특징 중 하나는 카테고리가 아래의 그림처럼 펼쳐져 있다는 것이다.


  인터넷을 검색하다 보니 이렇게 카테고리를 펼쳐 놓기 원하는 사람들이 꾀나 많은 것 같았다. 그때마다 팁을 보면 자바스크립트를 이용해서 카테고리를 펼쳐놓게 해 놓았는데 그냥 치환자를 변경해서 옆의 모양처럼 하는 것도 나쁘진 않을 것 같다. 하지만 두 가지 방법의 결정적인 차이점은 트리 구조가 보이느냐 안보이느냐.


  아무튼 나는 위와 반대의 경우였기 때문에 접어 놓고 싶었다. 예전에도 이런 경우가 있어서 오랜시간 검색을 했던 것 같은데 확실히 이런 것들은 글로 작성해 두거나 메모를 해 두는 것이 좋을 것 같다.
  카테고리를 펼치거나 접거나, 그리고 옆의 글의 수를 나타내는 cnt의 스타일 설정은 다음과 같이 한다.


  • 카테고리 펼치기 / 설정대로 표시하기
skin.html 파일에서 [ ##_category_list_## ]를 찾아 [ ##_category_## ]로 바꾸면 설정대로 표시할 수 있다. 반대로 위의 그림처럼 펼치고 싶다면 [ ##_category_list_## ]로 변경한다. ('['와 '##' 사이의 공백을 없애야 합니다.)

  • 글의 수 스타일 설정하기
style.css 파일에서 .c_cnt { } 부분을 수정한다.



저작자 표시 비영리 변경 금지

'블로그 스킨' 카테고리의 다른 글

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
플라이투 티스토리용 스킨 배포합니다.  (29) 2008/07/17
TAG 스킨, 카테고리, 태터툴즈, 티스토리
Trackback (0) : Comment (0)
Posted by 엔하늘

댓글을 달아 주세요

2008/07/17 22:29

플라이투 티스토리용 스킨 배포합니다. 블로그 스킨2008/07/17 22:29

사용자 삽입 이미지

  leezche님께서 공개하신 텍스트큐브용 플라이투스킨을 티스토리에 맞게 수정하여 재배포합니다. 이미 리체님께서 티스토리용 skin.html 파일을 제공해주셨지만 몇 가지 수정을 더하여 배포판을 올립니다.

  아래는 제가 원본 스킨에서 수정을 가한 내용입니다.
  • header 블로그 타이틀 스타일 수정
  • 공지글은 이미 왼쪽 사이드바 상단에 출력되기 때문에 삭제하고 대신 티스토리에서 제공해주는 미디어로그를 삽입.
  • 텍스트큐브 이미지 대신 티스토리 이미지 삽입.
  • CSS파일 class 이름 수정.


- 다운로드
ply2_tistory.zip

- 기타 스킨에 관련된 질문이나 의문사항은 언제든지 환영합니다.
- 불필요한 사이드바 메뉴들은 티스토리 사이드바 설정에서 직접 없애시면 됩니다.
- 사실 이 스킨을 배포하는 이유는 물론 여러 사람들과 공유하기 위함이지만 지금부터 무자비하게 손댈 나의 블로그에 일종의 복원시점을 마련하는 것이기도 하다ㅎ

'블로그 스킨' 카테고리의 다른 글

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
플라이투 티스토리용 스킨 배포합니다.  (29) 2008/07/17
TAG 스킨, 티스토리, 플라이투
Trackback (1) : Comment (29)
Posted by 엔하늘

댓글을 달아 주세요

  1. 일판란 2008/07/18 21:46  댓글주소  수정/삭제  댓글쓰기

    안녕하세요.
    스킨 잘 사용하고 있습니다.
    깔끔한게 아주 맘에 드네요.
    감사합니다. ^^

  2. Dreamer 2008/07/21 01:09  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 올려주신 스킨을 적용해서 쓰고 있습니다.

    근데 키워드를 누르면 해당하지 않는 페이지라고 뜨는데

    왜 그런지 궁금합니다.

    도와주세요^^

    • 엔하늘 2008/07/21 11:45  댓글주소  수정/삭제

      글쎄요 저도 이유를 잘 모르겠네요^^; 저는 잘 나오거든요. 혹시 키워드가 없어서 그런 것일수도 있으니 키워드를 하나 작성해 보시기 바랍니다~! 그래도 안되면 코멘트 달아주세요.

  3. Dreamer 2008/07/21 11:52  댓글주소  수정/삭제  댓글쓰기

    답변 감사드립니다.

    키워드를 등록했는데도 안되는데요 ㅠ

    도와주세요

    • 엔하늘 2008/07/21 12:05  댓글주소  수정/삭제

      그렇다면 아마 거의 확실히 '키워드 출력' 플러그인을 활성화하지 않으신 것 같습니다. 관리자 메뉴에서 플러그인을 한번 살펴보세요!

  4. Dreamer 2008/07/21 12:34  댓글주소  수정/삭제  댓글쓰기

    고맙습니다.. 키워드 출력 플러그인을 활성화했습니다.

    행복한 오후 보내세요^^

  5. 지우개닷컴 2008/07/29 13:52  댓글주소  수정/삭제  댓글쓰기

    스킨 감사하게 잘 쓰고 있답니다~ ^^

  6. himarx 2008/07/29 21:41  댓글주소  수정/삭제  댓글쓰기

    잘 쓰겠습니다~ ^^

  7. binnamoo 2008/07/31 20:46  댓글주소  수정/삭제  댓글쓰기

    본문 제목 아래에 선이 있으면 좋겠습니다.
    그런데, 선을 넣으려면 어떻게 html을 건드려야 하는지 모르겠습니다. 혹시 아시면 부탁드립니다.

    • 엔하늘 2008/09/03 12:02  댓글주소  수정/삭제

      선을 넣는 방법은 여러가지가 있을 수 있지만
      skin.html 에서 을 찾은 후 아래쪽에 <hr> 태그를 삽입하셔도 되고 style.css에서 titleWrap 클래스를 찾으신 후 border-bottom 설정을 해주셔도 됩니다.

  8. 티아 2008/08/05 11:50  댓글주소  수정/삭제  댓글쓰기

    음...사이드바를 하나 더 넣고싶은 욕심이 막 생기는데.
    어떻게 하면 될까요?..^^;

    • 엔하늘 2008/09/03 12:02  댓글주소  수정/삭제

      일일이 설명은 못드리겠지만
      텍스트큐브 스킨제작메뉴얼(http://plyfly.net/Docs/TextcubeSkinManual/)을 참고하시면 도움이 될 듯 싶습니다.

  9. 2008/08/17 02:21  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

    • 엔하늘 2008/09/03 12:03  댓글주소  수정/삭제

      style.css에서 맑은 고딕으로 되어 있는 것들을 dotum이나 gulim으로 바꾸시면 됩니다. 자세한 사항은 역시 스킨메뉴얼(http://plyfly.net/Docs/TextcubeSkinManual/)을 참고해 보시기 바랍니다.

  10. 자유 2008/08/30 00:09  댓글주소  수정/삭제  댓글쓰기

    스킨 잘 쓰고 있습니다. 고맙습니다. :)
    제가 잘 몰라서 그런데요, 글마다 글쓴이를 마지막에 넣어주실 수 있나요? 그러니까, 팀블로그로 하고 싶어서 그런거고요, 팀블로거들이 글 쓸 때 포스트에 글 쓴 사람이 누구인지 남기고 싶습니다. :)

  11. 자유 2008/09/13 15:51  댓글주소  수정/삭제  댓글쓰기

    다시 질문 드립니다. :)

    css 파일에서 본문 폭 500으로 되어있는 두 부분을 600으로 고쳐 사용하고 있습니다. 좀 넓은 걸 좋아해서요. 다행히 이렇게만 고쳐도 전체적인 레이아웃이 깨지지는 않던데, 문제가 하나 남더라고요. 티스토리 새관리 글쓰기 WYSIWYG 에디터에서는 에디터 폭이 블로그 본문 폭을 따라가게 되어있는데, 여기선 아직도 500으로 폭이 나오고 있어요. 그냥 써도 되긴 하나, 이 본문 폭에 맞추어 첨부사진의 최대폭이 정해져버려 매번 사진을 올릴 때 마다 수정해 주어야 해서 고칠 방법을 찾고 있습니다.

    혹시 해결책을 아시려나요?

    p.s. 풍성하고 즐거운 한가위 연휴 보내세요. :)

    • 엔하늘 2008/09/13 16:38  댓글주소  수정/삭제

      index.xml 파일을 열어보면

      <contentWidth>500</contentWidth>

      항목이 있습니다. 여기서 500을 600으로 수정하시고 업로드 한 다음 적용을 하시면 됩니다. 즐거운 추석 연휴 보내시기 바랍니다^^

  12. 2008/09/25 00:56  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다