티스토리 메뉴 삭제, 줄바꿈, 커버 이미지 변경 (북 클럽 스킨) ②

이전 글에서는 폰트와 관련된 꾸미기 글이라면 이번에는 참 분류가 안되길래.. 대충 묶어서 작성해본다. 이전 글은 아래 링크 참조.

 

티스토리 폰트 변경 (북 클럽 스킨) ①

 

0. CSS 창 여는 법

블로그 관리를 들어가면 꾸미기 밑에 스킨 편집이 있다. 클릭해보자

스킨 편집

 

이제 우측에 html 편집 클릭!

html 편집

새로운 창 상단에 HTML / CSS / 파일업로드 가 있을텐데 중간에 CSS화면 클릭

CSS 창

블로그를 꾸미기 위해선 CSS 창까지 들어오는건 기본적으로 할 줄 알아야하니 잘 기억해두자. 

 

1. 상단 메뉴 삭제

CSS 코드 수정 중 가장 쉽다. CSS화면에서 Ctrl+f를 눌러 검색창을 띄우고 #gnb를 검색한다. 아마 270번째 줄에 아래와 같은 코드가 있을거다. 상단 메뉴를 없애고 싶으면 #gnb코드 내에 display: none;을 작성하고 적용을 누르면 끝. 다시 보이게 만들고 싶으면 display: none; 을 그냥 지우면 된다.

 

#gnb {
	display: none; /*상단 메뉴 없애기*/
	height: 3px;
	overflow-x: auto;
	overflow-y: hidden;
	-ms-overflow-style: none;
}

 

2. PC/모바일 줄바꿈 설정

북 클럽 스킨의 경우 기본 줄바꿈 설정은 글자 단위이다(아마도). word-break: xxx에 keep all은 단어 단위 , break-all은 글자 단위 줄바꿈이다. 만약 pc환경에서는 단어 단위 줄바꿈을, 모바일환경에서는 글자 단위 줄바꿈을 하고싶다면 아래 코드를 보고 따라하자. CSS 창에서 entry-content p 를 검색해 아래와 구조가 똑같은 코드를 찾자. 아마 1440번째 줄. 여기서 word-break: break-all; 을 word-break: keep-all;로 수정한다. 이후 @media~ word-break: break all;을 CSS화면 빈 곳에 복사해 붙여넣고 적용 클릭. 

 

.entry-content p {
	margin-bottom: 20px;
	font-family: 'Hi Melody';
  	word-break: keep-all;
	font-size: 1.1em;
	line-height: 1.9;
	color: #555;
}

/* 모바일에서는 글자 단위로 줄바꿈 */
@media screen and (max-width: 767px) {
  .entry-content p {
    word-break: break-all;
  }
}

이제 큰 화면에서 글을 볼 떄는 단어 단위로 줄바꿈이 이루어지고, 모바일같은 작은 화면에서는 글자 단위로 줄바꿈이 일어난다. 모바일에서도 단어 단위 줄바꿈을 원하면 @media~word-break: break all; 부분을 다 지우면 된다.

3. 커버 이미지&크기 변경

커버 이미지는 글을 눌렀을 때 가장 위에 보이는 이미지다. 내 블로그에서는 분홍색 직사각형이 해당된다. 사실 정확히 말하면 난 이미지가 아니고 그냥 커버 색상이 분홍인거다. 이미지를 넣어봤지만 화면에 따라 이미지 크기가 변하는게 보기 싫어 그냥 배경색을 바꿨다. 방법은 적어두지만.... 그냥 커버색을 바꾸는걸 추천한다.

 

3-1. 커버 크기 변경

CSS 창에서 post-cover를 검색해 아래와 같은 코드를 찾자. width는 가로 비율, height는 세로 길이다. 추천하는 크기는 width: 100%, height: 200px이다. 마음에 안들면 본인이 원하는 크기로 조정하면 되지만 가로 비율은 100%로 두고 세로만 조정하는걸 추천.

 

.post-cover { /* 글 포스터 커버 변경 */
	position: relative;
	z-index: 20;
	display: table;
	width: 100%; /*가로 비율*/
	height: 200px; /*세로 길이*/
	background-color: #ffaaaa82;
	background-position: 50% 50%;
	background-size: cover;
	box-sizing: border-box;
}

 

3-2. 커버 색상 변경

CSS 창에서 post-cover를 검색해 아래와 같은 코드를 찾자.

.post-cover { /* 글 포스터 커버 변경 */
	position: relative;
	z-index: 20;
	display: table;
	width: 100%;
	height: 200px; 
	background-color: #ffaaaa82; /*커버 배경색*/
	background-position: 50% 50%;
	background-size: cover;
	box-sizing: border-box;
}

 

여기서 background-color: □#xxxx 에서 □에 마우스를 두면 색상표가 나온다. 본인이 원하는 색 코드가 있으면 색상 코드를 직접 수정하고, 없다면 색상표에서 고르면 된다. 

커버 색상표

 

3-3. 커버 이미지 업로드 및 변경

이미지를 업로드하기 전에, 먼저 커버 크기를 알아야한다. 3-1 코드 기준 커버 크기는 1440px × 200px 이다. 그럼 이 사이즈에 맞는 이미지를 준비해서 파일 업로드를 하자. CSS 창에서 상단을 보면 우측에 파일 업로드가 있다. 클릭 후 아래에 +추가 버튼을 눌러 이미지를 업로드하자. 이때 반드시 파일명은 영어로 바꾸자.

파일업로드

 

이미지 파일 선택

 

정상적으로 업로드 했으면 아래와 같이 나온다. 여기서 내가 업로드한 이미지 파일명을 기억해두자.

이미지 파일명

CSS 창으로 돌아가 post-cover를 검색해 아래와 같은 코드를 찾자. post-cover 내에 background-image: url("./images/blogpost.png"); 를 추가하고 blogpost.png를 본인 이미지 파일에 맞게 수정하면 된다. 

 

.post-cover { /* 글 포스터 커버 변경 */
	position: relative;
	z-index: 20;
	display: table;
	width: 100%;
	height: 200px; 
	background-color: #ffaaaa82;
   	background-image: url("./images/blogpost.png"); /*이미지*/
	background-position: 50% 50%;
	background-size: cover;
	box-sizing: border-box;
}

 

끝!