슈퍼울트라 초보를 위한 스킨 수정

언제나 그렇듯 루인의 무식을 자랑삼아 시작하는 스킨을 수정하기 위한 최소한의 방법 소개입니다. 보다 전문적이고 자세한 내용은 여기서 스킨과 관련한 항목들을 참고 하세요. 루인은 순전히 루인의 수준에 맞춰서 설명합니다. 케케케. 알고 보면 루인이 다음에 스킨을 수정할 일이 있는데 잊어 버려서 못하게 될까봐 기록하는 거라는-_-;;; 흐흐

00
루인이 설명할 기본 스킨은 이것이에요. 지금의 변태고냥J의 나비날기 스킨이기도 하고요. 태터툴즈건 티스토리건 상관없이 사용할 수 있고요.

01. 스킨 수정을 위한 메모장 열기
[#M_ 이 정도는 아신다면 생략 | 루인은 이걸 몰라서 한동안 헤맸지요 |
폴더를 다운 받아서 압축을 푸니

이렇게 나오네요. 파일을 열어 보니

이렇게 나오고요. 이제부터 시작이에요.

여기 있는 파일들을 모두 설명할 수 있는 능력은 없어요. 케케. 말하나 마나 당연한 거고요. -_-;; “images”폴더는 스킨에서 기본적으로 사용하는 그림파일들이 들어 있어요. 스킨을 직접적으로 수정하기 위해선

이 “skin.html”파일이 중요해요. 이 파일을 더블클릭해서 열면

새 창이 뜨면서 위 그림처럼 나올 거예요. 루인의 경우엔 여기서 다음 단계로 가는데 넉달 걸렸어요-_-;;; 이 화면에서 마우스의 오른쪽 버튼을 누르면

이렇게 되죠. 그럼

“소스보기”를 클릭하세요. 그러면 메모장을 통해 문제의 화면이 나와요.
_M#]

02. 메뉴 수정하기
아마 스킨 수정에 있어 최대 난관은 바로 여기에 있죠. 사실 skin메모장을 보는 순간, 루인은 스킨을 수정하겠다는 의욕이 몽땅 사라지는 걸 경험하기도 했죠 ㅠ_ㅠ

[#M_ 읽기.. | 접기.. |
이 스킨을 만들어 주신 분은 기본적으로

이렇게 “About”, “WorldTour”, “Tag”, “Admin”, “Rss”, “GuestBook”을 제공하고 있어요. 스킨을 수정하기 위한 가장 기본적인 단계는 이 메뉴를 적절히 정리하는 것인데요, 루인의 입장에선 최소 두 가지 “Admin”, “Rss”는 살릴 것 같아요. “Admin”이야 당연히 정리할 수 없을 테고요-_-;;; “Rss”는 다른 사람들이 이 주소를 통해 Rss리더로 읽는 경우가 있고 블로그의 중요한 특징 중 하나이기에 살려 두는 것이 좋을 것 같아요. 물론 루인의 예전 블로그에선 이걸 없앴지만요. 케케케

요 “WorldTour”가 이른바 지역로그인데요, 루인처럼 지역로그를 전혀 안 쓰는 블로거에겐 있으나 마나인 메뉴죠. 그럼 어떻게 없앨 것인가?

우선, 스킨메모장에 있는 메뉴에서

“편집-찾기”를 선택하시면

이게 뜨고요 검색창에서

“worldtour”를 입력하고 찾으면

어디에 “worldtour”와 관련한 내용들이 있는지 찾을 수가 있어요. 그럼 이제 “찾기” 창은 닫고 지역로그와 관련한 내용이 어디서 어디까지인지를 확인해야 하는데요, 현재 루인이 예로 들고 있는 스킨을 제작하신 분께선 한 줄에 메뉴와 관련한 내용을 다 입력하셔서 캡쳐는 힘들고요;;; 다른 곳에 복사해서 캡쳐하면

이 내용들이 지역로그 혹은 “worldtour”를 구성하고 있는 내용들이예요.
그냥보면 구분이 잘 안 되지만, 잘 보면 각각 메뉴 이름을 중심으로 반복되는 내용들이 있어요. 이 스킨의 경우 “:” 이 표시가 각 메뉴들을 구분하는 방법이고요. 왜냐면 실제 스킨에서 “:” 표시를 통해 메뉴를 구분하고 있거든요. 이젠 이 부분을 과감하게 지워볼까요? 그리고 변경한 내용을 저장한 후, 폴더에 있는 skin.html을 더블클릭.

이렇게해서 지역로그 혹은 “worldtour”가 없어졌어요. 우헤헤._M#]

03. 메뉴 수정하기-메뉴이름 바꾸기 및 기능 바꾸기
지금 예를 들고 있는 스킨은 메뉴의 이름이 모두 영어로 이루어져 있는데요, 때론 한글로, 혹은 메뉴 이름 자체를 바꾸고 싶을 때도 있잖아요.

[#M_ 읽기.. | 접기.. |
한 예로 “Tag”를 태그로 바꿔 볼게요.

태그 역시 앞서 설명한 방식으로 찾으면 이렇게 나오는데요, 고치는 방법은 간단해요. … 라고 적고 확인하니.. 흑, 이 스킨의 경우, 한글로 적으면 글씨가 깨지네요. 이유를 알 수 없어 잠깐 다른 스킨을 예로 들면, (예로 들 스킨은 이것)
현재 상태는

이렇고요, 여기서 “PROFILE”을 한글로 바꿀 게요. 스킨메모장을 열어서 “PROFILE”로 찾으면 가장 먼저 나오는 것이

세 번째 줄을 보면 “PROFILE”이 나오죠? 여기서 모든 걸 다 바꾸는 건 아니고,

음영으로 표시한 부분을 한글로 “프로필”로 바꾸고 저장하면

이렇게 바뀌죠. html을 작성할 때, 겉으로 드러나는 글자와 사라지는 글자가 있는데 꺽은 괄호(<>) 안에 있는 경우엔 안 보이게 나타나고요, 꺽은 괄호 바깥(> <)에 있으면 나타나는 글자이고, 이 글자를 수정하면 원하는 식으로 쓸 수 있다고, 루인은 이해하고 있어요. 정확하지 않으면 또 어떤가요? 수정하고 사용하는데 불편하지만 않으면 그만이죠. 케케케.
그럼, 다시 원래 스킨으로 돌아와서, 이젠, 변태고냥 J의 나비날기에서 처럼

기능을 바꿀 수도 있어요. 루인은 “About”의 기능이 필요 없어서 [Run To 루인]으로 올 수 있게 만들었는데요, 우선 이것과 관련한 부분에서

바꾸기 위해선, 밑줄로 표시한 두 부분을 바꿔야 해요. “Ruin”으로 바꾸고 [Run To 루인]으로 연결하고 싶다면, 우선 뒷부분의 “About”은 “Ruin”으로 바꾸면 되는 일이지만, 이것으로 끝이 아니죠. 앞부분에 밑줄 친 ” a href=”notice/” ” 이 부분이 “About”을 클릭했을 때, 연결할 주소를 나타내거든요. 그러니 이 주소를 바꿔주면 되요. a href=””는 따음표(“”) 속에 있는 구절을 실행시켜 주는 명령어기 때문에 그대로 두고요, (설마 이것도 모르랴? 가 아니라 이것 마저도 몰라서 헤맨 루인을 이 글의 유일한 독자로 상정하고 쓰는 글이니랍니다.. 크흑) 이 안의 주소를 “https://www.runtoruin.com”으로 바꾸고

저장한 후, 확인하면

이렇게 바뀌어 있고, “Ruin”을 클릭하면 [Run To 루인]으로 와요. 🙂
_M#]

04. 그림/이미지 바꾸기
종종 스킨 자체는 예쁜데 기본적으로 들어가 있는 이미지가 별로라서 바꾸고 싶을 때가 있죠.

[#M_ 계속 읽기.. | 접기.. |
스킨파일을 받아서 내용을 확인하면 “images”라는 폴더가 있고 그 폴더를 열면

이렇게 나오죠. 지금 예로 들고 있는 스킨에서 가장 두드러지게 사용하고 있는 이미지는 “flower”라는 파일명의

이것 하나인데요, 루인이 경우 이 이미지가 싫은 건 아니지만 이미지가 있는 것 자체를 별로 안 좋아하기에 없애기로 했어요. 그렇다고 “images”폴더에 있는 “flower”파일을 무작정 없애 버리면 엑스박스가 뜨죠. 소스엔 이 파일이 존재한다고 지정되어 있는데, 이 파일을 찾을 수가 없어서 생긴 문제.

우선 skin메모장에서 이 이미지와 관련한 부분을 찾으면(찾기를 통해 flower로 검색하면 바로 나와요.)

이렇게 나와요. 이미지의 경로를 지정한 것이죠. 두 가지 방법이 있어요. 우선 꺽은 괄호를 포함해서 꺽은 괄호에 있는 img src=”./images/flower.gif”란 부분을 모두 없애는 것. 그렇게 하고 저장하면

이렇게 나와요. 하지만 이럴 경우 블로그 제목이 지나치게 위쪽에 위치해서 안 예뻐요. 그럼 제목과 메뉴의 위치를 조정하면 되지만, 이런 건 루인도 할 줄 모르고-_-;; 이왕이면 그림파일을 바꾸는 것으로 같이 조정해요. 현재 변태고냥 J씨의 블로그는 포토샵으로 이미지를 만들어서(!) 기존의 것을 대체한 경우예요. 다만 만들었다는 이미지가 아무 것도 없는 흰색의 이미지일 뿐이죠. 하지만 지금은 좀더 분명하게 보여주기 위해 아무 이미지나 사용할게요. 바꾸는 방법은 간단해요. 우선 images폴더에 원하는 이미지 파일을 적당한 사이즈로 조절해서 저장하고나서

음영으로 표시한 부분을 원하는 파일의 이름으로 바꿔주면 되요. 이때 파일은 gif 파일만 되는 것 같아요. 그림파일로 많이 사용하는 jpeg나 jpg파일로 설정하면, 엑스박스가 뜨네요. (현재 원하는 파일이 jpeg나 jpg 뿐이라면, 포토샵을 통해 “다른 이름으로 저장하기”에서 파일명을 gif로 해서 저장하면 되는 건 아시죠? ^^) 이유는 루인도 몰라요. 케케케. 아무튼

이렇게 바꿔서 저장하고 확인하면

이렇게 바뀌지요. 경우에 따라선 이미지의 사이즈를 같이 조절해야 할 때도 있어요. 지금 [Run To 루인]의 메뉴가 그런 경우에요. 우선 스킨의 소스를 보면

이렇게 나와 있고요 필요한 부분만 캡쳐하면

이렇게 너비와 높이를 요구하고 있죠. 이럴 경우엔 이미지파일의 너비와 높이에 맞게 이 부분들도 바꿔야 해요. 그렇지 않으면 안 예쁘게 나오죠. 흐흐.
_M#]