이번에 소개해 드릴 스킨은 OneRoom 이라는 스킨입니다.

제가 맘에 들어서 소개를 해야겠다고 생각하는 스킨은 대부분 워드프레스 스킨의 컨버팅 버전이더군요.

오늘 소개하는 OneRoom 도 워드프레스용 테마를 iBizstory님이 티스토리용으로 바꾸신 버전이구요.

Web-Kreation 이 원작의 저작권을 갖고 있습니다.

티스토리용 OneRoom 스킨은 버전이 여러 갠데요.

iBizstory 님이 사용자들의 요구에 따라 본문의 폭을 여러가지로 만드셨더군요.

필요에 따라 다운로드 하셔서 사용하시면 되겠습니다.

제가 소개를 위해 적용한 버전은 기본 버전이니 참고하시구요.

자~ 그럼 만나러 가 보실까요?

일단 생김새부터 보면,

보시다시피 굉장히 깔끔하면서도 독특한 디자인이 맘에 듭니다.

위 그림에는 없습니다만 특히 댓글과 트랙백이 특이하게 적용되더군요.

나머지 사항들은 보시는 바와 같으니 특별히 설명을 안드려도...

스킨이 맘에 드시는 분은 아래 파일 중 필요한 버전을 다운 받으셔서 사용하시면 됩니다.

또는 전부 적용해 보시고 맘에 드시는 걸로 정하셔도 상관 없구요.

기타 550px 버전이나 1024px 버전도 있는데 혹시 필요하신 분은 직접 iBizstory 님의 블로그를 방문하셔서 다운 받으시기 바랍니다.

맘에 드는 버전을 다운 받으셨으면 설치를 하시구요.

혹시 스킨 적용하는 법을 모르시는 분은, 제 예전 글 [ 티스토리 스킨 적용하기] 를 참고 하시면 되겠습니다.

스킨을 적용하셨으면 이것 저것 본인에게 맞게 수정을 해야겠죠?

가장 먼저 블로그 주인의 이미지를 적용해 보겠습니다.

처음 스킨을 적용하면 아래 그림처럼 깜짝 놀랄 비쥬얼의 이미지가 떡하니 나옵니다. ㅋ

맘에 드시면 그냥 사용하시구요. ^^

우선 본인의 블로그 프로필 사진으로 대체하는 방법을 보면,

아래 그림처럼 skin.html을 간단하게 수정해서 본인이 블로그 기본 정보에 입력해 놓은 블로그 이미지가 나오도록 해 보겠습니다.

이렇게 수정하면 아래 그림처럼 자신이 블로그 기본 프로필에 입력해 두었던 이미지가 출력됩니다.

잘 수정이 됐네요.

그런데 문제가 한가지 있습니다.

뭔지 아시겠죠?

원래 스킨에 적용됐던 이미지에 배해 너무 커서 조금 부담 스럽기도 하고 이미지 옆으로 출력되던 메세지가 아래로 내려 왔습니다.

이렇게 그냥 사용하셔도 되구요.

디자이너의 원래 의도대로 좀 작은 이미지에 그 우측에 메세지가 출력되도록 해 보겠습니다.

아래 그림처럼 skin.html 항목의 각주를 원래대로 두고, 대신 본인이 사용할 이미지의 파일이름으로 변경을 해주거나,

혹은 본인이 사용할 파일의 이름을 아예 about.jpg로 만들어서 업로드 해도 결과는 같습니다.

이때 이미지 파일 크기는 폭과 높이가 80px 정도면 적당하니 참고하셔서 만드시구요.

자, 그럼 결과를 봐야죠?

내용을 이해하고 잘 따라 하셨다면, 아래 그림처럼 의도대로 적용된 스킨을 확인 할 수 있습니다.

다음으로 상단 메뉴 중 typography 를 수정해 보겠습니다.

아래 그림처럼 typography 메뉴는 기본값으로 <www.ibizstory.com 845> 이 설정되어 있습니다.

