티스토리 블로그 강좌 [4편] CSS 편집

 

 

티스토리 블로그 강좌 [4편] CSS 편집

​

안녕하세요! 티스토리만으로 월급보다 더 많이 버는 전문 블로거들을 따라잡는 날까지

티스토리 블로그 모든 과정을 함께 공유해봅시다!

​

-무조건 많이 번다는 뜻이 아닙니다! 조금이라도 더 달성하기 쉬운 방법들입니다-

​

 

티스토리 블로그 CSS 편집

 

CSS 편집은 내가 원하는 글꼴 간격을 설정해놓으면 그 틀이 적용되어 계속 쓸 수 있으니

조금 어렵고 귀찮겠지만 한번 설정하면 계속 적용되니 해보겠습니다.

 

 

[꾸미기]->[스킨 변경]으로 들어가겠습니다

 

 

[편집]을 눌러주세요.

 

대표이미지 삭제

[html 편집]->[css] 눌러주세요

 

css 메뉴에서는 타이틀에 이미지를 넣거나 글 간격 글꼴을 설정할 수 있습니다.

티스토리 블로그는 네이버 블로그보다 조금 더 세밀하게 설정할 수 있습니다.

 

상단 카테고리 추가하기

 

티스토리 전문 블로거분들께서 이미 여러 코드를 만들어 놓으셨는데,

저는 원더바웃님의 코드를 사용하여 설정해서 해보겠습니다.

아래 코드를 복사해 주세요. 마지막 출처 부분만 빼고 복사하겠습니다.

 

/* whatever_nav ------------------------------------------------ */ #gnb .tt_category li a.link_tit {display: none;} #gnb ul li {font-size: 0.875rem;padding: 26px 10px;} #gnb .sub_category_list {display: none; position: absolute; z-index: 999; min-width: 120px; background-color: #ffffff; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); font-size: .875rem;} #gnb .category_list li:hover .sub_category_list {display: block;} #gnb .sub_category_list li {float: none; padding: 0;} #gnb .sub_category_list a:hover:after {display: none;} #gnb .sub_category_list li a {text-align: left; padding: 6px 16px; line-height: 18px;} #gnb > ul {display: inline-block;} #gnb>ul.tt_category>li {padding: 0; border: 0;} .layout-float #gnb > ul {display: block;} .layout-float #gnb ul li {text-align: left; font-size: 1rem; border-bottom: 0;} .layout-float #gnb .sub_category_list {display: block; position: static; min-width: 100%; margin: 2px 0 13px 15px; border-left: 3px solid #f1f1f1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; font-size: .875rem;} .layout-float #gnb .sub_category_list li a {padding: 6px 0px 6px 16px;} .layout-float #gnb ul li a:hover:after {display: none;} .color-dark #gnb .sub_category_list {background-color: #141414;box-shadow: 0px 8px 16px 0px rgba(255, 255, 255, 0.2);} .layout-float.color-dark #gnb .sub_category_list {box-shadow:none;} @media screen and (max-width: 928px) { #gnb>ul {display: block;} #gnb {overflow-y: auto; height: 100%;} #gnb ul {overflow: hidden; height: auto;} #gnb ul li {padding: 0; border-top: 0;} #gnb ul li a{padding: 8px 30px 8px;} #gnb .sub_category_list {display: block; position: static; min-width: 100%; margin: 2px 0 13px 40px; border-left: 3px solid #f1f1f1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; font-size: .875rem;} .color-dark #gnb .sub_category_list {box-shadow: none;} } @media screen and (max-width: 767px) { .layout-float #gnb ul li {border-top: 0;} .layout-float #gnb .sub_category_list {margin: 2px 0 13px 45px;} .layout-float #gnb ul li a {padding: 8px 30px 8px;} } 출처: https://wonderbout.tistory.com/39 [원더바웃]

 

 

출처 제외하고 코드를 복사하셨으면 티스토리 CSS 편집의 스크롤 맨 아래로 내리겠습니다.

그다음 맨 아래 붙여넣기를 해주세요. 그리고 [적용]을 한번 누르고 HTML 메뉴를 눌러주세요.

 

 

