러브인포 · 꾸미기

대문(입장 화면)

첫 방문자에게 보이는 입장 화면. 러브로그와 같은 옵션 체계입니다.

스타일 — 사진 카드형 / 전체화면형(사진이 화면 배경). 모양 6종(기본·열쇠 구멍·카드·터미널·티켓 등)과 배치 7곳.
꾸미기 05 공개 · 대문. 「대문」을 「사용」으로 바꾸면 형태(사진 카드형 · 전체화면형)와 모양 칸이 나옵니다.
문구·비밀번호(페이지 비밀번호와 별개), 입장 버튼 문구, 버튼색 · 글씨색 · 문구색 · 입력칸 색. 색을 따로 정하지 않으면 홈 테마의 강조색을 따르고, 「기본색」으로 한 번에 되돌립니다.
문구색은 대문 문구 · 위 작은 글 색이에요(모양마다 정해진 문구색보다 우선). 문구 그림자 체크를 끄면 사진 위 글자 그림자가 빠져 깔끔해집니다. 「사진 위 그라데이션」도 따로 끌 수 있어요.
사진 위치·확대(PC)와 모바일 따로 조정 — 조정 창이 실제 폰 화면 비율로 열리고, 조정한 그대로 보입니다. 사진을 끌어서 옮기거나 ◀▲▼▶.
전체화면형은 사진이 항상 화면을 꽉 채웁니다. 확대 값이 화면을 덮기에 모자라면(세로로 긴 폰에서 100% 등) 덮을 만큼 자동으로 커지고, 위치는 맞춰 둔 대로 유지됩니다. 아래 꽉 채우기.
미리보기 — PC/모바일 전환, ✕·입장 버튼·ESC로 나옴.
전체화면형 대문이 PC에서 아래 · 오른쪽에 스크롤바 여백을 만들던 문제는 고쳐졌습니다.

꾸미기 05 — 형태 · 모양 칸, 버튼색 · 글씨색 · 문구색 · 입력칸, 문구 그림자

대문 스타일 2종과 미리보기 바 — PC 화면 기준, 폰에서는 입력칸이 더 작게 보여요

사진 꽉 채우기

「사진 위치·확대」의 확대는 화면 너비 기준이라, 예전에는 세로로 긴 폰에서 확대 100%여도 위아래가 비고 흐린 사진이 비쳐 보였습니다.
이제는 사진 비율과 화면 크기로 화면을 덮는 최소 확대를 계산해, 설정이 그보다 작으면 그만큼 키워 보여 줍니다. 이미 덮고 있던 설정은 그대로입니다.
창 크기를 바꾸거나 대문 미리보기에서 PC · 모바일을 바꿀 때도 다시 계산됩니다. 따로 할 일은 없어요.

폰 · 확대 100% — 왼쪽 예전(위아래가 빔), 오른쪽 지금(꽉 채움)

대문 CSS로 꾸미기

대문 전용 칸은 없지만 꾸미기 10 「커스텀 CSS」가 대문에도 그대로 적용됩니다. 커스텀 CSS는 홈 전체에 걸리니, 대문만 바꾸려면 선택자 앞에 꼭 #gate를 붙여 주세요.

#gate: 대문 전체 화면
#gate[data-style="full"]::after: 전체화면형 대문의 사진
#gate[data-style="full"]::before: 전체화면형 뒤에 깔리는 흐린 사진
#gate-img: 카드형 대문의 사진
#gate-body: 글 · 입력칸 · 버튼을 담는 상자
#gate-over · #gate-msg: 맨 위 작은 글 · 대문 문구
#gate-pw · #gate-enter: 비밀번호 입력칸 · 입장 버튼

색 · 배경은 기본 대문 스타일이 우선이라 !important를 붙여야 바뀝니다. 모서리 · 필터처럼 기본값이 없는 속성은 그냥 써도 됩니다.
position: fixed는 absolute로 바뀌고 z-index는 500까지입니다. 화면이 깨지면 주소 뒤에 ?nocss=1을 붙여 들어와 고치세요.
대문에 HTML · 스크립트를 넣는 기능은 없습니다. CSS로 모양만 바꿀 수 있어요.

#gate-msg { color: #ffd6e8 !important; letter-spacing: .4em; }
#gate-enter { background: #000 !important; color: #fff !important; border-radius: 0; }
#gate[data-style="full"]::after { filter: grayscale(1); }