본문 바로가기

Works/Tistory Skin

Meltdown - 반응형 이글루스 스킨


Meltdown 반응형 이글루스 스킨


이글루스에는 스킨 깎는 장인분들이 안 계시기 때문에 제가 만든 스킨이 유일한 반응형 스킨입니다. -ㅅ- ㅋㅋ 남들이 안 가는 길을 가보니 왠지 신대륙 개척한 기분이네요 ㅋㅋ 그렇지만 티스토리보다 난이도가 허접해서 뭔가 대단한걸 이룬듯한 기분은 전혀 들지 않습니다. -_-;


Pure 프레임 웍


스킨의 기본적인 소개를 하자면, YUI에서 제작한 Pure 프레임웍을 적용하였으며, 매우 가볍고 빠른 스킨입니다. 오른쪽 사이드바는 높이는 100%로 항상 고정되어 있으며, 가로폭 786px의 브레이크 포인트에서 모바일/테블릿형 레이아웃으로 전환 하게 됩니다.


Meltdown 반응형 이글루스 스킨


사진에서 보시듯이 모바일 뷰에서는 상단 메뉴가 별도로 뜨게 됩니다. 상단메뉴는 굳이 수정할필요 없이 이글루스에서 기본 제공하는 메뉴릿으로 메뉴 추가가 가능합니다. (배포용 스킨에는 Tistory버튼이 없습니다.) 게시글 창에서 새 메뉴릿을 만드세요.


이글루스 메뉴릿


본문 내용은 양쪽에 여백을 두고 있으며, 사진은 본문 영역에 꽉 차게끔 설정이 되어있습니다. 다만 사진 크기가 어떻든 간에 상관 안하고 무조건 꽉채우게 되어 있습니다. 이게 스크립트가 사용이 되면 어느 사이즈 이상만 꽉 채우게 하면 되는데 스크립트를 못 쓰니 포기 입니다. 되도록이면 사진 업로드 용으로만 사용하시기 바랍니다. 작은 이미지를 올리게 되면 강제로 크기를 키우기 때문에 처참한 일이 발생할수도 있습니다. (if width < 500 스크립트 쓰고 싶다 쓰고 싶다 쓰고 싶다 )

오른쪽 상단의 로고는 직접 변경이 가능하도록 PSD파일을 첨부해놓았습니다. 그리고 로고를 만들때 사용된 Osrich Sans 폰트는 이곳에서 다운 받을 수 있습니다.


logo only.psd.zip



Meltdown 반응형 이글루스 스킨


위젯은 사이드바 뿐만 아니라 본문 영역의 상단, 하단 까지도 지원합니다. 이는 와이드 위젯을 상단이나 하단 둘중에 하나만 사용가능한 이글루스의 이상한 방식 때문에 이런 조치를 취했습니다. 이렇게 설정을 하면 광고를 아래위로 다 달수 있습니다. 솔직히 와이드 위젯이란 기능은 하등 쓸모없는 기능인것 같습니다. 도대체 뭐하러 넣어놓은건지. -_-


파이어폭스


폰트는 사파리,크롬,오페라에서는 Ostrich Sans가 뜨며, woff문제 때문에 파이어폭스와 IE에서는 Wire One폰트로 대체되어 뜹니다. 한글폰트는 브라우저에 관계 없이 나눔고딕 폰트가 뜹니다. 나눔 고딕 폰트는 본문 뿐만 아니라 이글루스 툴바 까지도 강제 침범을해서 적용됩니다.

글 위쪽 부분에는 약간 공간이 많은데 이는 위젯을 넣을때 보기 좋게 하기 위해서 공간을 넓게 띄웠습니다. 새로 위젯을 로드하면 본문 맨 위쪽 부터 적용이 됩니다. 이글루스의 기본 제공위젯은 모두 사이드바에서만 사용하도록 설정되어 있기 때문에 본문영역에서 사용하지 않는 것을 권장합니다.

템플릿이란것을 제공하는 이글루스 만의 해괴 망측한 기능 덕분에 기본 제공 템플릿 몇개중 하나를 골라 스킨을 지정했습니다. 능력한계상 모든 템플릿에 스킨이 지정되는 것은 아니므로 무엇 무엇을 선택해야 하는지 살펴보겠습니다.

포스트 본문 템플릿의 경우 가장 첫번쨰 템플릿입니다. 나머지 템플릿은 어떻게 되는지 테스트도 안 해봤습니다.


Meltdown 반응형 이글루스 스킨


포스트 덧글은 2번째 템플릿을 적용해야 댓글과 대댓글의 프로필 사진크기가 동일 하게 나옵니다.

