1. 2013.03.06 티스토리 스킨 iNove 폰트 변경
  2. 2013.03.06 티스토리 스킨 #1 iNove 소개 3
  3. 2013.03.05 티스토리 스킨 적용하기 24

티스토리 스킨 iNove 폰트 변경



iNove 스킨 폰트 변경



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

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



iNove_tyzen 스킨 소개 페이지를 보시려면,

mysecretblue.tistory.com/24

로 이동 하세요.



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

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

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


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

기특하죠?

토닥 토닥~~~

궁디 팡팡~~~ ㅋㅋ


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



FONT 크기 변경



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





제 블로그 글인데요.

원본 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 버전입니다. 자체 음성 지원 좀.... ㅋㅋㅋ)



티스토리 스킨 #1 iNove 소개



티스토리 스킨 : iNove



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


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

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

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


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

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

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


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

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

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


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


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

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

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

오~ 두근두근...


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

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

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

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


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




iNove Green 티스토리 스킨 Ver2.2



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

심플하죠?





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

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



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

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





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

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


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


일단 스킨을 받아야겠죠?


스킨을 다운로드 해주세요.

inove_tyzen.zip



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

압축을 풀면 아래 그림처럼 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에 방문하시면 패치할 수 있는 파일을 다운 받으실 수도 있습니다.


오늘은 여기까집니다.


도움이 좀 되셨나요?


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


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



티스토리 스킨 적용하기



티스토리 스킨 적용하기



오늘은 블로그 스킨에 대해 얘기해 보려구합니다.


저 같은 초보자를 위한 글이니 고수님들께는 도움되는 내용이 저~~~~~~~~~~~~언혀 없을 거라는 점을 미리 말씀 드립니다. ^^


처음 블로그를 시작하시게 되면 부딪히게 되는 애로사항이 참 많습니다.

이글을 쓰고 있는 저도 블로그를 시작한지 얼마 안돼서 스킨 선택부터 CSS적용 등 여러군데서 어려움이 있더라구요.

그래서 여기저기 html강좌 싸이트 들도 보고,

잘 만들어진 블로그 들도 기웃 거리면서 눈동냥, 귀동냥을 했답니다.

아! 지금도 여기저기 기웃 거리는 편이구요. ㅋㅋ


암튼 이 글은 저처럼 블로그를 꾸미고 싶어도 방법이 너무 어렵고 이해가 안가는 분들을 위해 조금이라도 도움이 될까 싶어 쓰는 글입니다.

앞으로 html에 대한 기초문법이나, css기초에 대해서도 글을 써볼까 합니다.


저는 사실 다른 포탈사이트에서 블로그를 시작했었는데요.

거기서는 사용자가 설정할 수 있는 것들에 대한 제약이 너무 많더라구요.

그래서 제 맘에 드는 블로그 스타일을 만들기 위해 알아 보다보니 초보자에게도 비교적 쉬운 접근이 가능한 곳이 티스토리라는 것을 알고 여기에 정착하게 됐답니다.

아~! 물론 티스토리가 초보자에게 쉬운 블로그라는 말은 아니구요. 블로그를 내맘대로 장식하고 스타일을 구현하는데 있어서 좀더 자유롭다는 뜻입니다.

이게 먼 말인지...ㄷㄷㄷ


암튼 처음 티스토리로 이사하기로 마음 먹고 아이디를 만들고, 처음 블로그를 개설 했을 때의 감정은 더도 아니고 덜도 아니고 그냥 멘붕이었답니다. ㅋㅋ

티스토리에 블로그를 개설하면 제일 먼저 스킨을 고르겠죠?

저도 스킨 선택 페이지에서 제 맘에 드는 심플한 스타일로 한넘을 찍었더랬죠.

바로 요넘인데요.





그리곤 적용 버튼을 딱 눌렀죠.

그랬더니 요렇게 되더군요.





멘 ~~~ 붕


다른 포털사이트 블로그의 경우, 처음에 블로그를 개설하면 환영메세지, 블로그 꾸미는 방법 등 초보 블로거로서 앞으로 해야 할 일들에 대한 안내글이 블로그 홈에 출력 되죠.

그래서 앞으로 내가 글을 쓰면 이렇게 꾸며진다 하는 정도의 감을 잡을 수 있죠.

그런데 티스토리는 내가 쓴 글이 없으면 아무것도 안보여주니 뭐 부터 해야 할지 당황하게 된답니다.


그랬던 저의 걸음마 시절을 생각하며,

이글을 보시는 분들에게 조금이라도 도움이 되고자 티스토리 스킨 적용하는 방법에 대해 조금 알아볼까 합니다.


티스토리 스킨 선택 페이지에 보면 깔끔하고 예쁜 디자인들이 많이 있구요.

개인 블로거들이 티스토리용 스킨을 제작해서 배포하시는 분들도 많답니다.



티스토리 스킨 페이지



일단 티스토리 스킨 페이지에 있는 스킨을 하나 골라서 적용하는 방법부터 보죠.


