티스토리 flatinum 스킨 수정하기

처음에 Whatever 스킨을 쓰다가 카테고리가 보이는 스킨으로 변경하고 싶어

여러 스킨을 적용해보다 Flatinum으로 결정 했습니다.

 

 

우선 관리자 화면에서 스킨을 변경합니다

 

Flatinum 스킨에서 Top에 이미지 슬라이드를 제거하고 상단메뉴 수정을 하겠습니다.

 

스킨의 슬라이드이미지영역 제거와 메뉴를 수정합니다

 

스킨 편집화면에 들어가면 우측에 설정화면이 나옵니다.

 

스킨편집화면 설명

 

캡쳐설명 입니다.

1. 첫화면, 전체글을 선택시 나오는 글 수와 목록구성입니다. 저는 목록만 나오는걸로 합니다.

2. 카테고리를 선택할시 나오는 목록구성입니다. 스킨마다 기본설정의 목록구성이 어디에서 구현되는지 다릅니다. 실제 적용해보고 확인이 필요합니다.

3. 직접 코드를 수정해서 화면구성을 합니다.

 

• 슬라이드 이미지 제거

 

슬라이드 이미지가 구현된 소스

 

63번째줄부터 99번째까지 삭제를 하시든지 캡쳐의 밑줄처럼 주석처리 합니다.

그러면 이미지 영역이 사라지면서 화면이 밀려올라 갑니다.

 

• 메뉴를 영역을 설정해 주겠습니다.

Chrome에서 새탭을 열어 자신의 티스토리 사이트를 엽니다.

메뉴 > 도구 더보기 > 개발자 도구(단축: Ctrl + Shift + I)를 선택합니다.

 

 

개발자도구가 열리면 스킨편집과 비슷한 화면이 나옵니다. 우측의 개발자 도구의 <div 태그위에 커서를 두면 좌측에 해당하는 영역에 표시가 됩니다. 우리가 편집하려는 메뉴부분을 찾아서 해당 <div 태그를 선택합니다.

 

 

1. <div class="col-md-12"> 부분을 찾습니다. 

2. 영역이 메뉴부분인 것을 확인합니다.

3. 연결된 클레스가 col-md-12 부분인것을 확인했고 스킨편집화면으로 다시 돌아가서 height: 60px; 을 추가 합니다.

 

 

스킨편집 화면의 CSS탭을 선택하고 Ctrl+F를 누르고 col-md-12로 검색합니다.

height: 60px;를 추가합니다.

 

• 로고변경하기

스킨편집 화면의 파일업로드 탭을 선택합니다.

 

 

자신의 로고를 320*100짜리로 편집합니다. 파일명 logo_shrink.png를 삭제하고 자신의 로고를 해당이름으로 업로드합니다.

 

• 메뉴에 카테고리링크 걸기, 배경색지정, 위치조정

 

 

스킨편집 화면에서 <li 테그로 카테고리를 추가하고 style 옵션으로 스타일을 조정합니다.

 

• 스킨수정화면의 CSS텝에서 메뉴의 크기와 카테고리의 간격을 조절합니다.

 

로고 padding

로고 padding inverse

메뉴높이 설정 (모두 타이핑합니다)

본문 메뉴 공간

카테고리 padding

카테고리 padding inverse

모바일화면 메뉴버튼 위치조정

모바일메뉴 inverse 1

모바일 메뉴 inverse 2

모바일 메뉴바 바탕색1

모바일 메뉴바 바탕색2

모바일 메뉴바 바탕색 inverse

이미지박스에 테두리 두르기 (스킨편집의 CSS탭에 넣습니다)

 

.imageblock {
	max-width: 400px; /* 이미지박스의 최대 넓이 */
	border: 1px solid gray; /* 회색 테두리 */
	padding: 3px; 
	margin: 5px 0; 
	text-align: center;
}

 

참조: 티스토리 코드블럭 설정

https://chloesecret.tistory.com/111

티스토리 코드블럭: '코드 문법 강조' 플러그인 적용 방법 및 테마 디자인

• 태그항목을 조절합니다

위와같이 겹치는 부분을 스킨수정에서 아래와 같이 padding을 줍니다.

 

 

 

참조: 구글폰트

http://makebct.net/%EA%B5%AC%EA%B8%80%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0/?cat=148/

무료 사용 가능한 한글 구글웹폰트 | make BCT