본 스킨은 동명의 티스토리 스킨인 Hare for Tistory를 컨버전 하여 이글루스 용으로 변경해 놓은 것 입니다. 티스토리 용은 HTML5와 CSS3 기반으로 되어있으나 이글루스용 스킨은 이글루스의 저질스런 구조에 맞추어 XHTML Transitional 기반으로 변경되었으며, 시멘틱 구조를 지원하지 않기 때문에 SEO 따위는 꿈도 꾸지 않는게 좋습니다.
제 이글루스 블로그에 적용되어 있는 스킨이 바로 이 스킨이며 아주 미려한 디자인과 색상 배치가 적용되어 있습니다. 스킨의 주요 특징으로는 레스터 이미지가 일체 사용되지 않았으며 각종 아이콘은 SVG로 스타일시트를 통해 injection되게 해놓았습니다. 그래서 따로 번거롭게 이미지 파일을 넣는다던가 하는 삽질을 할 필요 없이 원터치로 인스톨이 가능합니다. 특히나 이글루스는 구조 상 외부 파일 업로드가 전혀 불가능하기 때문에 어쩌면 당연한 조치입니다.
원본 베이스인 Hare for Tistory가 반응형 스킨입니다. 그러므로 이글루스 컨버전도 당연히 반응형 일거라고 생각하시면 경기도 오산입니다. 이글루스는 헤더부분을 수정 못하는 아주 지랄 같은 정책을 가지고 있기 때문에 viewport 설정이 안 되어서 모바일 브라우저가 이 스킨이 똥인지 된장인지 구분을 못해서 걍 PC뷰로 뜹니다. 그래서 스팩상은 반응형을 지원하지만, 엄연히 말해서 이글루스에서는 안됩니다.
그러나 IE11이나 오페라 최신버전에서만 작동되는 W3C권고사항인 @viewport 속성을 지원 하므로 해당 모바일 브라우저나 특정 브라우저의 나이틀리 버전(ex. 크롬 까나리 액젓)을 사용하시는 분들은 어쩌면 반응형 사용이 가능할 겁니다. (그러면 뭐해 이글루스는 모바일로 접속시 자체 모바일 페이지로 강제 접속 되는걸)
걍 창크기 줄이면 element가 알아서 줄어드는 것을 보면서 ‘아 요즘 브라우저는 이딴 것도 되는구나’ 라고 신기술에 감탄 한번 하시고 마시면 됩니다. (구글 애드센스 스코어 카드의 최적화 점수도 반응형 스킨 적용시 폭풍 상승하지만 모바일에는 전혀 애드센스 노출이 안되는 노답 이글루스는 그저 울지요)
티스토리 버전과 완전 동일 스펙이기 때문에 웹 폰트도 완전 동일하게 적용됩니다. 와이드 위젯과 사이드바 위젯을 모두 적용합니다.
최신 웹기술의 집약체 이므로 IE9 이하의 구형 브라우저에서는 구동을 전혀 고려하지 않고 만들었으니 유의하시기 바랍니다.
특이사항
- 구성파일이 딸랑 두개 밖에 없어서 설치가 초 간편 합니다.
- 이쁜 웹 폰트가 들어가서 시신경이 썩는 굴림체를 더 이상 안 봐도 됩니다. (건강을 위해서 스킨을 바꾸세요)
- 기본 메뉴 릿을 지원합니다.
- 이글루스 기본 요소가 하나도 빠짐없이 스타일링 되어있습니다.
- 검색 페이지/ 태그 전체 보기/ 메뉴릿/ 아카이브 등 일단 CSS로 접근이 가능한 부분은 모두다 스타일링 되어있습니다.
- SVG 적용으로 초 고해상도 액정(300ppi이상)에서도 아이콘이 깔끔하게 보입니다.
스킨 미리보기
모바일 뷰
PC 뷰
설치방법
Hare for Egloos.zip스킨을 다운로드 받습니다.
우선 새 스킨 만들기에서 두번째 2단 오른쪽 사이드 바를 선택한 뒤에 원하는데로 위젯 배치를 해둡니다. 이렇게 하는 이유는 위에서 설명드렸듯이 스킨에디터가 스킨을 적용한 후에는 제대로 작동하지 않습니다.
그 다음 템플릿 변경에 가서 포스트 본문은 두번째
포스트 덧글 두번째를 선택하면 됩니다. 나머지는 개인 자유입니다.
통계 위젯은 첫번째 위젯만 스킨에서 지원합니다.
이제 다운로드 받은 html 파일과 css 파일을 복사해서 전문가 용 편집 > html/css 편집에 붙여 넣습니다.
-끗-
참쉽죠?
주의사항
구 버전 IE는 지원하지 않으며, 구 버전 지원 요청도 받지 않습니다.
개인 별 스킨 커스텀 수정 요청도 받지 않습니다.
하단부 저작권 표시 지우지 마세요 (*특히나 이글루스 용 스킨은 이거 지우면 레이아웃 틀어집니다.)
예상 FAQ
Q.스킨 에디터에서 위젯 옮기기가 잘 안됩니다.
A.사실 완전 안 되는건 아니고 어느 정도 되긴 하지만 이놈의 CSS3 Transition이 스킨 에디터랑 충돌을 하는지 좀 처럼 옮기기가 쉽지 않습니다. 뼈대로 사용한 것은 기본 2단 이글루스 스킨 이므로 거기서 위젯 위치 조정하시고 이 스킨 다시 적용하시면 원활하게 적용 됩니다.
Q.네비바가 깨져요
A. 본 스킨은 rem 사이즈 폰트 사용으로 컨테이너 크기에 맞춰 폰트 사이즈도 유동적이게 움직입니다만… 이상하게도 툴바가 깨지는건 저도 이유를 잘 모르겠습니다. -ㅅ-
Q.스킨을 적용하고나서 스킨 에디터에 들어갔다 나오니 스타일 적용이 풀려버립니다.
A.저도 이거 해결해보려고 별의 별짓을 다했으나 포기했습니다. 제가 보기에는 SVG를 CSS에 넣는 방식 때문에 오류를 일으키는 것 같다는 생각이 듭니다. 스킨 에디터를 쓸 때마다 CSS 파일 내용을 복사해서 다시 붙여 넣어주면 됩니다. (웹 표준도 무시하는 노답 이글루스 ^오^ 솔직히 스킨 에디터 예시 페이지에 웹표준 관련 이야기 보면 손발 오그라드니까 좀 지우세요)
+3월 5일 추가 내용
이글루스 이 미친새끼들이 CSS를 재수정시 2070줄까지만 제한을 하네요 ㅋㅋㅋㅋㅋㅋㅋ 아오 ㅅ발 이게 뭐얔ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
CSS가 5309줄이라서 스킨 수정시 오류 납니다. ^오^
아오 진짜 시스템 거지발싸개 같이 만들어 놓았네
+3월 6일 추가 내용
CSS를 압축해서 1줄로 표시하게 해보았으나 여전히 글자 갯수로 인식하는지 뭔지는 몰라도 뒷부분 잘라먹는 병크 터지는 이글루스 스킨 에디터 덕분에 전 두손 두발 다들었습니다. 이번 스킨은 이글루스 홈페이지에도 올리려 했으나 시스템이 엿 같아서 포기 입니다.
스킨을 저장해놓았다가 다시 적용해도 깨지는 것은 마찬가지 이니 체념하고 그냥 파일을 새로 덮어 씌우는게 더 빠릅니다.
Q. 스킨 뜯어봐도(수정해도) 되나요?
A. 상관은 없습니다만 이글루스 스킨은 워낙 별게 없어서 뜯고 자시고 할 것도 없을 것 같습니다. 무단 수정해서 ‘이거 내가 만든거임 ㅋ’ 해서 다른데 올리지만 않으면 상관 없습니다.
Q.이글루스 스킨&위젯에 올려주세요!
A.싫어요 ㅗ ...가 아니라 하고 싶어도 못 합니다. -_- (3번째 질문 참고)
마지막으로 심심해서 티스토리랑 1:1 비교 (98.5% 같군요)
티스토리