스킨 관리 페이지에서 보면 스킨을 고르는 썸네일들이 있고, 클릭하면 아래에서 좀 더 큰 미리보기를 볼 수 있게 돼 있죠.





맘에 드시는 걸 골라서 내 블로그의 스킨으로 사용하면 되는데요.


일단 맘에 드는 걸 하나 골라서 적용해 볼까요?

하단에 보시면 미리보기 버튼(1)과 적용버튼(2)이 있는데요.





골라 놓은 스킨을 적용하기 전에 미리 보기 버튼(1)을 클릭해서 내 글에 어떻게 적용될지를 한번 보시구요.




맘에 든다면 적용 버튼(2)을 클릭하시면 적용됩니다.

이제 잘 적용되었는지 내 블로그 홈으로 가봅니다.





잘 적용됐네요.



개인 블로거가 배포하는 스킨



이번엔 좀더 내 맘에 드는 스킨을 사용하기 위해 스킨을 개인적으로 배포하시는 분들의 스킨을 적용해보겠습니다.


먼저 스킨을 다운 받아야겠죠?

검색을 해보시면 티스토리용 스킨을 제작해서 배포하시는 분들이 많을 거예요.

맘에 드는 걸 찾으시려면 발품을 좀 팔아야겠죠?


일단 맘에 드시는 스킨을 찾으시면, 다운로드 합니다.

배포 스킨은 대부분 zip 파일로 압축이 되어 있습니다.

다운 받은 파일의 압축을 풀어 주시구요.


이제 다시 티스토리 관리자 화면의 스킨 페이지로 돌아옵니다.


그림처럼 현재 사용중인 스킨이 보이구요.

오른쪽 위에 보시면 스킨 등록이라고 버튼이 있습니다. 살포시 눌러주세요.





그림처럼 스킨등록 화면으로 변경됩니다.

화면 아래쪽에 있는 추가 버튼을 누릅니다.





그럼 이렇게 추가할 파일을 선택할 대화상자가 열리는데요.

첫 파일부터 마지막 파일까지 전체를 선택하시구요. 등록 해줍니다.

첫 파일을 클릭하고 SHIFT 키를 누른 상태에서 마지막 파일을 클릭하면 전부 선택됩니다.(ㅋㅋ 혹시나 모르시는 분이 계실까봐...)





이렇게 파일이 업로드되는 화면이 진행됩니다.





완료되면 이렇게 비어 있던 곳에 파일이 등록된 모습을 볼 수 있습니다.





파일 중 preview.gif 를 클릭하면 왼쪽 프리뷰 화면에 적용될 스킨의 미리보기를 볼 수도 있구요.





밑에 있는 저장 버튼을 누르면 됩니다.

그런데 혹시 제목을 안 쓰고 저장을 하게 되면 요렇게 경고창이 뜹니다.





아래 그림처럼 화면 오른쪽 위에 있는 스킨 제목란에 스킨 저장명을 입력하시면 됩니다.

입력할 때 나중에 배포자가 진행하는 업데이트나 소스 수정 팁 같은 안내를 이용할 때 다시 찾아가기 편하려면, 가급적 배포자의 원래 제목을 입력하시는 것이 좋겠죠?

혹시 내가 필요에 의해서 소스를 살짝 수정했다면 제목은 그대로 쓰고 마지막에 버전명만 살짝 바꾸면 됩니다.

예를 들면 Piano_Black_Tistory-09가 원 제목이라면 Piano_Black_Tistory-09_SB 이런식으로 바꾸는 거죠.





이제 스킨 보관함을 보면, 현재 적용중인 스킨이 위에 보이고 아래에 보면 새로 등록한 스킨이 보일 겁니다.





선택하고 적용 버튼을 누르면 적용 됐다는 안내 문구가 출력되고 스킨이 적용된답니다.


잘 됐는지 확인해야겠죠?

내 블로그 홈으로 가보죠.

제 경우는 이렇게 화면이 뜹니다.





저는 개인적으로 이 스킨이 맘에 들어서 지금 쓰고 있네요.


이 스킨이 혹시나 맘에 드시는 분이 계실까해서 링크를 걸어두겠습니다.

cssmayo.com라는 사이트에서 배포한 워드프레스용 스킨을 Juostory님이 티스토리에 맞게 수정한 스킨입니다.



다운로드 받으실 분은 아래 페이지로 이동하셔서 다운 받으세요.

mysecretblue.tistory.com/27



더불어 저도 감사의 인사를 드립니다. Thank you~.


당분간은 스킨 디자인에 대한 스트레스는 없을 것 같네요.

이제 글이나 잘 쓰면 될 거 같아요. ^^


여러분도 맘에 드는 스킨이 있다면 이렇게 사용하시면 되겠습니다.


오늘 글은 여기까지 입니다.


어떻게 조금 도움이 되셨는지 모르겠네요.

도움이 되셨다면 추천 버튼 한 번 클릭해주시는 거 아시죠? ㅋㅋ

잘 부탁 드립니다. 꾸벅 ^^