그냥 두고 사용하셔도 문제는 없구요.

필요없는 분은 수정하셔도 상관 없습니다.

다음은 카테고리의 형태인데요.

스킨을 적용하면 카테고리의 기본 형태는 트리 구조가 숨겨져 있는 형태입니다.

즉, 대표 주제만 출력되고 서브 주제가 있는 경우 앞에 (+) 표시로 추가적인 주제가 더 있다는 걸 표시하는 형태죠.

그냥 사용하셔도 크게 불편한 점은 없습니다만,

저 처럼 카테고리 내에 주제가 몇개 없어서 방문자로 하여금 한 눈에 보게 하고 싶으신 분은 풀어 놓는 것이 좋을 듯해서 방법을 소개해 드릴까 합니다.

아래 그림을 보면서 설명을 드리겠습니다.

skin.html 편집 창에서 보시면,

빨간색 박스가 기본형태로 적용되어 있는 거구요.

카테고리를 펼쳐 놓는 형태는 파란색 박스의 각주로 묶여서 비활성화 되어 있는 상태입니다.

빨간 박스를 통째로 삭제해 버리셔도 되고, 나중에 다시 변경할 분은 파란색 각주를 빨간 박스 앞과 뒤에 각각 옮기셔도 됩니다.

빨간 박스를 통째로 버리셨다고 바로 적용되는 게 아니라 파란 박스도 삭제 해야 된다는 걸 알아 두시구요.

나중을 위해 두 형태 모두 남겨 두실 분도 꼭, 파란 색으로 표시된 각주는 위나 아래 한군데에만 있어야 한다는 점 기억하세요.

잘 이해하셨다면, 아래 그림처럼 카테고리가 펼쳐진 형태로 적용된 걸 확인하실 수 있을 겁니다.

잘 되셨나요?

사실 아주 기초적인 건데, 혹시나 너무 기본적인 설명으로는 도무지 뭐가 뭔지 이해를 못하시는 초보 분들을 위해 장황하게 설명하는 점 이해해 주시길 바랍니다.

제가 처음에 너무 헤맸던 경험이 있거든요.

자세한 설명을 해주는 곳이 없어서 애를 먹었더랍니다. ㅋㅋ

그 때의 아픈 기억을 생각하며 조금이라도 도움이 될까해서 쓰는 글이니 고수님들은 스킨 프리뷰만 보시고 패스 하시면 될 듯 합니다. ^^

갑자기 얘기가 삼천포로 빠졌네요.

암튼 다시 이어가 보죠.

이번에 말씀 드릴 내용은 이미지 적용에 관한 건데요.

아래 그림처럼 이미지가 본문 폭보다 크게 되면 자동으로 폭에 맞춰지지 않고, 잘려 나갑니다.

물론 그림을 클릭하게 되면 아래처럼 원본 사이즈대로 감상할 수 있습니다.

제가 사용한 버전은 이미지를 본문 폭에 자동으로 맞춰 준다는 버전인데 왜 그런지 확인을 해봐야 할 것 같습니다.

아직까지는 확인을 못했구요.

혹시 확인이 되면 추가 내용을 포스팅 하겠습니다.^^

지금까지 iBizstory 님이 공개해 주신 OneRoom 스킨에 대해 살펴 봤습니다.

개인적으론 참 마음에 드는 스킨인데 어떠실지 모르겠네요.

암튼 필요하신 분들은 잘 사용하시길 바랍니다.

좋은 스킨을 공개해 주신 iBizstory 님에게 감사 드립니다. ^^

이번에 소개해 드릴 스킨은 Ply2-Line 이라는 스킨입니다.

Ply2-Line 스킨은 원래 리체님이 만드신 2단 스킨인데요.

오리지날 버전인 2단 스킨을 Juostory 님이 3단으로 수정한 버전을 소개해 드릴까 합니다.

그 동안 스킨 소개 글을 쓰면서 <"이건 이렇게 바꾸시면 됩니다."> 라는 안내를 많이 드렸는데,

