blue 스킨 출생
티스토리 블로그 스킨 blue는 어느 분의 스킨을 수정한 것입니다. 그런데 그 어느 분의 출처를 확인하지 못했습니다. 예전에 스킨 사용에 대한 감사 인사를 댓글로 남겼다는 기억으로 이전 모든 댓글을 찾았으나 "알 수 없는 사용자"(추측)로 나오네요.
스킨 모양을 수정하면서 이곳저곳에 칼질했지만, 님의 열정 코드는 많이 남아 있기에 이곳에 글을 남깁니다.
님의 스킨을 재배포합니다. 감사합니다.
blue 스킨 특징
■ 반응형 스킨입니다.
PC, 스마트폰, 태블릿 화면에 맞게 디자인돼 있습니다.
■ 본문 넓이는 728px입니다.
구글 애드센스 광고 크기 728x90에 맞춰 본문 넓이를 720px로 했습니다.
■ 스크롤백 감지
마우스 스크롤을 위로 올리면 상단 메뉴(카테고리, 검색창)가 표시되고 마우스 스크롤을 아래로 내리면 상단 메뉴가 사라지는 기능을 넣었습니다. 가독성(?)과 빠른 목록 이동을 위한 것인데 유용함을 모르겠습니다. ㅋ
이 기능은 스마트폰에서도 작동합니다.
■ scrollIntoView
블로그 홈 화면과 블로그 글(목록) 화면에서 스크롤 위치가 다릅니다. 이 또한 블로그 글 가독성 향상을 위한 기능으로 두 화면의 차이는 스킨 상단의 블로그 이름(큰 글자, 이미지)이 보이고 안 보이고 차이입니다.
■ 상단 메뉴(카테고리)는 드롭 다운 방식입니다.
카테고리 목록에 마우스를 올려놓으면 서브 카테고리가 나옵니다.
스킨 데모페이지
https://likenew-box.tistory.com/
스킨 업데이트
기본적으로 스킨 업데이트는 없어요. ㅜㅜ
스킨 불량 문의는 댓글로 남겨주시고 느긋하게 기다려주세요. 언젠가는 대댓글 달겠습니다. ^^;
알려주세요.
소스 코드가 지저분합니다.
미숙자가 블로그 스킨을 수정할 때마다 인터넷의 코드를 복사 및 붙여넣기로 짜깁기했기에 일체감 없는 코드, 들여 쓰기 혼용(tab과 space) 등등등 아무튼, 소스 코드가 지저분하고 더 좋은 방법으로 구현하지 못한 것도 있습니다.
개선점 등을 댓글로 알려주시면 감사하겠습니다. (꾸벅 ㄳ)
다운로드
스킨 적용
※ 블루 스킨을 등록하기 전에 사용하던 스킨을 백업하면 이전 스킨으로 안전하게 되돌아갈 수 있습니다.
사용중인 스킨 백업은 블로그 관리 페이지 > 꾸미기 : 스킨 변경 페이지에서 사용중인 스킨 > 보관 버튼을 클릭하세요.
1. 블로그 관리 페이지 > 꾸미기 : 스킨 변경 페이지에서 "스킨등록+" 클릭 > 추가 버튼을 클릭해 아래 파일을 업로드합니다.
index.xml
preview.gif
preview256.jpg
preview560.jpg
preview1600.jpg
skin.html
style.css
2. 다시 한번 "스킨등록+"을 클릭해 images 폴더에 있는 파일도 업로드합니다.
script.js
sidebar.info
skinSettings.set
style_ie7.css
style_ie8gte.css
3. "저장" 버튼 > 스킨명 입력 > 확인
4. "스킨 보관함" 메뉴의 "스킨목록" 클릭
5. 3에서 저장한 스킨 위에 마우스 포인터를 옮깁니다.
6. 적용 버튼 클릭
스킨 최적화
1. 모바일웹 자동 연결 해지
블루 스킨은 반응형 스킨이기에 모바일웹 자동 연결을 해지해 티스토리에서 만든 모바일 화면을 사용하지 않도록 합니다.
블로그 관리 페이지 > 꾸미기 > 모바일 > 모바일웹 설정에서 티스토리 모바일웹 자동 연결을 "사용하지 않습니다." > 변경사항 저장
2. 카테고리글 더보기 해제
블루 스킨에는 카테고리글 더보기가 디자인돼 있으니 카테고리글 더보기를 해제합니다.
블로그 관리 페이지 > 플러그인 > 카테고리글 더보기 > 해제
3. 블로그 이미지, 블로그 이름, 닉네임, 블로그 설명, 아이콘, 파비콘 설정
블로그 관리 페이지 > 관리 > 블로그
4. 홈 설정
블로그 관리 페이지 > 스킨 편집 > 홈 설정
홈 화면 글수 : 5개 (원하는 수로 입력합니다.)
목록 구성 요소 : 목록+내용
블로그 관리 페이지 > 스킨 편집 > 기본 설정
글 목록 글 수 : 10개 (원하는 수로 입력합니다.)
목록 구성 요소 : 목록+내용
5. 사이드바
사이드바 설정 페이지에서 프로필, 카테고리, 최근 글 목록 등을 편집할 수 있습니다.
블로그 관리 페이지 > 꾸미기 > 사이드바