TYZEN님이 공개 해주신 티스토리 스킨인 iNove_tyzen 스킨을 소개해 드렸는데요.

지난 포스팅을 통해 font-size 사이즈를 수정하는 방법에 대해 알아봤습니다.

지난 포스팅 말미에 말씀 드린대로 이번 포스팅은 iNove 스킨의 skin.html 수정을 통해 원본의 mail to:address와 twitter/계정을 내 정보에 맞게 변경하는 방법을 안내해 드릴까 합니다.

더불어 제가 미처 확인하지 못했던 상단 광고 배너에 대해서도 수정하려합니다.

스킨을 소개하면서 제 블로그에도 바로 바로 적용하며 글을 쓰다 보니 수정 사항을 한꺼번에 말씀 못드린 점 양해 부탁 드립니다. ^^

본론으로 들어가서 바로 시작 하죠.

관리 페이지로 들어가셔서 왼쪽 메뉴에서 HTML/CSS편집 버튼을 누르면 아래 그림처럼 오른쪽에 skin.html 수정 창이 나옵니다.

skin.html 내용 하단쪽에 내려가 보시면 아래 그림처럼 mailto:tyzen@tyzen.net이라는 항목을 찾을 수 있습니다.

찾기 어려우신 분은 내용 창에 마우스를 클릭하신 후 CTRL+F 를 누르시면 검색창이 나오는데 거기에 mailto 라고 입력하시면 바로 찾을 수 있습니다.

너무 친절하죠. ㅋ

암튼 찾으셨으면,

mailto: 뒤의 값을 자신에게 맞게 수정하시면 됩니다.

mailto:mysecretblue@tistory.com 이런 식으로 말이죠.

다음으로 트위터 계정을 수정해야겠죠?

메일 주소 바로 밑에 보면 twitter.com/tynkr 이라고 돼 있을 겁니다.

이걸 twitter.com/본인계정 으로 수정하시면 됩니다.

간단한 내용이니 쉽게 할 수 있을 겁니다.

제가 사용하는 브라우저 특성으로 사실 미처 발견하지 못했던 부분입니다. ㅠㅜ

다른 컴으로 블로그에 접속했다가 광고 배너가 있는 걸 보고 깜짝 놀라서 이 내용도 말씀 드려야 할 부분 같아서 안내해 드립니다.

아래 그림처럼 배너가 출력 되는데요.

이부분을 삭제할 겁니다.

다시 관리 페이지의 skin.html 을 수정해야 하는데요.

창을 확인 하시면 내용 중에 <div class="banner">라는 항목을 찾을 수 있습니다.

아래 그림을 참고 하셔서 빨간색 부분을 전부 지워 주세요.

자 이제 잘 됐는지 확인 해봐야죠?

잘 되셨나요?

혹시 잘 안되시는 분은 댓글로 남겨 주세요.

미천한 지식이지만 능력 내에서 도와 드릴께요. ^^

도움이 되셨다면 추천 버튼 한번 눌러 주시는 것도 잊지 마시구요. ㅋ

여러분의 추천은 저를 춤 추게 한답니다. ^^

지난 글을 통해 iNove_tyzen 스킨을 소개해 드렸는데요.

적용해 보셨나요? 어떠셨어요?

저는 본문 글씨가 너무 작아서 방문자들이 눈이 아프지 않을까 하는 걱정이 들더라구요.

물론 제가 보는데도 좀 불편하기도 하구요.

시력이 별로 좋은 편이 아니라서...ㅠㅜ

그래서 혹시 저처럼 폰트 사이즈에 만족치 못하시는 분들이 계시다면, 폰트를 수정하는 방법에 대해서도 안내해 드려야 제가 소개해 드린 스킨에 대한 책임을 완수하는 거라 생각해서 이렇게 바로 글을 쓰게 됐습니다.

기특하죠?

토닥 토닥~~~

궁디 팡팡~~~ ㅋㅋ

자 그럼 또 저를 따라 가보실까요?

먼저 글자가 얼마나 작은지 보시죠.

제 블로그 글인데요.

원본 100% 크기로 크롭만 한 상태입니다.

취향에 따라 작은 글씨가 깔끔하고 예쁘다고 느끼시는 분도 계실테지만,

어떤 분은 눈이 아플 수도 있겠다고 생각이 들더라구요.

물론 스킨을 디자인 하신 분이 가장 잘 어울린다고 생각되는 font-size를 설정하신 거라,

폰트를 수정한다는 것이 실례가 될 수도 있겠지만,

또 한편으론 작은 글씨 때문에 블로거가 전하고자 하는 정보 전달에 방해가 될 수도 있을 거라고 생각합니다.

암튼 수정해 보죠.

일단 관리 페이지로 가야겠죠?

아래 그림의 (1) 버튼을 클릭하시면 오른쪽에 HTML/CSS를 수정 또는 파일을 추가 할 수 있는 화면이 나옵니다.