이 번에 소개 하는 Ply2-Line은 정말 심플해서 뭐 자기 블로그에 맞게 수정하고 할 필요도 없는 스킨입니다.

전체적으로 하얀 배경 때문에 글에 집중할 수 있다는 장점도 있습니다.

또 스킨에 따라서 티스토리에서 바로 적용이 안되는 아이콘이나 뭐 기타 등등 그런 것이 전혀 없이 바로 잘 적용이 되더군요.

그냥 받아서 바로 사용하시면 될 겁니다. ^^

자~ 일단 만나 보실까요?

일단 생김새부터 봐야겠죠?

괜찮은가요?

3단 스킨이기 때문에 스킨의 폭이 약간 넓은 감이 있지만,

요즘은 웬만하면 화면 폭이 1280px 이상을 사용하기 때문에 부담 없이 사용하셔도 될 것 같습니다.

오히려 사용하는데 시원한 느낌을 주는 장점이 더 커 보입니다.

다만 제 눈에 조금 불편해 보이는 것이 하나 있는데요.

포스트의 제목이 좀 작아서 처음엔 익숙치가 않았습니다.

이 점만 빼면 깔끔하게 사용할 수 있겠네요.

Ply2-Line-3단 스킨이 맘에 드시는 분은 아래 파일을 다운 받으셔서 사용하시면 됩니다.

티스토리에 스킨을 등록하는 방법은 제 예전 글 [ 티스토리 스킨 적용하기] 를 참고 하시면 됩니다.

다른 스킨들에 비해 굉장히 가볍기 때문에 페이지 이동이나 블로그로 접속 했을 때도 부담 없다는 걸 확인할 수 있을 겁니다.

필요하신 분들은 잘 사용하시길 바랍니다.

이상으로 Ply2-Line-3단 스킨 소개를 마칩니다.

그리고 좋은 스킨을 제공해 주신 리체님과 주오님에게 감사 드립니다. ^^

오늘 글은 여기까집니다.

읽어 주셔서 감사합니다.

오늘 소개해 드릴 스킨은 PIANO BLACK이라는 스킨입니다.

PIANO BLACK은 지난 시간에 소개해 드린 neutral 스킨을 제작한 Mono-lab의 또 다른 작품입니다.

이 스킨도 마찬가지로 원래는 워드프레스 용으로 제작되었는데, Juostory님이 티스토리용으로 배포하신 스킨입니다.

제가 스킨을 소개하면서 유독 Juostory님의 스킨을 많이 소개해 드리게 되네요.

그만큼 제가 좋아하는 스타일이 많다는 거겠죠?

나름 코드가 맞다고나 할까요. ㅋ

자~ 일단 만나 보실까요?

일단 생김새부터 봐야겠죠?

어떠신가요?

지난 시간에 소개해 드린 neutral 스킨이 순백의 깔끔함을 추구한 것과는 반대로 PIANO BLACK 스킨은 블랙이 주는 시크하면서도 깔끔한 컨셉이 참 좋습니다.

사실 저는 neutral과 piano black 사이에서 살짝 고민을 하고 있답니다. ㅎㅎ

포토샵으로 여러분께 보여드릴 이미지를 작업하면서도 참 깨끗하고 군더더기가 없다고 느끼면서 즐겁게 작업 했답니다.

piano black 스킨이 맘에 드시는 분은 일단 다운 먼저 받아 주시구요.

티스토리에 스킨을 등록하는 방법은 제 예전 글 [ 티스토리 스킨 적용하기] 을 참고 하시면 됩니다.

세부적인 걸 살펴 보면,

그 동안 다른 스킨들을 사용하면서 상단에 표시되던, DAUM, Tistory, 관리, 로그아웃 등 기본 메뉴가 표시되지 않고, 대신 piano black 스킨이 제공하는 기본 메뉴가 큼지막하게 자리합니다.

