[티스토리]Poster 스킨 꾸미기 1편 - 불편한 점 바꾸기

일단 밑의 링크 윗부분은 읽기고 오심을 추천드립니다

https://korearaogong.tistory.com/36

[블로그]자신의 티스토리 블로그 스킨/테마 쉽게 글씨크기 바꾸는 방법

Poster는 모바일 용으로 디자인 된게 아닌가 싶습니다 하지만 모바일로 접속해도 네이버 블로그 처럼 레이아웃이나 스킨이 전 티스토리 블로그가 동일합니다 고로 모바일이 아닌 기기에서 보는 것을 바꾼다고 보시면 되겠습니다

햄버거 설정

햄버거 버튼 고정

1. #header .mobile-menu <--를 복사 합니다

2. html편집에 들어가서 CSS부분에서 찾기를 해줍니다(위 링크에 설명있습니다)

3. #header .mobile-menu 밑에 있는 

position: absolute;

이였던 것을

position: fixed;

로 바꿔줍니다

햄버거 버튼 배경주기

햄버거 버튼이 본문과 섞여서 보기 않좋아서 배경색을 줍니다

1. 1~2 동일

2. background-color: rgba(255, 255, 255, 0.8); <-추가(흰색 투명도 80프로)

색을 바꾸고 싶으신 분들은

본문 상단 링크의 1~4번까지 따라 한뒤 색버튼을 클릭해서

원하는 색으로 바꾼 뒤 복사해서 쓰시면 됩니다

투명도를 변경하고 싶으신 분들은 0.8이 80%를 의미합니다 이 부분을 바꿔주시면 됩니다

 

햄버거 버튼 눌렀을때

햄버거 버튼을 누르면 왼쪽 사이드 바가 나타나며 사진처럼 본문은 회색 바탕이 되고 본문은 사이드바 만큼 가려집니다

즉 사이드바의 오른쪽 부분은 쓸대없는 공간이 되버려서 이부분도 살려보았습니다

 

1. html편집에 들어가서 CSS부분에서 찾기를 해줍니다(위 링크에 설명있습니다)

2. dimmed를 찾아서 background-color 한줄을 지워줍니다

script.js

0.01MB

3. 위의 첨부파일을 다운 받습니다

4. 파일업로드 탭으로 들어가 가장 밑에 있는 script.js 선택 - 삭제 해서 지워줍니다

5. 추가버튼을 눌러 3에 있는 파일을 추가해 줍니다

 

사이드 바 내용 변경

 

왼쪽 : 현재 저의 블로그 / 오른쪽 : 기본으로 사용하시는 다른 블로그

스크롤 바 바꾸기

기본 스킨은 카테고리가 많아지면 작은 카테고리 칸안에 스크롤바가 생깁니다 이 스크롤 바부터 벗어나 보겠습니다

 

1. html편집에 들어가서 CSS부분에서 찾기를 해줍니다(위 링크에 설명있습니다)

모바일과 PC 두개를 바꿔줘야 됩니다

2. #header .menu를 찾습니다

3. 안의 padding값에서 189를 0으로 바꿔줍니다

pc버전 이것과 -> padding: 94px 40px 189px;

모바일버전 이것으로 -> padding: 84px 20px 189px;

검색해도 됩니다

 

이렇게 하면 메뉴(사이드)바에

와 카테고리(메뉴)와 글씨가 겹치게 됩니다

어차피 본문 풋터에

티스토리가 있습니다

지우거나 변경하시면 됩니다

 

사이드 바안의 티스토리 지우거나 변경하기

지우기

1. html편집에 들어가서 HTML부분에서 찾기를 해줍니다

2. POWERED BY TISTORY를 검색해줍니다

3.<p>POWERED BY TISTORY</p> 를 지워줍니다

 

변경하기

1. html편집에 들어가서 CSS부분에서 찾기를 해줍니다

2. #header .menu p를 검색해 줍니다(모바일도 있어서 2개 입니다)

3. { } 안의 내용을 변경해 줍니다 위치 변경은 top와 left입니다

 

사이드 바에 광고 넣기

Poster 스킨의 메뉴(사이드)바는 사이드 바가 아닌 그냥 위로 덮어쓴 요소일 뿐입니다

그래서 티스토리 관리에서는 사이드바에 광고를 넣을 수 없습니다

 

1. html편집에 들어가서 HTML부분에서 찾기를 해줍니다

2.<div class="menu" id="gnb"> 내용을 찾습니다

3.광고 선택 및 광고 코드 복사

https://korearaogong.tistory.com/37

[광고 달기]3.애드센스, 애드핏 직접 광고 달아야 돼는 이유와 1개이상 광고 달기

수직형을 하나 만들어서 코드를 복사합니다

4. <div class="menu" id="gnb">밑 </div>위 적당한 위치에 광고 코드를 넣어줍니다