[css] 적용 누르시고 [html] 누르기

 

 

HTML 메뉴로 들어오신 다음

• 홈
• 태그
• 방명록

를 찾아 바로 위 칸에 를 입력해서 추가해주세요.

아래처럼 해주시고 만약에

• 홈
• 태그
• 방명록

를 못 찾으셨다면 ctrl+f를 눌러 blog_menu를 검색하여 찾으시면 됩니다.

 

 

 

(첫 번째) CSS 기본 세팅 값 (두 번째) cotegory_list 추가 화면

 

 

보이시나요? 저는 blog_menu가 안 보여서 검색 후 찾아서 추가하였습니다.

그리고 꼭 [적용] 버튼을 눌러주세요 적용하시고 아래 사진처럼 메뉴바가 생성되는 것을 볼 수 있습니다.

아직은 수정을 계속해야 하니 한 번에 다 끝내고 확인하겠습니다. css 메뉴를 없애지 말아 주세요.

 

 

 

폰트, 본문 너비 변경

 

폰트, 본문 너비 변경 차례입니다.

본문 너비는 포스팅 글의 가로 넓이입니다.

넓게 보이게 설정하면 광고 면에서 좁은 화면으로 보니깐

스크롤을 더 많이 내리고 체류시간도 길어져서 조금 더 유리하다고 합니다.

좁게 보이는 것은 PC 화면과 모바일 화면이 비슷해져 좀 더 보기 편합니다.

한 번씩 해보시고 나에게 맞게 설정해보겠습니다.

 

바로 위에 CSS 편집을 이어서 하겠습니다.

Ctrl+F를 눌러 #content를 검색해 주세요.

 

넓이 450px로 변경한 화면입니다

 

 

보시면 스킨마다 기본 너비가 들리기 때문에 정답은 없습니다.

여러 가지 해보시고 편하신 걸로 바꾸는 걸 추천드리겠습니다.

예시로 저는 일단 450px으로 해보겠습니다.

추천드리는 것은 400px입니다 핸드폰 화면과 동일하게 출력되기 때문입니다.

 

기본 폰트 바꾸기입니다. 처음 만드시는 거면 폰트를 어느 걸로 설정해야 할지 모릅니다

 

 

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

 

저는 이 사이트를 추천드립니다.

 

Gmarket Sans L 폰트입니다.

 

예시로 제가 선택한 것은 Gmarket Sans L 폰트입니다.

제약 없이 사용 가능하고 수정과 재배포 가능한 최대 사용 범위이기 때문에

안심하고 사용할 수 있어 이걸로 선택하였습니다.

위에 복사하기를 눌러주시고 티스토리 CSS 폰트에 대치시켜줍니다.

 

 

(첫 번째) 기본 세팅 화면 (두 번째) 눈누 폰트 세팅 화면

 

 

 

복사한 폰트 코드를 css 아무 곳에나 넣어도 되지만 헷갈릴 수가 있어 web font load의 위 쪽에 붙여 넣었습니다. 그리고 아래 font-family가 'Noto Sans KR'로 되어있었는데 방금 바꾼 'GmarketSansLight'로 바꿔주었습니다. 사실 눈 눈에서 복사한 코드는 CSS에 안 넣어도 로드 되는 거 같지만 정석으로 넣어보았습니다.

그리고 항상 말씀드리는 [적용] 버튼 눌러주세요. 하지만 적용이 되지 않을 겁니다.

 

 

 

뒤로 가기를 눌러 스킨 편집의 [적용]을 눌러주세요 그래야 최종 저장이 됩니다.

이제 잘 적용되었는지 확인해보세요.

 

 

이제 오늘 설정하여 수정하신 스킨은 보관을 눌러 제가 기억하기 쉽게 이름으로 변경하여 보관하겠습니다.

보라색 박스를 누르시면 내 블로그의 바뀐 모습을 확인할 수 있습니다.

 

---

 

​

티스토리 블로그 4편 세팅이 끝났습니다.

기본적인 티스토리 설정은 이제 마무리 단계입니다.

조금만 더 힘내시고 따라오세요.

오늘 하루도 수고하셨습니다.