스피드스타 스킨 옵션 상세 가이드

스피드스타 스킨은 HTML과 CSS 수정을 하지 않더라도 원하는 취향대로 스킨을 바꿀 수 있도록 옵션들이 준비되어 있습니다.

다만 옵션의 내용만 읽고 적용하기엔 애매한 부분이 있어서 가이드 글을 작성합니다.

[노트*옵션의 경우 블로그 관리>꾸미기>스킨편집으로 가셔서 내려 보면 나옵니다.*]

레이아웃과 핵심 기능 옵션

사이드바 위치 조정

기본적인 블로그의 레이아웃을 설정하는 옵션입니다.

사이드바를 오른쪽에 둘 것이냐, 왼쪽에 둘 것이냐, 아예 없앨 것이냐를 정할 수 있습니다.

본문 넓이 설정

본문의 넓이를 설정할 수 있는 옵션입니다.

기본값은 850px로 적용 되어 있습니다.

숫자가 커질수록 넓어지며, 작을수록 좁아집니다.

여기서 중요한 점은 px를 꼭 적어주셔야 합니다.

메인 화면 넓이 설정

블로그의 '홈'에 들어가서 보이는 화면의 넓이를 설정하는 옵션입니다.
기본값은 1450px입니다.
숫자가 커질수록 넓어지며 작아질수록 좁아집니다.

상단 고정 네비게이션 옵션

상단에 고정 되어 있는 네비게이션 부분을 설정할 수 있는 옵션들이 있습니다.

네비게이션 제거

활성화시 큰 화면에서 네비게이션을 삭제하는 옵션입니다.

네비게이션이 거슬린다고 느끼시는 분들에게 추천하는 옵션입니다.

다만 모바일에서도 네비게이션이 없으면 사용자가 불편함을 겪을 수 있기 때문에 강제적으로 등장합니다.

네비게이션이 스크롤을 올릴 때마다 나오게 하기

기본적으로 네비게이션은 사용자를 계속 따라 다닙니다.

하지만 이 옵션을 활성화하면 스크롤을 위로 올릴 때에만 네비게이션이 등장할 수 있도록 바꿀 수 있습니다.

자세한 건 위의 움짤을 참고하시면 됩니다.

네비 카테고리 메뉴 사용하기

스피드스타 스킨의 네비게이션에선 카테고리 메뉴가 기본적으로 등장합니다. (사진 옵션ON 부분)
하지만 이 옵션을 비활성화하면 블로그 설정>꾸미기>메뉴에 있는 옵션이 등장하게 됩니다. (사진 옵션 OFF 부분)

참고로 메뉴에선 다음과 같은 기본 설정이 되어 있습니다.

이후 원하시는대로 꾸미시면 됩니다.

블로그 제목 이미지 옵션

네비게이션에 글씨 제목 대신 로고를 넣을 수 있는 옵션입니다.
이 때 로고는 130x30 픽셀의 크기를 권장합니다.

사진상으론 왼쪽이 로고를 넣은 모습, 오른쪽이 기본 설정으로 글씨가 나오는 옵션입니다.

네비게이션 배경색깔 설정 옵션

네비게이션의 배경색을 바꿔주는 옵션으로, 직접 사진으로 보시는 게 이해가 빠를 겁니다.
잘 구분할 수 있도록 연두색으로 바꿔서 사진을 찍었습니다.

기본 색깔은 rgba(255,255,255,0.8)이며, 다크모드 기본 색깔은(18,18,18,0.8) 입니다.

네비게이션 검색+햄버거 아이콘의 색깔 설정

네비게이션에서 왼쪽과 오른쪽에 있는 햄버거 메뉴+검색 아이콘의 색깔을 결정하는 옵션입니다.
빠른 이해를 위해서 빨간색으로 바꿔보겠습니다.

기본 색깔은 SILVER이며, 다크모드에서도 SILVER입니다.

메가메뉴의 배경색 설정

네비게이션에서 카테고리 메뉴이 등장한다면 마우스를 갖다 댔을 때에 메가 메뉴가 등장합니다.

이 메가메뉴의 배경색을 설정할 수 있는 옵션입니다.

원하는 색상의 RGB 코드로 적어주셔야 합니다.

숫자, 숫자, 숫자 형식입니다.[각주*쉼표를 빠뜨리시면 안됩니다.*]

RGB 코드의 경우 인터넷에서 검색해주세요.

헤더 옵션

스피드스타 스킨에서 네비게이션 바로 아랫 부분인 헤더를 설정할 수 있는 옵션입니다.

헤더에 파도효과 켜기

켰을 때엔 헤더에 파도 효과가 적용됩니다.

기본 설정은 비활성화 되어 있습니다.

헤더와 푸터의 배경 색깔 설정

헤더와 푸터의 색깔을 결정하는 옵션입니다.
기본값은 #ebebeb이며, 다크모드에선 #000입니다.

사이드바 옵션

스피드스타 스킨의 사이드바를 설정할 수 있는 옵션입니다.

다만 사이드바를 없앤 1단 스킨 형태로 사용하신다면 사용할 수 없는 옵션이 많습니다.