neutral 스킨과 마찬가지로 메뉴는 마우스를 올리면 서브 메뉴들이 아래로 펼쳐지는 방식을 취하고 있습니다.

본문의 삽입하는 그림은 폭 549px까지 입력이 되지만 이보다 큰 그림이 삽입되면 클릭시 원래 사이즈로 출력됩니다.

사이드바에는 카테고리와 최근 글, 달력, 블로그롤 등이 위치하고 있는데, 이중 블로그롤은 현재 적용이 되지 않더군요.

html 파일을 확인해 봐야 할 듯 합니다.

수정 방법을 확인하게 되면 추가 글을 통해 알려 드리도록 하겠습니다.

달력의 경우 포스팅 된 날에는 동그라미 표시로 알려 줍니다.

화면 우측 하단에 항상 고정되어 있는 Top 복귀 버튼(Return Top)이 있고, 스킨 가장 하단에도 복귀 버튼이 있습니다.

요즘은 마우스 제스쳐를 많이 사용하기 때문에 사실 많이 사용하지 않지만 제스쳐 기능을 사용하지 않는 분들은 유용할 듯 하네요.

메뉴 버튼의 서브에 위치하는 미디어 메뉴는 아래 그림처럼 포스팅되어 있는 글 목록들이 그림과 함께 출력되면서 약간의 미리보기를 제공 함으로써 카테고리 별로 자신이 보고 싶은 글을 찾기 쉽게 해줍니다.

지금까지는 스킨의 대략적인 특징에 대해 살펴 보았구요.

이제부터 사용자에 맞게 스킨을 수정하는 법에 대해 알아 보겠습니다.

먼저 상단에 있는 PIANO BLACK 스킨 로고를 자신에게 맞게 수정해 보겠습니다.