와이드 위젯은 상단과 하단에 모두 준비되어 있으나 굳이 사용하실 이유는 없을겁니다.

blockquote, ul은 아무거나 쓰세요. 안 말립니다.

그 다음은 사이드바 영역 템플릿 입니다.

사이드바는 전부다 첫번째인데 몇 가지 주의 사항이 있습니다.

라이프로그는 테스트를 안해봤습니다. 아마 작동시 개판으로 뜰 확률이 농후합니다. (아니면 아예 안뜨거나...) 포토로그 역시 마찬가지 입니다. 테스트 안 해봤습니다.


Meltdown 반응형 이글루스 스킨


이벤트 위젯 중에서 카운터는 첫번째만 스킨이 적용됩니다. 나머지는 모릅니다.

메인화면 뿐만아니라 태그 클라우드, 아카이브, 검색 결과도 모두 다 스타일이 새로 지정되었습니다.

유저 커스텀기능을 아주 많이는 아니지만 쬐끔 지원합니다. 위젯을 달수 있는 영역은 본문 상단과 하단, 그리고 사이드바 입니다.


코드뷰


html에서는 로고와 로고 밑의 히든 문구를 수정할수 있습니다. 아래쪽의 저작권관련 문구가 있지만 만든 사람 성의를 생각해서 그냥 내버려두시면 감사하겠습니다.


설치법.

일단 스킨을 다운 받습니다.


Meltdown.zip


템플릿을 설정합니다.


Meltdown 반응형 이글루스 스킨


스킨 설정에서 포스트 덧글은 2번째 템플릿, 나머지 항목은 전부 1번째 템플릿을 적용해주세요.

사이드바는 전부다 첫번째 템플릿 입니다.


Meltdown 반응형 이글루스 스킨


카운터 위젯은 맨 첫번째만 스킨이 적용됩니다.


Meltdown 반응형 이글루스 스킨


skin.html을 메모장으로 열어서 내용물을 전부 복사하여 전문가 용 편집 > html에 붙여 넣습니다.


Meltdown 반응형 이글루스 스킨


skin.css를 메모장으로 열어서 내용물을 전부 복사하여 전문가용 편집 > css에 붙여 넣습니다.

끝입니다.


세부설정


로고는 제공된 psd파일 수정후 자신의 블로그에 업로드 해서 이미지 파일 주소만 바꾸면 됩니다.


히든 문구는 메모장으로 바로 수정하면 됩니다.


FAQ


Q. 이글루스에 스킨&위젯란에 공개로 올려주시면 안되나요?

A. 스킨곳곳에 워낙 바람직하지 못한 방법을 많이 쓴데다가, 왠지 zum좋은일 시켜주기 싫어서 그냥 제 블로그에다가 올립니다.

Q. 수정해도 되나요?

A. 됩니다. 하지만 수정후 재 배포는 하지 마세요.


에필로그.


이글루스 스킨편집 도움말에 보면 이글루스용 스킨은 무조건 공개용 CC라이센스가 적용된다고 명시가 되어있습니다. 한마디 해주고 싶네요. "奀刀卜" 자기가 만든 스킨을 팔아먹건 지지고볶건 그건 자유죠. 왜 지들이 이래라 저래라인지. 저 같은 경우는 워낙 퀄이 조잡해서 그냥 무료로 뿌리는 것이지만 티스토리 같은데 보면 정말 돈이 안 아까운 유료 스킨들 많습니다. 이런분들은 노력의 대가를 충분히 받아야죠. 무슨 자선 사업가 입니까. 자기 노동을 공짜로 나눠주게. 저도 3일동안 개고생해서 이 스킨 만든건데, 제작자 블로그 방문조차 하지 않고 남이 덜렁 가져다 쓴다면 기분 무지 나쁠겁니다. 그래서 이러저러한 이유로 제 블로그에 링크로만 공개하는겁니다.

개구리긴 해도 나름 고생해서 만든 스킨이고요 덕분에 감기도 잔뜩걸렸습니다. 잘 사용하시길 바래요.

스킨 개인별 커스텀 화 요청같은 경우에는 대부분은 받지 않지만 제 블로그 자주 오셔서 친분이 있거나 아니면 합당한 이유가 있을시에는 제가 판단 후에 해드립니다.

햇갈리는 분이 계실까봐 다시한번 말씀드리는데 본 스킨은 티스토리 용이 아니라 이글루스 용입니다.


스킨 미리보기 페이지: http://est0que.egloos.com/

스킨에 관한 질문은 해당 댓글 란에 적어주세요. 방명록이나 메일로 질문할시에는 답변하지 않고 가차 없이 삭제합니다.


16.9.11 - 이글루스 스킨 벨리에 업로드


기부 감사합니다.