안녕하세요, 까만거북이입니다.
우선 이 글은 제 개인 블로그인 '까만거북이의 생각과 경험 기록장'의 스킨을 교체하면서 수정한 기록을 남기기 위해 작성한 글입니다.
더불어 티스토리를 사용하시는 다른 블로거분들께도 스킨을 수정하고 도움이 되기를 바라는 마음에 정성을 들여 글을 작성해봅니다.
(본론)
티스토리 기본 스킨, 'Photo Essay'
포토에세이는 티스토리에서 얼마 전(2012년 1월 26일)에 오픈한 스킨입니다.
티스토리에서 알려드립니다 (1월) 새로운 스킨 1종 오픈
http://notice.tistory.com/1994
아래는 설명 페이지에 있는 설명을 긁어온 것입니다.
웹표준을 준수한 XHTML 기반의 Tistory 기본 스킨입니다. 시맨틱한 웹을 유지하기 위해 디자인 부분을 style.css 파일에 독립시켜 적용하였으며 자유롭게 디자인을 수정하실 수 있습니다. 블로그 이미지 사이즈 180px, 컨텐츠의 가로 사이즈 500px에 최적화되어 있습니다.웹표준을 준수하였기 때문에 '인터넷 익스플로러', '크롬', '파이어폭스' 등 대부분의 웹브라우져에서 정상적으로 출력됩니다.
시맨틱한 웹이라는 것은 디자인에 일관성을 주기 위해 CSS 파일에 스타일대로 디자인을 구성했다는 이야기이고, 덕분에 HTML과 CSS를 알고 있다면, 디자인 편집에 많은 효과를 줄 수 있습니다.
블로그 이미지는 오른쪽 사이드바에서 블로그 설명 부분에 붙이는 이미지를 의미하고, 가로 사이트 180픽셀에 맞게 만들어졌다는 설명입니다.
콘텐츠란 본문 내용을 의미하고, 역시 500픽셀에 맞춰져 있으므로 이미지를 같이 올린다면, 리사이즈를 생각해봐야 합니다.
스킨위자드는 티스토리 블로그에서 블로그 디자인을 보다 쉽게 편집할 수 있도록 하는 기능인데, 아쉽게도 이 기능이 스킨에 따라 완벽하지는 않습니다.
스킨 적용 후, 스킨위자드를 들어가는 방법은 블로그 관리자 메뉴에서 [스킨] 페이지에 들어가서 [스킨위자드]를 클릭하면 됩니다.
아래 이미지를 참고하세요.
먼저, [배경]에서 [이미지 사용] 체크 해제 후, 배경 색상을 제가 가장 좋아하고, 안정적이라고 생각하는 색인 검은색으로 교체하였습니다.
아쉽게도 이 스킨에서 [타이틀] 부분은 스킨 위자드에서 적용이 되지 않습니다.
기존에 초록색으로 'PHOTO ESSAY'라고 쓰여 있는 부분인데, 아래에서 이 부분을 바꾸는 방법에 대해 다시 다뤄보겠습니다.
다음 [게시글] 부분에서 [제목 글자색]과 [게시글 글자색]을 역시 검은색으로 교체합니다.
기존의 색상의 RGB 코드는 각각 #538B98, #898989 입니다.
HTML/CSS 분석으로 타이틀 바꾸기
블로그 관리자 페이지에서 [HTML/CSS 편집]으로 들어갑니다.
그러면, 창이 두개 나타나는데, 위의 것이 HTML 편집, 아래 것이 CSS 편집입니다.
'skin.html' 파일의 body 부분을 참고하면, 블로그 타이틀 부분이 div id로 "container", "header"으로 구성되어 있고, 'h1'으로 스타일이 묶여 있는 것을 확인할 수 있습니다.
<body>
<s_t3>
<div id="container">
<div id="header">
<h1><a href="https://blackturtle2.net/">까만거북이의 디지털 샌드박스</a></h1>
<strong class="screen_out">블로그 메뉴</strong>
<div class="list_blogmenu">
</div>
</div>
<!-- header close -->
그러면 각 div id와 h1이 CSS에서 어떻게 정의되었는지 확인합니다.
'style.css'에서 '#header' 부분을 찾아보면, 아래와 같이 정의되어 있습니다.
블라블라 쓰여 있는데, 결정적으로 가로 408픽셀, 세로 45픽셀로 배경 이미지의 url이 title.png 파일로 지정되어 있는 것을 알 수 있습니다.
/* ***** Header ***** */
/* title */
#header h1 {}
#header h1 a {display:block;width:408px;height:45px;margin:0 auto;font:0/0 arial;background:url(images/title.png) left top no-repeat;text-indent:-9999em;}
* html #header h1 a {background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i1.daumcdn.net/cfs.tistory/blog/skin/tis_photoEssay/images/title.png', sizingMethod='crop');}
#header h1 a:hover {text-decoration:none;}
그러면 블로그 관리자에서 [HTML/CSS] - [파일업로드] 페이지로 가서 'title.png'를 찾아보면, 타이틀 이미지를 확인할 수 있습니다.
이 이미지만 자신의 블로그에 걸맞게 바꾸어주면 되겠네요.
새로운 title.png 파일로 이미지 대치.
새로운 title.png 이미지를 만들어 보도록 합니다.
저의 경우, 맥북 에어에서 '스키치(skitch)'를 이용해서 간단한 이미지를 만들어보았습니다.
이렇게 이미지를 새로 만들었으면, 다시 [파일업로드] 페이지에서 기존의 title.png 파일을 아래 [삭제] 버튼으로 삭제합니다.
그 후에 [+추가] 버튼으로 새로운 이미지를 업로드합니다.
삭제하지 않고, 업로드하게 되면, 티스토리에서는 파일을 대체하지 않고, 기존의 파일을 유지하겠금 시스템이 구성되어 있는 것 같습니다.
따라서 기존의 파일을 삭제하고, 다시 업로드하는 과정을 거치도록 하세요.
(마무리)
오늘은 이 쯤에서 마무리하도록 하겠습니다.
코드를 조금 수정하면, 스킨위자드에서 작동되면서 이미지가 아닌 텍스트로 타이틀을 수정할 수 있을 것 같은데, 지금은 이 정도만 해도 만족스러워서 다음으로 미뤄보도록 하겠습니다.
때가 되면, 다시 만져보고, 또 포스팅하도록 하겠습니다.
더불어 저는 html과 css를 조금 알고 이렇게라도 수정하고 있는데, 티스토리 쪽에서 기본 스킨을 이런 방식으로 만드는 것은 정말 이해되지 않습니다.
스킨위자드라는 기능도 네이버 블로그에 비하면, 디자인 수정이라는 부분에서 한참이나 뒤떨어져 있습니다.
그런데 내놓은 '기본 스킨'이라는 스킨들이 하나 같이 스킨위자드가 정상적으로 작동되지 않는다는 것은 웹에 대한 이해가 부족한 블로거분들에게는 그저 '주는 스킨이나 넙죽넙죽 받아 먹는' 정도의 방법 외에는 방법이 없습니다.
뿐만 아니라 티스토리의 강점은 자유로운 블로그 디자인 수정인데, 몇 픽셀에 최적화되어 있다라는 제한 역시 이해되지 않는 부분입니다.
그렇게 되면, '화면 설정' 탭에서 블로거가 자유롭게 건드릴 수 있는 부분이 몇이나 있을까요.
결국 이렇게 되면, 궁극적으로 많은 티스토리 블로그가 기본 스킨 때문에 개성을 잃게 됩니다.
그리고 사용자들은 점점 티스토리를 어려워하게 됩니다.
티스토리는 이런 부분에 주목하고 있는 것인지 의문이네요.
엄밀히 말해서 티스토리에 집중하고 있지 않은 다음에게 쓴소리를 하고 싶지만, 그건 나중으로 미루고, 티스토리에게 쓴소리를 하고 싶네요.
갖고 있는 장점을 살리되, 사용자들로 하여금 그 장점에 더 다가설 수 있게 만들자.
여러모로 아쉬운 티스토리입니다.
고맙습니다. 좋은 하루 되세요.
포스팅 끝.
2012년 1월 30일 월요일.
- Design Sphere - 윈도우 비스타 XP용 티스토리 아이콘 (Tistory icon for Windows Vista XP) http://design.funny4u.com/4 [본문으로]
'웹 이야기' 카테고리의 다른 글
| [유용한 사이트] 간단히 타이머를 맞추자. - 에그타이머(E.gg Timer) (2) | 2012.02.24 |
|---|---|
| [WebGame] HaxBall (핵스볼) : 매우 간단하지만, 중독성 있는 축구 게임 (2) | 2012.02.12 |
| [Web] PC에서 스마트폰 뱅킹처럼 인터넷 뱅킹 서비스를 사용하자. - KB국민은행 미니뱅킹 소개. (1) | 2012.01.18 |
| [Tistory] 블로그에 쓴 영화 후기를 다음 영화 리뷰에 등록하는 방법 소개. (1) | 2012.01.18 |
| [Tistory] 티스토리 블로그의 이미지 박스 없애기. (1) | 2012.01.18 |
