포스트잇 스킨

현재 적용 중인 스킨입니다.
너무 개인 취향에 맞춰 만든 터라 이런 범용성 떨어지는 매니악한 놈을 공개해도 되나 싶었지만, 찾는 분이 계셔서 공개하기로 했습니다. 설명이 좀 많지만 끝까지 읽고 적용해주시면 감사하겠습니다.


▶ 스킨 개요

이름 그대로 포스트잇입니다. 책갈피에 가느다란 포스트잇으로 표시하듯이 메뉴바를 만들고, 거기에 마우스를 대면 노란 포스트잇같은 내용물이 보이는 구조입니다. 바꿔 말하면 기본 화면에서 메뉴의 내용이 안 보이는 스킨입니다. 위젯이나 라이프로그 같은 걸 방문객들에게 노출하고자 하는 분에게는 그다지 적합하지 않습니다.

공지사항이 있으신 분은 왼쪽의 [블로그 소개]를 기본 노출로 해놨으므로 config에서 기본 설정 - 이글루 설명('미사마 포에버♡'라고 된 부분)을 공지란으로 이용하실 수 있습니다.


▶ 설치 방법

1. 스킨 바꾸기로 들어간다.
2. 새로 만들기로 들어가서 이렇게 3단으로 생긴 것을 고른다. (파란색 녹색 아무 거나 상관없음)
3. 아무렇게나 만든 뒤 저장하고 빠져나온다. 이름은 마음대로 붙여도 됨.
4. 방금 저장한 스킨을 '소스고침'을 눌러서 본격적으로 고치기 시작한다.

5. 그 다음 HTML 및 CSS 박스 안에 내용물을 싹 지우고 각각의 파일 내용을 복사해 넣는다.

※ 주의 : 익스플로러 사용자는 파일을 반드시 오른클릭해서 하드에 저장한 후, 메모장 등에서 열어서 내용물을 복사해 붙이세요. 브라우저에서 그냥 클릭하면 소스가 깨집니다.

● HTML 박스에 들어갈 내용물

구조가 복잡한 만큼 html 소스도 메인화면-본문-왼쪽날개-오른쪽날개 모조리 다 갈아야 합니다. 각각의 상자를 마우스로 클릭하면 해당 박스가 오렌지색으로 활성화됩니다. 순서대로 복사해 넣으세요.

post_it_main.txt
post_it_center.txt
post_it_left.txt
post_it_right.txt

● CSS 소스 박스에 들어갈 내용물 : post_it_css.txt

6. 저장한다.


▶ 스킨을 적용하기 전에 반드시 살펴볼 점 몇 가지

[1] 방명록

1. 방명록 바가 필요하지 않은 사람 : post_it_main.txt에서 아래 박스 안 내용 전체를 통째로 빼버리세요.

<div class="menutitleR"><a href="http://@@@@@.egloos.com/1806892">방명록</a></div>

2. 방명록 바가 필요한 사람 : post_it_main.txt에서 굵은 부분에 자기 방명록의 url을 넣으세요.

<div class="menutitleR"><a href="http://@@@@@.egloos.com/1806892">방명록</a></div>

※ 방명록 대신 공지 포스트를 넣을 수도 있습니다.

<div class="menutitleR"><a href="http://#####.egloos.com/234152">공지</a></div>

이렇게요.


[2] 달력

기본적으로 달력을 쓴다고 가정하고 스킨을 만들었습니다. 이글루 기본 설정에서 달력을 안 보이게 해놓으신 분도 이 스킨을 적용하면 분홍색 [Calendar] 바는 나타날 겁니다. 물론 거기에 마우스를 갖다대도 달력은 뜨지 않지요.

그러니 달력을 안 쓰는 분은 post_it_main.txt 에서

<div class="menutitleL" onmouseover= this.nextSibling.style.display='block'; onmouseout=this.next Sibling.style.display='none';>Calendar</div><DIV style='display:none; position : relative;' onmouseover=this.style.display='block'; onmouseout=this.style.display='none';>
<div class="wrapL"><$calendar type=1$></div>
</div>

위 박스 속의 부분을 통째로 지우시면 [Calendar] 분홍바가 안 보일 겁니다.


[3] '블로그 소개' 부분

이렇게 되어 있는데요, 이게 저절로 저렇게 되는 게 아니라 클릭해서 열릴 때 저 노란 포스트잇 뒷부분에 그 길이만큼의 여백을 따로 지정해준 겁니다. (노란 포스트잇 부분은 position : absolute;가 적용되어 다른 부분보다 한겹 띄워올려져 있습니다. 말하자면 허공에 동동 뜬 셈.) post_it_main.txt에서 이 부분입니다.

<a href='javascript:void(0)' onclick=this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';><div class="menutitleL">블로그 소개</div></a><DIV style='display:block; position : relative;'>
<div class="wrapL">
<p class="logoimage"><$logoimage$></p>
<p class="description"><$description$></p>
<p class="nick"><$nick$></p>
</div>
<div style="height : 220px;"></div>
</div>

저 굵은글씨 부분이 없으면 이렇게 됩니다.

노란 내용이 보일 때에도 아래 메뉴바들이 계속 올라가 붙어있다

그런데 저 220px는 제 블로그에 특화된 수치입니다. 도해님이 그려주신 미사마의 초상화를 넣고 '미사마 포에버♡'라는 문구를 넣고 나니 세로 길이 220px 정도 뒷여백을 주는 게 보기 좋더군요.
다시 말해서, 다른 그림을 넣거나 글을 길게 넣거나 등등으로 노란 상자의 길이가 달라지면 저 220px도 해당 블로그에 맞게 달라져야 합니다. 그러니 스킨을 미리보기 해보시고 저 수치를 적절히 조정해주세요. 안 그러면 안 예쁩니다.


[4] '메모장'과 '이글루 파인더' 제목 부분

'메모장'과 '이글루 파인더'는 굳이 제목을 쓰지 않고 공란으로 남기는 분이 많습니다. 보통 스킨이라면 상관없죠. 그런데 이 스킨은 메뉴의 제목(분홍바)에 마우스를 대어야 내용물이 보입니다. 다시 말해서,

제목을 안 넣는다 → 분홍바가 안 나타난다 → 마우스를 대고 자시고 할 부분이 없다 → 내용물을 볼 수 없다

...가 되어버리는 겁니다.

그러니 이 스킨을 쓰면서 메모장이나 이글루 파인더를 이용하는 분들은, 메모장의 경우 반드시 '제목'을 넣으시고 이글루 파인더는 제목 '보이기'를 선택해주세요. 안 그러면 안 보입니다.


.
.
.
.

반드시 체크해야 할 부분이 좀 많지요. ^^; 이런 특화된 스킨은 이글루스에서 회원 스킨 공개 제도를 다시 운영한다고 해도 절대 해당사항이 없는; 스킨일 겁니다.

그래도 이 귀찮음을 무릅쓰고 한번 써보고 싶다는 분이 계신다면, 부디 도움이 되면 기쁘겠습니다.

좋은 하루 되세요 ^^*