▶ 하늘엔별님이 꼭 1단을 만들어 달라고 하셔서???

원래 계획도 없었는데 사실 이미 만들어진걸 폭만 조정하면 1단이 가능하기에...??
어렵지 않다는 생각에 해봤습니다.. 1단은 처음 해보는지라. 은근히 수정할께 많더군요
특히 사이드바를 하단으로 내리니깐 그게 더 힘들더군요!!../;;

뭐 알아서 쓰실것으로 생각을 해보고 혹시 또 필요하신분이 있을것으로 생각하여 작업 했습니다.



재아넷 JAEA@BLOG 스킨 사용에 대한 약속?

제 스킨을 수정하여 사용하는것은 좋은데요..  배포는 하지 말아 주셨으면 합니다.... (#..#)
스킨 맨 하단에 Skin Desiged by JAEA 는 삭제하지 마시길 바랍니다. (링크포함)




스킨 미리보기


위처럼 구성되어 있습니다....





재아넷 JAEA@BLOG 1단스킨 화이트 배포 (2011년 6월 15일 오전 11시)




2011. 06. 15.  AM 10:00

▶ 스킨의 구조와 사이즈 900px (900px + 310px)

스킨 사이즈 900 짜리와 1000짜리 두개입니다.

스킨종류 : 1단;
상단 타이틀 이미지 : 900px * 165px 입니다.
(이하로 작업하셔도 됩니다. 로고를 만드셔서 title.gif로 저장하시고 업로드 하시면 자동적으로 가운데 정렬 됩니다.)
전체레이아웃 : 900px;
내부레이아웃 : 900px;
본문 : 860px;
본문에 삽입시키는 이미지 860px; (환경설정 화면출력 사이즈)
사이드바 : 3단 280px * 3EA (관리자 화면에서 이동가능)

스킨종류 : 1단;
상단 타이틀 이미지 : 1000px * 165px 입니다.
(이하로 작업하셔도 됩니다. 로고를 만드셔서 title.gif로 저장하시고 업로드 하시면 자동적으로 가운데 정렬 됩니다.)
전체레이아웃 : 1000px;
내부레이아웃 : 1000px;
본문 : 960px;
본문에 삽입시키는 이미지 960px; (환경설정 화면출력 사이즈)
사이드바 : 3단 313px * 3EA (관리자 화면에서 이동가능)
사이드바 삽입 이미지 300px

스킨위자드 지원하지 않습니다. ||  굴림체를 기본으로 합니다.



▶ 스킨 다운로드

전체폭을 900으로 하고 싶으면 900 짜리를 받으시고 전체폭을 1000으로 하고 싶다면 1000으로 받으시면 편합니다.



스킨 적용 방법입니다.
1. 위의 스킨 jaea_blog_skin_one_900_v1.0.zip 파일을 다운로드 받으시고 압축파일을 풀어 줍니다.
2. 자신의 블로그 환경설정으로 가서 스킨메뉴로 이동합니다.
3. 스킨을 업로드 하기전에 현재 사용중인 스킨 저장 하시길 바랍니다.
   (스킨 작업을 하기전에 항상 스킨저장은 필수입니다.)




▶ 스킨 적용 방법


위에서 보시는것처럼 새스킨등록을 클릭 하여 줍니다.






왼쪽 위에 스킨의 이름을 적어 줍니다.. 재아넷스킨으로 하겠습니다.
파일업로드를 클릭 합니다.






위에서 보시는것처럼 index  preview skin style  파일 모두 선택하여 열기를 하면 업로드가 됩니다.
더불어서 images 폴더 안에 모든 파일을 선택하여 업로드 하여 줍니다.





위처럼 모든 파일이 업로드 되었으면  저장을 눌러줍니다.
참고로 images (60개) 이며 루트에 있는 파일 4개로써 총 파일이 64개입니다.





저장을 누르면  위처럼 스킨을 저장하겠냐고 묻습니다. 를 눌러줍니다.




확인을 누르면 스킨 리스트에 들어가게 됩니다.






위처럼 저장한 스킨중에 방금 업로드한 재아넷스킨이 업로드 되었고 리스트에 속해 있는것을 알수 있습니다.
적용을 눌러서 스킨을 적용 시켜 줍니다.

그럼 잘 사용하시고, 혹시 문제가 있으면 말씀 해주세요!;//

스킨의 수정은 여러분이 원하는데로 하시고 하단 카피라이터 부분은 수정하지 마시고 마지막으로 배포는 하지 말아주시길 바랍니다.

변경사항 안내

V1.0

2011. 06. 15 PM 17:00 (방명록 리스트 폭이 기존의 670px 로 되어 있던 부분을 수정 auto로 수정)

2011. 06. 15 AM 11:00 (배포)




2011/03/01 - [재아/디자인] - 재아넷 티스토리 블로그 스킨을 배포 합니다.
2011/06/03 - [재아/디자인] - 재아넷 블로그 화이트 스킨 배포 합니다.
2011/06/08 - [재아/디자인] - 재아넷 블로그 베이지 스킨 배포로 종결 합니다.
2011/06/14 - [재아/디자인] - 재아넷 블로그 스킨 사이드바 폭 조절 하는 방법
포스팅이 유익하셨다면 추천 부탁드립니다. ^^
본문 밑에 작은 하트를 눌러주세요!
홈으로
공감
Post by : 재아

여러분의 소중한 댓글입니다.

  1. 오오~ 깔끔하니 이쁜데요^^
    멋지세요~

  2. 이러다가.. 전문적으로 하시는 것이 어떨까여??ㅋㅋㅋ

    • 이것도 은근히 힘드네요..;;

      고쳐야할 것도 많고 수정해야할것도 많고,..
      스킨 만들어서 배포하는거 보면 스스로 존경스럽습니다..;;

  3. 일단 받아놓습니다.
    급한 일 먼저 한 뒤에 일단 적용해 보고 상태를 알려 드리겠습니다. ^^

  4. 재아님의 이런 능력 정말 부럽답니다. ^^저는 그냥 지금 있는걸루...ㅠㅠ

  5. 오늘 스킨도 바꾸고 새집에 이사 온 것 같습니다.
    요런 좋은 스킨 만들어 주셔서 넘 감사합니다. ^^

  6. 안녕하세요오오오~ 너무너무 오랜만에 글을 남기네요~ㅎㅎㅎ
    저를 기억은 하실런지...ㅠㅠ 흑
    여전히 좋은 블로그 꾸미기 정보들을 올려주고 계시군요~!
    제 블로그는 거의 폐업상황이라.... 세상이 저에겐 유난히 빨리 흐르는것 같아요~ㅎㅎㅎ
    그리고 보니 공연하면 모시기로 하구선..
    공연이 끝나고 두달이 지나 서야 글을 남기다니 참 저도 염치 없네요~ㅠㅠ 아흑
    요즘도 다른일로 바빠서 글을 자주 올리지는 못하지만.. 자주 놀러 올께요~*

    • 아 기억합니다.~

      그러게요 저도 잊어 버리고 있었네요~ 잘 지내시죠 저도 나름대로 인생의 변화가 생겨서 근래에 블로그 잘 못하다가 이제 조금... 안정?? 이 되어서 다시 조금씩 하고 있습니다. 히히

      ㅋ;;;

  7. 1단 스킨 필요했는데 배포해주셔서 감사합니다. 그런데 한가지 질문할 것이 있는데요. 메뉴 있잖아요. 위에 홈으로, 방명록 같은 거요. 그 사이에 있는 | 이런 거 지우거나 사이 공간을 어떻게 붙이나요? 드롭다운 적용할려고 하는데 가르쳐주시면 감사하겠습니다.

    • 홈으로 방명록 사이에 있는 | 를 지우는 방법은

      스킨에 보면 style.css 에

      #blog_menu .menu li {
      background: url("images/bullBar.gif") no-repeat scroll 0 0 transparent;
      display: inline;
      margin-left: 3px;
      padding-left: 7px;
      }

      이 부분에서

      background: url("images/bullBar.gif") no-repeat scroll 0 0 transparent;

      이 부분을 지우면 됩니다... 혹은 이미지만 지워도 됩니다..

      background: url("") no-repeat scroll 0 0 transparent;

      이렇게..

      나중에 혹 다시 해보실려면 주석 처리 하셔도 됩니다.

      /* background: url("images/bullBar.gif") no-repeat scroll 0 0 transparent; */

      이렇게...


      이렇게 하면 | 는 없어집니다..

      그리고 메뉴와 메뉴 사이의 공백을 줄여볼려면요

      #blog_menu .menu li {
      background: url("images/bullBar.gif") no-repeat scroll 0 0 transparent;
      display: inline;
      margin-left: 3px;
      padding-left: 7px;
      }

      이 부분에서

      padding-left: 7px;

      이 부분을 2px 로 바꾸면 메뉴와 메뉴가 붙게 됩니다..
      숫자가 적을수록...


      그리고.. 드롭다운 적용할려고 할려면

      메뉴를 통으로 들어 엎는게 제일 좋습니다.
      지금의 메뉴 구성에서 드롭다운을 적용시키면 오히려 더 복잡하거나 더 틀어지게 됩니다

      그러니 메뉴를 통으로 드롭방식으로 바꾸는게 제일 좋습니다..

    • 통으로 들어 엎는다는 게 무슨말이에요? 어떻게 해야되요? 드롭다운 메뉴가 밑으로 밀리네요 ㄷㄷ

    • 통으로 바꾼다는 의미는

      제가 만든 스킨의 메뉴를 생략하고 새로운 드롭다운 메뉴의 소스를 그 자리에 넣어서 이용하는게 더 좋다는 얘기입니다.

    • 어느 부분을 지워야 하죠? 드롭다운 소스 넣는 곳은 skin.htm에 만ㅇ 있어서요

    • 저기 그리고 메뉴 부분 있잖아요. 레이아웃에는 25px 로 되어있는데 실제로는 30px이 넘습니다. 어떻게 줄이나요?

    • 블로그 메뉴를 둘러 싸고 있는 부분은

      #blog_menu

      이 부분입니다.

      그러니깐

      style.css 부분은 나두시공...

      skin.html 에서

      <div class= blog_menu

      로 시작하는 부분을 모두 주석 처리 하세요

      <!-- 이런식으로

      그리고 blog_menu로 끝나는 부분 역시 주석처리 해줍니다.



      주석처리 하거나 지워야 할 부분은

      <div id="blog_menu">
      <div class="menu">
      <ul>
      <li class="tab_home">
      <a href="/">
      <font color="#FDA444">홈으로</font>
      </a>
      </li>
      <li class="tab_tag">
      <a href="/tag">
      <font color="#666666">태그</font>
      </a>
      </li>
      <li class="tab_local">
      <a href="/location">
      <font color="#666666">지역로그</font>
      </a>
      </li>
      <li class="tab_media">
      <a href="/media">
      <font color="#666666">미디어로그</font>
      </a>
      </li>
      <li class="tab_guestbook">
      <a href="/guestbook">
      <font color="#48A4EA">방명록</font>
      </a>
      </li>
      </ul>
      </div>
      <div class="search">
      <input type="text" onkeypress="if (event.keyCode == 30) { try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25'); return false;}catch(e){} }" value="" name="search">
      <input class="submit" type="submit" onclick="try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25'); return false;}catch(e){}" value="검색">
      </div>
      </div>

      이 부분입니다.

      메뉴가 시잗되고 메뉴가 끝나느 부분이죠~...



      또 하나 메뉴 부분이 25px로 되어 있는데

      실제로는 30px로 되어 있다고 하는데 이 부분은

      메뉴의 상단과 하단에 공백 부분과 외벽 내벽이 모두 지정되어 있어서 그렇습니다.

      이걸 일일히 다 수정하면 메뉴가 다 틀어집니다.

      쉽게말해서 사이즈를 줄이게 되면 메뉴 내부의 공백도 줄여야 가운데로 들어갑니다.

      메뉴를 줄인다고해서 내부의 메뉴도 가운데 정렬이 되게 되어 있지 않습니다.

      간단하게 메뉴가 25px인데 20px로 하면 내부의 공간도 20px이 될꺼고 그러면 메뉴가 위로 2.5px 만큼 올라가야 가운데에 위치 하게 됩니다.

      다소 복잡한 설정이죠..;;

      이 부분을 줄일려면

      혹은 지워주셔도 됩니다.




      주석처린 한 부분에

      넣고 싶은 드롭다운 메뉴의 소스를 넣습니다.

      style.css 에도 추가 하면 되겠죠~..

    • 일단 어떻게든 했는데요.(제 블로그 봐주세요.) 메뉴가 있는 곳에 배경색을 드롭다운이랑 똑같이 하고 검색 하는거 추가 하고 싶은데 어떻게 하나요?

    • 제 블로그 밑에 사이드바를 다 지우니 네모난 상자 같은게 생겼는데 어떻게 지워요?

  8. 그리고 지금 재아님 현재 스킨처럼 바탕색을 요런 군청색(?)으로 하려면 어떻게 해야 할까요?
    연보라색이 본문을 두드러지게 하진 못하네요. ^^

    • 스킨에서 style.css 에서

      body {
      background-color: #E8DFD5;
      background-repeat: no-repeat;
      color: #666666;
      font: 12px/1.5 나눔고딕,Dotum,Verdana,AppleGothic,Sans-serif;
      }

      이부분에서

      #E8DFD5; 이부분을 #2D333E; 이걸로 바꾸시면 됩니다.

      물론 원하는 색상으로 변경하셔도 되고요!

      참 쉽죠잉~~

  9. 우와~ 깔끄미네요...
    저 블로그 이미지는 직접?

  10. 심플하면서도 깔끔하고 세련된 스킨이네요 ㅎㅎ
    새롭게 블로그 시작하시는분 계시면 추천해드려야 겠습니다. ㅎㅎ

  11. 그냥 1단 스킨 포기하게 이대로 갈려고 하는데요. 위에 홈으로 같은 거 링크 수정 어떻게 하나요?

    • <div "blog_menu">
      <div class="menu">
      <ul>
      <li class="tab_home">
      <a href="/">
      <font color="#FDA444">홈으로</font>
      </a>
      </li>
      <li class="tab_tag">
      <a href="/tag">
      <font color="#666666">태그</font>
      </a>
      </li>
      <li class="tab_local">
      <a href="/location">
      <font color="#666666">지역로그</font>
      </a>
      </li>
      <li class="tab_media">
      <a href="/media">
      <font color="#666666">미디어로그</font>
      </a>
      </li>
      <li class="tab_guestbook">
      <a href="/guestbook">
      <font color="#48A4EA">방명록</font>
      </a>
      </li>
      </ul>
      </div>


      여기서 <a href=" 이부분의 주소를 변경하여 주면 됩니다.

  12. 안녕하세요 제가 스킨에대해서 잘 몰라서 전문가 분에게 여쭙고 싶은데 없어서 다시 들어옵니다 ㅠ

    제 블로그 보시면, 2단 티스토리 기본 스킨인데요. 상단 매뉴 미디어 로그, 태그, side 등

    메뉴 안보이게 하는법좀 알려주세요 각주 넣으면 되는데 각주를 잘못넣었는지 안되네요 ㅠㅠ

    급해요 깔끔하게 보이려고 하거든요 ㅠ

    • 스킨중에

      skin.html 에서

      <div class="blogMenu">
      <ul>
      <li class="t_menu_home first">
      <li class="t_menu_tag">
      <li class="t_menu_medialog">
      <li class="t_menu_location">
      <li class="t_menu_guestbook last">
      </ul>
      </div>

      이 부분을 주석처리 하면 됩니다.

      다음처럼

      <--<div class="blogMenu">
      <ul>
      <li class="t_menu_home first">
      <li class="t_menu_tag">
      <li class="t_menu_medialog">
      <li class="t_menu_location">
      <li class="t_menu_guestbook last">
      </ul>
      </div>-->

    • ㅇ ㅏ. 그러면 죄송한데 블로그 맨밑에 블로그 스킨 배포 주소와 admin 등 지역로그 등 삭제 및 부분 없애는 부분 위치는 어디죵 죄송합니당

    • skin.html 에서

      <--<div class="footMenu">
      <a href="/location">지역로그</a> :
      <a href="/tag">태그</a> :
      <a href="/media">미디어로그</a> :
      <a href="/guestbook">방명록</a> :
      <a href="/admin">관리자</a> :
      <a href="/admin/entry/post">글쓰기</a>
      </div>
      <div class="copyright">
      <a href="/"> JOKER[HM]</a>
      's Blog is powered by
      <a onclick="window.open(this.href); return false" href="http://daum.net">Daum</a>
      / Designed by
      <a href="http://www.tistory.com">Tistory</a>
      </div>-->

      이렇게 하시면 됩니다.

    • 정말 감사합니다. 죄송한데 마지막으루. 하나만 더여쭙게요 ...^^ 본문 제목 밑에, IT 포스팅 시간

      이렇게 나오는 부분 깔끔히 없애는 방법도 알수있을까요!? 고맙습니다 꾸벅

    • 정말 감사드립니다. 복받으실거에요!!

    • skin.html 에서

      <!--<span class="category">
      <a href="/category/IT" style="">