티스토리 스킨 #6 One Room 스킨 소개

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

읽어 주셔서 감사하구요. 추천 버튼은 제가 글을 쓰는데 큰 힘이 된답니다. ^^