우리가 수정할 곳은 아래쪽에 있는 (2) style.css에 있습니다.

그런데 화면이 굉장히 작죠?

(3) 에 화살표를 누르시면 창이 커지니까 참고하시구요.

style.css의 내용들이 쫙 펼쳐져 있죠.

저도 처음엔 도대체 이게 뭔가 싶을 정도로 눈이 빙빙 돌더라구요.

알아 볼 수 없는 이상한 글자만 잔뜩 써있고, 기호도 막~ 있고...ㅠㅜ

하지만 우리가 오늘 수정할 곳은 아~~~~~~~~주 간단하답니다. ^^

우선 본문에 적용되는 font가 어디에 정의 되어 있는지 찾아야 하는데요.

제가 확인해 보니 body 태그에 정의 되어 있더군요.

그림을 보시면서 따라 하시면 쉬울테니 일단 body 태그를 찾아 주세요.

font-family가 정의 되어 있고, 그 바로 아래에 font-size:0.75em; 이라고 되어 있는 걸 찾으셨다면 이미 성공하셨다고 보셔도 됩니다.

0.75em 이라고 되어 있는 걸 1em 으로 바꿔 주세요.

em 이 의미하는 건 나중에 html 기초에 대해 말씀 드릴 기회가 된다면 설명 드리기로 하구요.

여기선 걍 PASS 할께요. ^^ (귀찮... ㄷㄷㄷ)

암튼 이 것만 수정하면 글자 크기가 아래 그림처럼 커진답니다.

어떤가요?

이 정도 크기면 보기에도 편안하지 않나요?

저는 이 정도 크기면 될 것 같아요.

조금 더 크게 하고 싶으시면 1.2em 정도로 하셔도 되구요.

너무 크다 싶으신 분은 0.9em 정도로 수정하시면 됩니다.

참고로 이 스킨(iNove_tyzen)에만 적용하는 font-size 수정 방법입니다.

다른 스킨에서 똑 같이 따라 하시면 스킨 전체의 글자 크기가 틀어져 버릴 수도 있으니,

주의하세요.

각 스킨들 마다 폰트를 적용하는 방법들이 전부 다르니 꼭 신중하게 확인하셔야 합니다.

[수정1] 여러분께서 보고 계신 지금 이 글은 1em 에서 0.9em 으로 추가 수정한 화면입니다.

글을 다 쓰고서 봤더니 너무 큰 것 같은 감이 있어서 수정했습니다. ^^

[수정2] 스킨 우측 하단에 있는 mail 버튼과 twitter 버튼을 클릭 했을 때 javascript 가 스킨 원본 그대로 적용되어 있더군요. 사용자 분에게 맞도록 수정해야 할 듯합니다. 내일 수정하는 법도 글을 올리겠습니다.

스킨을 바로 적용하면서 글을 썼더니 수정할 게 많네요. Sorry~!

글은 여기까집니다.

도움이 되셨는지...?

도움이 되셨다면~ 버튼을~ 눌러주세요. (요건 신동엽 불후의 명곡2 버전입니다. 자체 음성 지원 좀.... ㅋㅋㅋ)

오늘은 티스토리 스킨을 하나 소개해 드리려고 해요.

제가 요즘 블로그를 예쁘게 꾸미는데 관심이 초집중인데요. ㅋㅋ

정작 신경 써야 할 글의 내용은 뒷전이고 말이죠.

하지만 이렇게 스킨을 소개해 드리는 것도 나름 의미 있다고 생각이 되어 이렇게 스스로 위안해 봅니다. ^^

블로그를 하다 보면 신경 써야 할 것들이 참 많습니다.

물론 당연한 거겠지만 저 같은 초보 블로거의 경우, 블로그의 외적인 면도 굉장히 신경이 많이 쓰인답니다.

저 같은 분들이 많을 거라고 생각이 되어 이렇게 소개해드리니 유익한 포스팅이 됐으면 합니다.

요즘 블로그 꾸미기에 관심이 많다 보니 여기저기 많이 기웃거렸는데요.

다니다 보니 제 눈에 띄는 스킨들이 많더라구요.

그 중에 깔끔하고 눈이 시원한 스킨을 하나 소개해 드리려고 합니다.

혹시 깔끔한 디자인의 스킨에 관심이 많은데 티스토리 스킨 페이지에 등록되어 있는 것들 만으론 성에 차지 않는 분들에게 소개해 드리려고 합니다.

아직 저도 적용해 보지 못한 상태이구요.

이글을 쓰면서 여러분과 함께 차근차근 적용해 보려고 합니다.

글이 끝날 때쯤엔 제 블로그도 이 스킨으로 변신을 하게 되겠네요. ^^

오~ 두근두근...

소개해 드릴 스킨의 이름은 iNove라는 워드프레스용 스킨의 Tistory 버전이구요.

저작권은 NeoEase가 소유하고 있습니다.

티스토리에 맞게 TYZEN 님이 수정 배포하는 스킨이구요.

