2011.6.20이후 적용 자세한사항은 공지확인하시라예
출처: 여성시대 도미국
(자게에 물어보니까 언니들이 콧멍으로 가라해서 콧멍으로 왔는데.... 자취이야기도 아니고ㅠ...
이 글이가야할곳이 여기가 아니면 말해줘.. ㅠㅠㅠㅠ)
안녕 언니들..?
콧멍에 처음으로 쓰는 글이라 어색어색하다
말주변이 없어서 횡설수설해도 이해해줘 ^_T..
오늘 내가 찔 정보는
내 티스토리를 홈페이지처럼!!!! 스킨 만들기 팁!
그동안 언니들은
자~ 한번 만들어볼까?
<html>
<head>
<body>
</body>
이렇게 좌절해왔을거야ㅎㅎㅎ
하지만 이젠 그럴 필요가 없어요!!!!!!!!!!!!(장담)
왜냐면!!! 저런거 하나도 몰라도 스킨을 만들수있는
정말 간단한 방법을 알려줄거든요 ㅎㅅㅎ
사전 준비물
1. T스토리 블로그(이건 꼭 있어야해요 ㅎㅎ)
2. 나모웹에디터
http://software.naver.com/software/summary.nhn?softwareId=MFS_116851
링크는 시험판 주소야!
난 강의에서 나모웹 위주로 할거라서 나모웹이면 좋겠지만
없다면 이와 비슷한 다른프로그램도 괜찮아!
3. 기본 1단스킨
CKA-noiyes-bom-2-TI(0831) (1).zip
다운받아서 일단 압축 그대로 풀어놔줘
4. 끈기와 노력
5. 보면서 하지 않을 자신...?
(모든 강의를 한번 다 읽은다음에 따라해주세요!!! 제발!!!!)
그럼 시작해보자!!!!!
길고 긴 싸움이 되겠지만 우리존재 화이팅!!!
<1.블로그에 기본스킨 적용하기>
아까 내가 올려뒀던 1단 스킨 압축을 풀어뒀지?
우리가 원하는 디자인을 적용하기 전에 베이스 스킨을 적용시켜줄거야
짤로 전부 캡쳐해서 설명할거기 때문에 짤많음주의!!!
일단 블로그를 키고 관리페이지를 들어가
메뉴에서 스킨을 클릭!
그러면 이런 페이지가 뜰거야
언니들이 블로그 만들때 해둔 기본 스킨들이 뜨겠지?
그거 무시하고 저 위에 스킨등록을 클릭해줘
스킨등록을 클릭하면 이런 빈 페이지들이 뜨는데
밑으로 내려보면 이렇게 추가/삭제 가 있어
그럼 추가를 클릭!
그다음 이제 언니들이 아까 압축해제 시켜둔 파일을 찾아서 열고
거기서 images폴더를 제외한 것들을 전부 선택해서 완료!
이대로 끝이 아니야!!! 추가버튼을 한번 더 눌러줘!!!!!
그 다음에 이번에는 images파일을 누르고
그 안에 있는것을 또 추가해줘 ㅎㅎ
그럼 이렇게 파일들이 꽉꽉 차있을거야~
그 다음 저 위에 이름을 아무거나 적고~
저장을 꼭 눌러줘(꼭!)
그 다음 다시 오른쪽 메뉴에서 스킨을 클릭합니다~
이번에는 보관함 클릭!
그리고 내가 임의로 저장해놓은 스킨을 적용시켜주면~~~
유후~~~~~~~
나름대로 심플한 1단스킨이 깔려있습니다~~~~
옆에 뭐 지저분한것도 갱장히 깔.끔.합.니.다.만?
좋아요bbbbbb
<내가 하고싶은 스킨을 디자인하기>
이제부터가 디자인과의 싸움입니다...
하지만 우리는 하는방법을 알아야 하기 때문에
제가 만든 스킨들을 임의로 올려놓을게요~
저희가 만들 디자인입니다
상단
내용
하단
임으로 디자인 하실분은 상단 내용 하단부분 이렇게 세개 디자인을 해주세요^.^
상단
가운데
하단
-메인에 쓸것들
-배경에 쓸것들
(클릭하시면 원본이 나옵니다)
혹시나 디자인을 만드실 분들은 세로길이는 마음대로 하셔도 좋지만
가로길이는 너무 크거나 너무 작지 않게 해주시면 될 것 같습니다 ㅎㅎ
저는 1000픽셀로 만들었어요
일단 아무곳이나 저장을 해주신다음
이제 나모 웹 에디터를 켜주세요!
일단 나모웹을 키면 새탭을 만들어줍니다
모든 나모웹의 기본htm형태는 noname.htm 이런 이름으로 되어있어요
그럼 이제 저 복잡한 수많은 메뉴중에
조 모눈종이 같은걸 선택해줍니다 ㅎㅎ
그럼 저렇게 마우스로 표를 선택할 수 있어요
저희는
3x1로 만들거에여 1단스킨이니까~
요렇게 표가 만들어졌습니다
그렇다면 표 안에 아무곳이나 마우스를 대고 우클릭 뙇!!!!
표 속성을 뙇!!!!!!
한다음 이 사진과 똑같이 표시한 부분들을 수정해줍니다ㅎㅎㅎ
(저기 너비 부분을 1000픽셀로 한 부분은 제가 만든 디자인 가로길이가 1000픽셀이라 그렇습니다
직접 디자인을 하신 분들은 자신이 만든 디자인의 가로길이를 지정해주세요)
그리고 확인을 뙇~!!!
표가 완성됐습니다~
이게 기본틀이에요
그 다음 이번에는 다른곳이 아니고 첫번째 칸에 마우스를 놓고 우클릭을 합니다
그리고 그림넣기를 클릭
여기서 상단부분 메뉴를 넣을거에요
일단은 제가 드린 상단부분 사진을 클릭하고 열기
이렇게 됐으면 확인을 눌러주세요~
이렇게 만들어졌습니다
이제 저기 써놓은 메뉴들을 클릭하면 내용이 나올 메인을 만들어야겠죠?
그건 한 가운데에 만들거에요~
그렇다면 두번째 칸위에 마우스를 대고 우클릭!
이번에는 표속성이 아닌 셀속성을 눌러줍니다
이제는 그림넣기가 아니라 배경을 클릭해주세요
(왜냐하면 이 부분에는 게시판과 내용들이 출력되기 때문에 배경으로 지정해주는 것입니다)
너비는 자신이 디자인한 가로길이로 지정해주세요
퍼센트가 아니고 픽셀로 지정해주세요
그 다음 가운데 부분 main.png를 클릭
그러고나면 표에 아무런 반응이 일어나지 않습니다!
배경으로 지정해놔서 그런거에요
메인부분을 한 다음 맨처음 칸에 상단부분을 넣은것처럼
3번째 칸에 우클릭을 한다음 그림넣기를 해서 하단부분도 설정해주세요
그런 다음 다시 첫번째 칸에있는 그림을 가줍니다
요롷게~~~
이 부분은 꼭 배경에 넣어줄 필요는 없지만
나중에 블로그에 출력될때 중간에 하얀색이 뜰까봐 배경지정을 해주는겁니다
(혹시나 개인디자인 하시는 분들은 메뉴부분색과 똑같은 색으로 배경지정만 해주시면 되요~)
그다음 세번째 칸 셀속성을 눌러서 상단처럼 배경을 넣어주세요
상단에는 12.png 였고
하단에는 top2.png 였어요 ㅎㅅㅎ 배경지정지정
그다음 중요한것!
표 오른쪽을 클릭하고 저기 표시된부분을 눌러주세요
가운데 지정을 해놓는것이랍니당ㅎㅎ
모두들 이런 모습이 됐나요????
됐...어라...제발....ㅠㅠ
이제 다음으로 넘어가기 전에 혹시모르니 저장을 해둡시다
저장저장
음ㄴ;이ㅓㅁㄴㅇ;ㅣㅏㅁㄴ어,ㅁㄴ아ㅣ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
다들 소리 한번씩 지르고 갑시다...
뭐 별거 없는데 되게 복잡해보이져....?
하나도 안복잡하답니다......후..
다시 시작합시다
<링크 걸어보기>
자 이제 완성된 표에서
상단부분 이미지를 클릭합니다(첨부했던 이미지)
선택이 됐으면 우클릭 ㄱㄱ
그리고 사진에 있는 것 처럼 그림-이미지맵
요렇게 합니다
그럼 마우스가 십자표가 돼요 ㅎㅎ
그럼 이렇게 soup를 드래그해서 사각형을 만들어봅니다
그럼 저런 표가 뜹니다 유후
그렇다면 저 주소(url) 부분에 클릭하면 이동하고 싶은 링크를 적어주세요
Tstory 링크 tip
-게시판링크
http://(주소).tistory.com/category/(게시판이름)
티스토리를 가셔서 게시판을 만드신 후 가로안에 게시판 이름을 적슴다
여기서 대소문자까지 구별하셔야되요!!! 티스토리를 매우 민감!
-글쓰기 링크
http://(주소).tistory.com/admin/entry/post
-관리자 링크
http://(주소).tistory.com/admin/center
-방명록 링크
http://(주소).tistory.com/guestbook
-클릭하면 맨 위로 올라가기
#
저는 soup를 누르면 글을 쓰고싶어서
이렇게 해봐쑴다
ㅎㅅㅎ
지금은 그냥 임의로 하는것이라서 저는 soup에만 링크를 걸었지만
언니들은 마음대로 막 링크 걸어보셔도 되요 ㅎㅎ
(혹시 게시판 링크 거실때는 꼭 게시판을 생성하신 뒤 링크 걸어주세요~)
그 다음 혹시 모르니까 또 저장해주세요 저장저장~~~~
<html에 연동해보기>
하....흡....하......... 언니들 이제..... 후....html 연동을...해야합니다...
생각보다 쉬워요.. 찬찬히 해볼게여
아까 켜놨던 창에서 밑에 표시해둔 html을 눌러봅니다
그럼 이 뭔 개소리같지도 않은 영어들이.... 아 보기만해도 화가나는데요 ㅇㅇ
저희가 쓸 곳은
<body>
</body>
까지입니다! 저부분을 복사해주세요
그 다음 메모장을 켜줍니다
(모두들 집에 메모장 하나정도는 있잖아요 ㅇㅅaㅇ?)
붙여넣기를 합니다
이 다음 잠깐 메모장과 나모웹에디터를 최소화 해주세요~
그 다음 다시 블로그를 켜서 관리자를 들어갑니다
이번에는 html/css 메뉴를 클릭!
뭐.. 복잡한 영어는 나중에 할거기 때문에
이번에는 파일 업로드를 들어갑니다
들어가보면 아까 저희가 추가해뒀던 파일들이 있슴다 ㅎㅎ
놔두고 추가를 다시 눌러주세요
누른다음 저 위에 저장하신
top.png
main.png
bottom.png
12.png
top2png
등등.. 하여튼 나모웹에서 쓰셨던 모든 사진들을 다 업로드 해주세요
꼭꼭!!!!!!!!!!!!!!!!
꼭!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
추가를 끝낸다음은 그 옆에있는
노란부분을 클릭후
그 밑에 있는 저장을 꼭 눌러줍시다
꼭요
꼭
꼭
이거 안누르면 하나도 업로드가 안돼요!!!!!!!
그리고 이제 다시 메모장을 켜줍니다
노란색으로 된 부분들을 살짝씩 고쳐줄거에요
(저는 하단부분에 배경=top2.png 를 안넣어서 안나와있는데 원래는 bground= 어쩌고 막 있어요~ 그부분도 고쳐주세요)
이렇게요
모든 <img src="___________" <<여기 선 부분에 있는곳을
./images/
이렇게 바꿔주세요
그 다음 이제 눈 똑바로 떠주세요
아까 고쳐뒀던 메모장에서
표시된 부분까지만 드래그 해서 복사를 해줍니다(ctrl+c)
그다음 다시 블로그 관리자페이지에 들어가서
html/css메뉴를 들어갑니다
그럼 뭐 영어 엄청 많이 써져있는 부분이 있어요
위에박스는 html
밑에박스는 css
저희가 이번 강의에 쓸 부분은 html부분만 쓸거에요
skin.html 박스 부분에서
조금만 내리다보면
<head>
<body>
가 있어요
잘 찾아서~~~
<body>
~
</div>
부분을 쭉 드래그 해서 지워줍니다
그다음 아까 메모장에서 복사해 뒀던것을 붙여넣기 합니다
요렇게여
그 다음 다시 메모장을 켜서
밑에 부분을 복사!
그리곤 다시 skin.html 에서
ctrl+f 를 하고
<div id="footer"> 를 입력해서 찾슴다
찾았다!!!!!!!
이 부분을 아까 위에랑 똑같이 지운뒤
아까 메모장에서 복사했던 하단부분을 붙여넣기 합니다
그 다음 ....후.... 저장을...눌러주세요....저....장을........
하고.....
하읏....!!!!!!!!
블로그로 돌아가보면!!!!!!!!
하읏....!!!!!!!!!!!!!!!!!!!!!!!!!!
상단 하단 이렇게 입력이 됐슴다
....
아까 링크 연동해뒀던 soup부분도 클릭해보세여
제대로 됐다면 글쓰기가 열리겠죠...? 하악하악
근데 지금 바탕이 까매야 되는데
매우 하얗네여 ㅡㅡ
후... 고쳐볼까요????
다시 관리페이지-html/css 메뉴를 눌러봅니다
그다음 이번에는
skin.html 부분이 아니라
styl.css칸을 봐볼게여
그럼 맨위에
저기 노랗게 색칠해놓은 부분이 보일거에여
저기가 바탕화면 색을 지정하는 곳임다
일단 저희는 까만색으로 할것이기 때문에 #FFFFFF 대신 까만색을 지정하는 #000000 을 입력!
(개인적으로 디자인 하시는 분들은 포토샵에서 하고싶은 색을 찾아서 적어주세요)
이렇게 바꾸고 저장을 눌러주면!!!!!
뙇!!!!!!!!!!!!!!!!!!!!!!!!
스킨이....됐다.......!!!!!!!!!
이렇게... 대충 스킨이...됐슴다!!!!!!!!!!!!
꺄핳ㅎㅎㅎㅎㅎㅎㅎㅎ
허접해 보이지만.. 그래도 어떻게 모양새는 갖춰줬죠??
하악하악.... 힘들었다
여기까지 성공한 여시들 축하짤ㅎㅎㅎㅎㅎㅎ
수고했어요~
요렇게 자신이 원하는 디자인을 1단스킨에 적용하는 방법의 강좌를 쪄봤어요
헤헤
언니들한테 도움이 많이 됐으면 좋겠어요...
말주변에 없어서 잘 설명이 안된 부분들은 계속 질문해주세요
제가 아는한에서 대답해드리겠습니다!!!!!!
그리고 다음강의에서는 이제 게시판 글씨색이나
글씨 모양, 글씨 크기
이렇게 내용에 관한것들을 할거에요
물논 이렇게 디자인만 적용해도 기본틀이 예뻐서 그냥 놔둬도 괜찮슴다!! 저는 그랬어요
그럼 저는이만....!!!
봐준 여시들 사랑해!!!!
(문제시 둥글게 말해주세요....크흡...!)
(한번씩만 읽어주세요 시간이 없으시다면 맨 밑 빨간글만이라도 읽어주세요!)
안녕하세요 여시들
무려 5개월만에 다시 찾아뵙는 강좌네요 하하 ㅎㅎ
음.......음.......
제가 이렇게 사족을 달게 된대에는.. 좀 슬픈 말을 전하려고 해요
제가 처음에 이 강좌를 찐 이유가
아.. 티스토리 블로그를 꾸미고 싶은데 여시에 마땅한 강좌가 없어서 찾던중
괜찮은 강좌가 있어서 제가 한번 해보고 그것을 인용해 여시들과 공유하려고 찐 것이었어요 ㅎㅎ
음... 많은 여시들이 좋아해주고 저와같은 고민을 하던 사람들에게 해결책을 준것 같아서 기뻤구요
근데 이게 제가 전문가가 아니고.. 음.. 저도 따라한것이라서 한계가 있었을거에요
저도 중간에 많이 막혔었고.. 그런것들을 댓글로 보면서 바로바로 핏백을 하려고 노력했었어요
근데 시간이 지나고.. 제가 사정이 있어서 티스토리를 지금 손 떼게 됐거든요
무작정 따라한거라 손을 떼니 점점 머릿속은 비어가고..
음... 그러니까 이 사족의 요점은..
지금 댓글로 질문같은것을 다는 여시들에게 제대로 답변을 못해드릴 것 같아요...
지식이 없어서 이 얕은 지식으로 전부 해답해주지 못하는것에 한계를 느끼기도 했고..
너무 오래전 일이라 답변을 해드리지 못하니까 죄송스럽기도 하구요..
강좌를 쪄놓고 끝까지 책임 못지는것에 대해선 너무나 죄송합니다
원래는 글을 내리려고 했는데 혹시나마 뒤늦게 티스토리에 대해서 고민하는 여시들에게 도움이될까싶어 이렇게 사족을 달아봅니다
하다보니 말이 많이 길어졌네요
음... 지금까지 올라온 질문글들에 제가 해줄 수 있는 가장 최선의 핏백은
처음부터 차근차근 이 강좌에 나온 소스의 순서와 자신의 것이 틀리지 않았는지 보는것인 것 같아요
저도 딱 한부분이 바뀌었는데 계속 먹통먹고 그랬거든요
그러니까 안된다 싶으면 다시 한번씩 찾아보고 고쳐보고..네..
정말 죄송합니다
앞으론 댓글로 질문글 받지 않을게요. 답변도 못해드릴 것 같아요... 정말 죄송합니다
여러분들의 질문이 귀찮아서가 아니라 제 지식의 부족함때문이라는거 알아주셨으면 좋겠어요!
모두들 티스토리 화이팅~!
강좌고마워!!