본문
티스토리 블로그는 스킨위자드라는 기능을 제공합니다. 기본제공 스킨은 물론이고 인터넷에서 구할 수 있는 커스텀 스킨들도 스킨 위자드를 이용하면 비교적 간편하게 수정할 수 있지요.
허나 스킨위자드에서 할 수 있는 편집은 대단히 제한되어 있습니다. 크게 세 가지 정도죠.
◇ 배경 이미지 설정
- 기본제공 이미지를 이용할 수도 있고, 원하는 이미지를 업로드해서 쓸 수도 있습니다.
◇ 타이틀 이미지 설정
- 배경 이미지와 마찬가지로, 기본제공 이미지를 쓸 수도 있고 원하는 이미지를 업로드해서 쓸 수도 있습니다.
◇ 글영역 너비 조정
- 글영역이란 사이드바를 제외한 포스트가 표시되는 부분을 말합니다. 스킨위자드에서 수정한 넓이는 자동으로 스킨의 HTML파일 및 css파일에 반영되어 필요한 부분을 자동으로 변경시킵니다.
여기서 가장 유용한 듯 보이면서 실은 가장 쓸모없는 부분이 '타이틀 이미지' 부분입니다. 왜냐하면 스킨위자드에서 바꿔주는 타이틀 이미지라는 건, 해당 창에서 보여주는 뉘앙스와 달리 사실은 '배경'일 뿐이거든요. 이미지를 그 자리에 올려주는 게 아니라 상단부의 배경(벽지)로 쓰는 겁니다. 이런 벽지는 오브젝트로 인식시킬 수도 없고 링크를 걸 수도 없습니다.
스킨위자드의 타이틀 변경 화면
그래서야 간판의 역할을 할 수가 없습니다. 웹사이트 상단에 간판(타이틀 문구 혹은 이미지)를 달아두는 건 디자인적인 의미도 있지만, 언제 어디서든 웹사이트의 첫화면으로 돌아가게 하는 비상구로서의 UI라는 의미도 있거든요. 유년기부터 모바일 디바이스를 쥐고 자라는 신세대들의 감각은 또 어찌 변할지 모르겠으나, 아직 어지간한 사이트에서는 어김없이 지켜지고 있는 법칙이지요.
1. 타이틀 이미지를 만든다
- 이 부분은 각자의 취향과 미감에 맞게, 가지고 있는 프로그램을 적절하게 활용해서 만드시면 됩니다.
- 타이틀 이미지는 여백이나 투명 등의 문제로 인해 수정을 거듭하는 경우가 많습니다. 가능하면 손실없는 방식의 포맷으로 사본을 저장해둡시다. jpg로 저장했다가 다시 불러와서 수정하고 하다보면 이미지의 품질이 떨어질 수 있습니다. png로 저장하기를 권합니다.
- 여담이지만, JPEG(jpg)의 시대는 갔습니다. 화질을 포기해서라도 저용량을 구현해야 하는 예외적인 경우가 아니라면 항상 png을 쓰는 편이 좋다고 봅니다. png은 알파채널(투명)을 지원하며, 비손실 압축포맷이고, 대부분의 웹브라우저에서 지원하고 있습니다. 참고로 png는 '핑'이라고 읽는 것이 표준입니다만, 사실 그런 종류의 표준이 잘 지켜지는 일은 못 본 거 같군요.
2. 만든 이미지를 블로그에 업로드한다
- 이미지는 '블로그 관리' - '꾸미기' - 'HTML/CSS 편집' 페이지에서 '파일 업로드' 탭에서 '추가' 버튼을 눌러 업로드하면 됩니다. 1
- 파일목록에서 업로드한 이미지를 선택하면 '미리보기'에 해당 이미지가 표시됩니다. 이를 우클릭해서 해당 이미지의 주소(url)을 확인할 수 있는 창으로 들어갑니다. 이때 웹브라우저 종류에 따라 메뉴가 다르게 나옵니다. MS Internet Explorer 11의 경우 '속성'으로 들어가야 하고, Firefox 계열에서는 '이미지 정보 보기'로 들어가야 합니다.
- 표시된 해당 이미지의 주소(url)를 복사해둡니다. 확장자까지만 확보하면 됩니다. 아래 예시에서라면 http에서부터 logo12.png까지를 복사하면 되겠지요.
(위는 Waterfox 38 버전의 '이미지 정보 보기' 창입니다.)
3. 스킨의 HTML을 수정한다
- 상단에서 'HTML/CSS' 탭으로 들어갑니다.
- skin.html에서 타이틀 부분을 찾아야 합니다. 이 부분은 스킨마다 다르게 되어 있어서 조금 찾기 어려울 수도 있기에. 아래에 몇 가지 스킨을 예시로 들겠습니다. 보통 body가 시작되는 부분 근처에 있습니다.
사례1) 최상단 부근에 위치하고 있습니다.
<body>가 시작되고 곧 등장했습니다.
사례2) 스크롤을 조금 내려야 보입니다.
이쪽도 <body>가 시작되고 몇 줄 후에 타이틀이 나왔습니다.
사례3)
- 위 세 사례에서 보았듯, 많은 스킨에서 타이틀은 2이라는 형태로 작성되어 있습니다. 이 부분이 수정대상입니다. (가끔 타이틀이 없는 스킨도 있는데, 이 경우에는 직접 위치를 잡아서 넣어야 하기 때문에 난이도가 올라갑니다. 다른 스킨을 고르시길 권합니다.)
- 수정방법은 다음과 같습니다.
1) 여기는 Aqune 정보사무소을 지우고 그 자리에 이미지를 삽입합니다.
2) 이미지를 삽입하는 html 코드는 <img src="주소">입니다. 이 '주소' 부분에 앞서 확보한 타이틀 이미지의 주소를 넣으면 됩니다. 큰따옴표를 여닫는 것을 잊지 마시길.
수정예.
'티스토리 관련 팁' 카테고리의 다른 글
초대장 없이 티스토리 가입하고 블로그 만드는 방법 (0) | 2015.06.12 |
---|