오리지널 스킨을 TYZEN 님이 Green Theme로 변형한 스킨입니다.

자 그럼 지금부터 같이 가 보실까요?

NeoEase에서 배포하고 있는 오리지널 스킨의 모습입니다.

심플하죠?

워드프레스용 오리지널 스킨은 아래 사이트를 방문하세요.

http://wordpress.org/extend/themes/inove

자 그럼 우리는 원래 가던 길을 가보겠습니다.

먼저 스킨이 어떤 모습인지 샘플을 봐야겠죠?

TYZEN 님의 블로그 화면입니다.

어떤가요? 저는 딱 보자마자 깔끔하고 스타일리쉬하다고 느꼈습니다.

맘에 드시는 분은 계속 글을 따라와 주시고, 맘에 안드시면 그래도 따라 오세요. ㅋㅋ 내 블로그니깐 내맘 ^^

일단 스킨을 받아야겠죠?

다운을 받으셨으면 압축을 풀어주세요.

압축을 풀면 아래 그림처럼 inove_tyzen 폴더 안에 skin.html 파일을 비롯 5개의 파일과 images 폴더가 생깁니다.

그런데 티스토리에 업로드 하려면 images폴더 안의 파일들도 전부 밖으로 꺼내야 합니다.

아래 그림처럼 상위 폴더인 inove_tyzen 폴더로 꺼내주세요.

이제 티스토리의 스킨 등록 페이지로 가서 등록을 해야합니다.

스킨 페이지에 가시면 현재 사용중인 스킨이 보이고 우측 상단에 보면 새로운 스킨을 등록할 수 있는 버튼이 있습니다.

스킨등록 버튼을 눌러서 받아둔 스킨을 등록 해야겠죠?

새로운 스킨을 등록하는 화면입니다.

아래 추가 버튼을 누르세요.

파일들을 등록할 수 있는 대화 상자가 열리고,

압축을 풀어둔 폴더 안에 있는 파일들을 전부 선택해서 열기 버튼을 누르시면 업로드 중이라는 안내문구가 진행되고 잠시후 아래 그림처럼 파일들이 전부 등록되어 있는 걸 확인 할 수 있습니다.

파일 목록 중에 preview.gif 파일을 클릭하면 프리뷰도 볼 수 있구요.

적당한 이름으로 스킨 저장명을 등록해주세요.

스킨명을 저장하실 때는 가급적 배포자의 원래 이름 그대로 사용하시는 것이 좋습니다.

나중에 스킨 출처를 확인한다거나, 업데이트가 있을 경우 다시 방문해서 수정하는 방법 등을 참고하실 때도 좋답니다.

파일들이 모두 등록됐으면 저장하고 나갑니다.

스킨 보관함에 가보면, 아래 그림처럼 현재 사용하고 있는 스킨과 우리가 방금 등록한 스킨이 보관 되어 있는 걸 확인할 수 있습니다.

여기까지 잘 진행되셨나요?

그렇다면 이제 적용버튼을 클릭하시면 여러분의 블로그는 iNove_tyzen 스킨으로 새로운 옷을 갈아 입게 된답니다. ^^

기대되시죠.

자~ 설레는 맘으로 적용 버튼을 3. 2. 1. 클릭~~~!!!

짜~잔~~~

잘 따라 오셨다면 아래 그림처럼 요렇게 되셔야 됩니다.

글쓰기를 진행하면서 스킨을 등록했더니 지금 쓰고(여러분은 읽고 계신) 있는 글이 보이면서 스킨이 잘 적용됐음을 알 수 있네요.

지금까지 iNove_tyzen 스킨을 소개해 드렸는데요.

어떠신가요? 스킨이 맘에 드시나요?

저는 이런 깔끔한 스타일의 스킨이 좋더라구요.

왠지 stylish 하다고 해야하나...? ㅋㅋㅋ

저는 당분간 예쁜 스킨들을 추천해 드리고 적용 방법에 대한 글을 쓸 예정이라서,

스킨이 계속 바뀔 것 같네요.

방문하실 때 마다 스킨이 바껴서 정신 없으시더라도 양해 부탁드립니다.

(단골 방문객도 없으면서 ㅋㅋㅋ  많이들 좀 놀러 오시면 좋으련만...)

참, 그리고 이 스킨의 경우 컬러 테마도 여러가지 버전으로 업데이트 되어 blue, gray, pink, purple, red, yellow egg 등 취향대로 선택할 수 있는 패치(?)파일도 올라와 있답니다.

다른 컬러의 테마를 적용하시고 싶은 분은 http://weeklyblog.tistory.com/8에 방문하시면 패치할 수 있는 파일을 다운 받으실 수도 있습니다.

오늘은 여기까집니다.

도움이 좀 되셨나요?

도움이 되셨다면, 아시죠? 추천 버튼 한번 부탁 드려용~~~

저는 여러분의 사랑을 먹고 사는 여자랍니다. ^^