메뉴 전체보기 켜기

사진처럼 카테고리 메뉴에서 '전체 보기'를 켜거나 끌 수 있는 옵션입니다.
기본 값은 켜져 있습니다.

메뉴 접기 온오프

카테고리 메뉴가 접힌 채로 등장하게 만드는 옵션입니다.
이 때 카테고리 메뉴는 화살표를 눌러서 다시 펼칠 수 있습니다.

사진에선 왼쪽이 접히지 않은 상태, 오른쪽이 접힌 상태입니다.

사이드바를 고정하기

사이드바가 활성화된 레이아웃일 때만 사용할 수 있는 옵션입니다.
스크롤을 내리면 사이드바가 따라옵니다.

자세한 건 위의 움짤을 참고해주세요.

사이드바 프로필 문구

사이드바2에 있는 프로필에 들어갈 문구를 적을 수 있는 옵션입니다.

참고로 사이드바2는 1단 스킨 형태로 사용하더라도 등장합니다.

문구를 나오지 않게 하고 싶다면 모두 지우시면 됩니다.

사이드바 SNS 주소 입력

인스타그램, 유튜브, 워드프레스, 네이버블로그, 트위터, 페이스북 등 운영하고 계시는 곳의 주소를 입력하시면 위와 같이 아이콘이 등장합니다.

사용자가 저 아이콘을 누르면 적어두신 주소로 이동하게 됩니다.

주소 부분을 모두 지우신다면 아이콘은 등장하지 않습니다.

목차 옵션

스피드스타 스킨에서 제공하는 목차를 설정할 수 있는 부분입니다.

자동 목차 기능 활성화하기

스피드스타 스킨에선 제목 부분(에디터 기준 제목1,2,3) 을 자동 수집해서 목차로 만들어주는 기능이 작동합니다.

수동 목차를 사용 중이시거나, 목차 기능이 필요 없으신 분은 비활성화 하시면 됩니다.

목차 위치 조정

스피드스타 스킨에서 화면 공간에 여유가 있다면 위의 사진처럼 목차가 떠있게 되어 있습니다.
이 때 왼쪽에 띄울지, 오른쪽에 띄울지를 결정할 수 있습니다.

사이드바 왼쪽을 쓰신다면 오른쪽에 목차를 띄우셔야 하고, 사이드바 오른쪽을 쓰신다면 왼쪽에 목차를 띄우셔야 하며, 1단 스킨이시면 취향대로 쓰시면 됩니다.

모바일에서 목차 켜기/끄기

모바일에서만 목차를 비활성화할 수 있는 옵션입니다.

모바일에서 목차 접기 옵션

모바일에서 목차가 접힌 채로 등장하는 옵션입니다.
사용자는 목차를 터치해서 펼칠 수 있습니다.

큰 화면에서도 목차 본문 위로 올리기

화면에서 여유 공간이 있어도 좌/우로 목차를 띄우지 않고 본문 위에 올릴 수 있게 해주는 옵션입니다.

위의 사진을 참고하시면 됩니다.

본문 옵션들

글을 적는 부분들을 조정할 수 있는 옵션들을 모아뒀습니다.

이 부분들은 옵션명만 보더라도 무엇을 바꾸는지 알 수 있는 옵션들입니다.

본문 글자 크기 옵션

사용되는 글자의 크기를 결정하는 옵션입니다.

숫자가 커지면 글자의 크기가 커지며, 숫자가 작아지면 크기가 줄어듭니다.

PX 단위로 작성하셔야 합니다.

본문 글자 줄간격

본문에서의 글자 줄간격을 결정하는 옵션입니다.
기본값은 1.9입니다.

숫자가 커질수록 줄의 세로 사이 거리가 멀어집니다.

직관적으로 이해하실 수 있도록 위의 사진에서 비교해주시면 됩니다.

본문 강조 색깔 변경

에디터에서 BOLD를 눌러서 쓴 굵은 글씨의 색깔을 결정하는 옵션입니다.

블럭1 글씨 색깔과 선 색깔

스피드스타 스킨의 블럭 치환자 기능으로 작성된 부분의 색깔을 설정하는 옵션입니다.

본문 이미지/동영상에서 그림자 켜기

본문에 삽입된 이미지와 동영상에 그림자를 설정할지 여부를 결정하는 옵션입니다.

본문 제목 글씨 크기

본문의 제목 부분의 글씨 크기를 결정하는 옵션입니다.

위의 사진에선 다양한 글쓰기 치환자를 사용해보세요. 에 해당하는 부분입니다.

제목1의 숫자 표기 기능

스피드 스타 스킨에서 제목1로 글을 쓰면 위의 사진처럼 앞에 숫자가 달려서 나옵니다.

이 부분을 켤지, 끌지를 결정하는 옵션입니다.

색깔도 바꿀 수 있습니다.

이미지/h2/h3/h4/테이블 등 상하 여백

이미지/ H2/H3/H4/테이블 같은 태그의 상/하 여백을 설정하는 옵션입니다.

기본값은 30px입니다.
기본 설정 기준으로 위로 30px, 아래로 30px 떨어뜨려 놓은 겁니다.