원래의 형태처럼 문자 형태로 로고를 만드시려면 검정(#000000) 바탕에 문자로 만드시면 되는데요.

파일의 크기는 211*15로 문자가 높이로 가득차게 만드시면 됩니다.

파일의 이름은 logo.gif로 저장하신 후,

스킨 관리 페이지에서 업로드 해줍니다.

그러면 원래의 logo.gif 파일이 새로 업로드한 파일로 바뀝니다.

이렇게요. ↓ ↓

다음은 우측에 있는 INFORMATION 창을 수정해 보죠.

스킨 관리 페이지의 skin.html 창에서 아래 부분을 찾으신 후 자신이 출력하고 싶은 문구를 입력하면 됩니다.

참~ 쉽죠~잉~~~ ㅋㅋ

이번엔 댓글에 사용자의 아이콘이 표시되게 해보겠습니다.

먼저 아이콘이 있어야겠죠?

아이콘으로 사용할 파일은 41*41인데, 좀 더 크게 80*80 정도로 만들어 두시면 나중에 다른 스킨에서 사용할 때 쓰시기 좋겠습니다.

스킨마다 지원하는 아이콘의 크기가 다르니까 말이죠.

준비되셨으면, 아까 logo 파일을 올리는 방법과 마찬가지로 아이콘 파일도 업로드 해줍니다.

업로드가 완료되면 아래 그림처럼 skin.html을 수정해 주면 됩니다.

아참, 이 때 본인이 사용할 파일의 이름을 bg-none.png로 준비하시면 안됩니다.

그러면 손님의 댓글에도 같은 아이콘이 출력되어 버립니다. ㅋ

그러면 안되겠죠?

손님 아이콘은 bg-none로 그냥 두시고, 본인의 파일은 별도의 이름으로 준비하셔서 업로드 하셔야 합니다.

그리고 아래 그림의 skin.html 부분을 자신이 사용할 아이콘 파일의 이름으로 수정하시면 완료입니다.

여기까지 잘 진행하셨다면, 요렇게 아이콘이 성공적으로 등록된 걸 확인 하실 수 있을 겁니다.

스킨 소개와 수정 방법에 대해서 말씀 드렸는데요.

제가 며칠 사용해 본 바로는 다른 스킨에 비해 약간은 무거운 경향이 있더군요.

물론 제 컴이 좀 오래되기는 했지만...ㅋ

암튼 로그인 버튼이 따로 출력이 되지 않기 때문에 메뉴의 admin 패널로 들어가야 되는데, 이 메뉴의 서브 항목들이 로딩되는데 시간이 꽤나 걸리더군요.

물론 손님으로 오신 분들도 하위 항목인 [미디어]나 [태그]를 보시려면 조금 답답할 수도 있겠네요.

이 점 외에 저는 대부분 만족하고 잘 쓰고 있습니다.

필요하신 분들은 잘 사용하시길 바라면서...

오늘 글은 여기까집니다.

읽어 주셔서 감사합니다.

최근 연이어 티스토리 스킨 소개 글만 쓰고 있네요. ㅋ

제가 당분간 쓸 시킨도 고를 겸, 또 고르다가 추천해 드릴 만한 스킨이 있으면 소개도 할 겸 포스트를 작성하고 있답니다.

참고로 저는 화려하고 복잡한 스킨보다는 심플한 걸 좋아라 한답니다.

심플하고 깔끔한 스킨을 찾으시는 분들에게는 좋은 소개가 될 거라 생각합니다.

오늘도 지난 포스트에 이어 Juostory님이 공개하신 다른 스킨을 소개 할까 합니다.

neutral 이라는 스킨인데요.

원래는 워드프레스용으로 일본의 mono-lab에서 만든 스킨입니다.

워낙 투명하고 깔끔한 스타일이라 자칫 밋밋해 보일 수도 있지만 제 눈에는 너무 예쁘더라구요.

일단 스킨 모습부터 보실까요?

<image-1> 클릭하시면 큰 사이즈로 볼 수 있습니다.

어때요? 너무 예쁘지 않나요?

저는 보자마자 홀딱 반했는데. ㅋㅋ

원래는 사이드바가 글 옆에 있는 2단 스킨인데, Juo님이 글을 넓게 쓰고 싶어 하는 분들을 위해 본문을 넓히고 사이드바는 원할 때만 볼 수 있게 따로 배치한 스타일 입니다.

음.... 무슨 말이냐면요.

그림을 보면서 설명 드려야겠네요.

아래 그림처럼 사이드바를 클릭하면 글 목록이 나오면서 사이드 바가 출력된답니다.

<image-2> 클릭하시면 큰 사이즈로 볼 수 있습니다.

위에서 설명한 대로 글의 내용을 볼 때는 사이드바가 없는 상태로 글이 넓게 나오구요.

사이드바 메뉴를 클릭하면 다른 2단 스킨처럼 글 목록과 Recent Post 등 다른 항목 들이 출력되는 방식입니다.

저는 이방식에 금방 적응됐는데 어떨지 모르겠네요.

스킨이 맘에 드시면 일단 다운 받으셔야겠죠?

혹시 티스토리에서 스킨 등록을 해 본 적 없으시거나, 잘 모르시는 분은 지난 글을 참고해주세요.

자, 이제 본격적으로 요놈에 대해서 파헤쳐 볼까요?

상단 page-navi 항목 중 메뉴<menu> 부분은 마우스를 올리면 서브메뉴가 펼쳐지는 방식으로 되어 있습니다.

스킨 우측 상단에 보시면 twitter 버튼이 있는데요.

스킨을 설치 하시면 기본적으로 세팅이 안되어 있으니 나에게 맞게 설정 해야겠죠?

위 그림에서 회색 박스는 이 스킨의 skin.html 내용의 일부를 크롭한 건데요.

티스토리 관리 화면, html/css 수정화면으로 가셔서 그림처럼 twitter 항목을 찾으세요.

twitter.com/xxx 에서 xxx를 자신의 트위터 계정으로 바꿔 주시면 됩니다.

쉽죠?

다음으로 누군가의 댓글에 추가로 코멘트를 하게 되면 내 아이콘이 출력되게 하는 법을 알아 보겠습니다.

아래 그림을 참고 하시구요.

일단 출력될 아이콘이 필요하겠죠?

사이즈는 64x64 정도의 이미지 파일을 준비해주시구요.

준비한 파일을 티스토리 관리 모드의 html/css 편집 → 파일업로드 → 추가 버튼을 클릭해서 올려줍니다.

그런 다음 skin.html 편집 창을 엽니다.

그림에 보시면 파란색으로 children 이라는 ul 항목을 찾을 수 있습니다.

항목을 따라 내려가다 보면 img src='./images/bg-none.png라고 되어 있는데,

이 내용 중 bg-none.png 를 아까 본인이 업로드 한 파일 이름으로 바꿔 줍니다.

잘 되셨나요?

혹시 모르시겠다면 댓글을 남겨 주세요.

이상으로 Juo님의 Neutral 스킨을 소개해 드렸습니다.

제 눈이 더 번쩍 뜨이게 하는 스킨을 발견하기 전까지는 이 스킨을 쭉 사용할 것 같아요. ^^

오늘 글은 여기까집니다.

아시죠? 추천은 저를 춤추게 한다는 걸... ^^

오늘 소개해 드릴 스킨은 Juostory님이 공개해 주신 chocotheme 스킨입니다.

원래 이 스킨은 cssmayo.com에서 워드프레스용으로 개발한 스킨으로 인기 있는 스킨입니다.

저도 잠시 사용했던 스킨인데요.

우선 스킨이 어떻게 생겼는지 확인해 보죠.

예쁘지 않나요?

마치 예쁜 가죽 다이어리를 펼쳐 놓은 것 같은 모습입니다.

사이드 바 메뉴 부분의 스티치 무늬까지 딱 가죽 다이어리의 모습입니다.

디테일이 솨~라~있~네~~ ㅋㅋ

투명한 느낌의 화이트 계열 스킨들도 예쁘긴 하지만 너무 밋밋하다는 생각이 들어 좀더 개성 있는 칼라 테마의 스킨을 원하시는 분들에게 권하고 싶네요.

마음에 드신다면 스킨을 다운로드 해주시구요.

특징을 살펴보면,

아래 그림을 보시면 아시겠지만, Category 외의 사이드 바 영역이 플립플롭(Flip-Flop)방식으로 되어 있습니다.

이 방식이 맘에 들지 않아서 항상 메뉴를 펼쳐 놓고 싶으신 분은 skin.html 을 수정해 주셔야 합니다.

아래 그림처럼 skin.html 창에서 pagenav 요소를 찾으시고 display:none 부분을 display:block 으로 수정 하시면 됩니다.

나머지 Recent Post 모듈, Recent Comment 모듈, Archives 모듈, Book Mark 모듈도 마찬가지로 display 방식을 변경하시면 됩니다.

요건 귀찮아서 그림은 없습니다. ^^

암튼 수정을 마치고 변경된 사항을 저장하고 내 블로그로 다시 돌아와 보면 아래 그림처럼 Pages 메뉴가 펼쳐져 나오는 걸 확인할 수 있을 겁니다.

잘 되셨나요?

오늘은 Juostory님의 chocotheme 스킨을 소개해 드렸는데요.

맘에 드셨으면 좋겠네요.

읽어 주셔서 감사합니다.

이글이 도움이 되셨다면 추천 버튼을 꼬~~~옥 눌러 주세요. ^^

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에 방문하시면 패치할 수 있는 파일을 다운 받으실 수도 있습니다.

오늘은 여기까집니다.

도움이 좀 되셨나요?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

바로 요넘인데요.

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

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

멘 ~~~ 붕

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

잘 적용됐네요.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

잘 됐는지 확인해야겠죠?

내 블로그 홈으로 가보죠.

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

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

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

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

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

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

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

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

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

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

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

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