이번에 소개해 드릴 스킨은 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 님에게 감사 드립니다. ^^

오늘 소개해 드릴 스킨은 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">라는 항목을 찾을 수 있습니다.

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

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

잘 되셨나요?

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

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

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

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