사진 상으론 주황색 부분입니다.

본문 하단 옵션

본문이 끝난 후 본문 하단을 조정해주는 옵션입니다.

공감 스타일 고르기 옵션

스피드스타 스킨에선 2가지 형태의 공감 버튼이 제공됩니다.
하나는 기본 공감 옵션, 두번째는 티스토리 기본 제공 옵션입니다.

원하시는 대로 사용하시면 됩니다.

본문 하단에 SNS 기능을 켜기

본문 하단에 사용자가 SNS로 글을 공유할 수 있는 버튼을 활성화 할지를 결정하는 옵션입니다.

SNS 큰 아이콘 켜기

본문 하단에 SNS 기능을 활성화 했을 때 큰 아이콘으로 바꿔주는 옵션입니다.

위의 사진과 같은 형태입니다.

본문 하단에 저작권 경고 상자를 띄우기

이 옵션을 설정시에 본문이 끝난 후, 위의 사진 처럼 저작권 경고 상자를 띄울 수 있습니다.

이 때 2번째 줄부터의 문구를 옵션을 통해서 결정할 수 있습니다.

본문 태그 배경색과 글씨색 변경

본문 태그의 배경색과 글씨색을 결정하는 옵션입니다.

댓글 옵션

댓글 부분을 설정할 수 있는 옵션입니다.

댓글창을 켜기 / 끄기

댓글창을 켜거나 끌 수 있는 옵션입니다.

말풍선 색깔 설정 옵션

댓글의 말풍선 부분의 색깔을 설정하는 옵션입니다.

홈커버 옵션들

블로그 메인에서 홈커버를 설정했을 때, 이 부분을 바꿔줄 수 있는 옵션들입니다.

만약 홈커버를 설정하지 않으셨다면 설정할 필요가 없습니다.

슬라이더 커버의 자동 스와이프 간격

슬라이더의 자동 스와이프 간격 속도를 바꿀 수 있는 옵션입니다.

숫자가 작아질수록 더 빨리 움직입니다.

1000 = 1초입니다.

꼭 숫자로만 적어주셔야 합니다.

슬라이더 배경색 설정

이미지만 등장하는 슬라이더가 아닌 경우에, 글씨가 이미지에 묻히게 하지 않기 위해 배경색을 넣었습니다.

이 부분의 배경색을 설정하는 옵션입니다.

감추고 더보기 띄우기 옵션

섬네일 리스트 1,2 / 가로형 썸네일을 몇 개 이상일 때 감출지를 결정하는 옵션입니다.

예를 들어서 이 부분을 3으로 설정했을 때 3개만 보여주고 나머지는 감춘 후 더보기 버튼을 눌러야 보이게 만들 수 있습니다.

리스트창 옵션

카테고리를 눌렀을 때 등장하는 창을 설정하는 옵션입니다.

리스트창 목록 형태 변경 켜기

리스트창의 목록 형태를 변경해주는 버튼을 활성화하는 옵션입니다.

리스트 카테고리 색깔 옵션

리스트창과 홈커버의 가로형 섬네일 부분의 카테고리가 위의 사진처럼 표시됩니다.

이 부분의 색깔을 설정하는 옵션입니다.

기타 옵션들

다크 모드 기능 켜기

다크모드 기능을 활성화 하는 옵션입니다.

이 기능을 활성화시 사용자가 버튼을 통해 라이트 모드 / 다크 모드를 설정할 수 있습니다.

강제 다크 모드 선택

강제 다크모드를 활성화하는 옵션입니다.

이 모드 사용시 버튼도 사라져서 사용자는 다크모드 사용이 강제됩니다.

푸터 / 좌측 드로워 프로필 이미지

프로필 이미지 옵션입니다.

120x120 픽셀의 이미지를 업로드시 위처럼 프로필 사진이 등장합니다.

이 프로필 사진은 사이드바2와 푸터(가장 아랫부분)에 적용됩니다.

본문 이미지 자동 워터마크 채우기

이미지 도용을 막기 위한 워터마크 옵션입니다.

옵션 활성화시 자동으로 이미지 오른쪽 하단에 등장합니다.

다만 캡쳐에 대한 워터마크만 가능합니다. 불펌하는 사람이 이미지를 우클릭 후 다운로드 해버리면 워터마크가 적용되지 않습니다.

본문 이미지 파일명 출력 켜기

위의 사진 처럼 본문 이미지에 파일명을 출력해주는 옵션입니다.
파일명은 파일 원본의 제목이 자동 출력 됩니다.

위로 가기 버튼 출력

본문 하단에 등장하는 위로 가기 버튼을 출력할지 결정하는 옵션입니다.

코드하이라이터 옵션

스피드스타 스킨에서 자체제작한 코드 하이라이터가 출력되는 옵션입니다.

만약 따로 플러그인을 사용하신다면 꺼주는 게 좋습니다.

기타 색깔 설정

다크모드에서 배경색 설정

다크모드에 들어갔을 때 스킨의 배경색을 설정하는 옵션입니다.

호버 색깔

스킨에서 마우스를 갖다 댔을 때 색이 변화하는 부분들이 있습니다.