html 편집에 대해 잘모르더라도 크롬의 요소 검사 기능을 적극 활용하면 정확히 어느 부위를 지워야할지 추가해야할지 충분히 알 수 있다.

 

아마도 티스토리 반응형 스킨 중에 'fastboot'를 사용 중인 분들이 상당히 많지 않을까?


 

화려하고 예쁘게 꾸미는 것보다는 불필요한 부분은 과감히 없애서 깔끔하게 만드는 것이 블로그 로딩속도와 방문자 이탈률 방지에도 도움이 된다고 생각된다.

 

티스토리 반응형 스킨 fastboot 하단부

티스토리 fastboot 스킨 1.6.2버전의 하단 부는 위와 같이 생겼다. 그런데 제일 우측을 보면 'tistory links'라는 항목이 보이는데..사실 이건 한 페이지에서 중복되는 부분이다.

 

상단 메뉴에도 있고 좌측에 숨겨진 메뉴 속에도 있기 때문이다. 내 입장에선 이런 부분도 불필요했기에 삭제하기로 했다.

 

구글 크롬의 요소 검사 기능

크롬 요소검사로 그 부분이 구체적으로 어디인지 확인해봤더니 hmtl의 푸터(footer)안에 있더라. 화면속에 빨간색 테두리가 바로 저 부분이다.

 

크롬의 요소 검사 기능으로 위치찾기

또 한 가지 삭제 처리를 해야 할 부분은 '블로그 링크' 자리가 없어진 그 자리가 공백으로 남게 되는데 그 부분까지 없애야만 위 화면처럼 좌우로 깔끔해진다.

 

위치를 확인해보니 fastboot.css 파일 속의 'col-md-4'의 width가 33.33333%로 적용되어 있다. 바로..이 부분을 제거하면 된다. (물론 css파일 안에서 수정해서 따로 저장해야 함)

 

fastboot 스킨 푸터 '블로그 링크' 없애기

 

 

티스토리 스킨 html 편집 화면

이번엔 실제로 수정해야 할 티스토리 스킨 편집 html 화면이다. 저 부분을 삭제해주면 푸터의 '블로그 링크' 항목을 제거할 수 있다.

 

티스토리 스킨 파일업로드 하기

크롬 요소검사에서 수정해서 저장한 fastboot.css를 '파일업로드' 화면에서 올리면 되는데.. 당연히 그 전에 기존 파일은 삭제해야 한다.

 

로렌과 오뚜막 블로그 스킨 최하단 부분

스킨 편집후 저장하면 위와 같이 fastboot 스킨의 푸터부분이 깔끔하게 바뀐다^^ 하단부의 블로그 링크 부분이 불필요하다면 이렇게 없애면 된다. (편집전에 백업은 필수!)

 

✅fastboot 스킨 '인용구' 색깔, 글씨 변경하기

 

fastboot 스킨 '인용구' 색깔, 글씨 변경하기

블로그를 운영하면서 티스토리 기본 기능인 '인용구' 넣기는 거의 사용해보지 않았던 것 같다. fastboot 스킨으로 갈아탄 후, 조금 다른 스타일로 글쓰기를 해보려고 인용구를 넣어봤는데.. 미리보

gong6587.tistory.com

✅fastboot 스킨 고정된 상단바 해제 방법

 

fastboot 스킨 고정된 상단바 해제 방법

대부분의 티스토리 반응형 스킨을 보면, 데스크탑, 모바일 페이지 모두 블로그 이름, 메뉴와 검색창이 포함된 상단바가 스킨 제일 윗부분에 무조건 고정되어 있다. 'fastboot' 스킨도 마찬가지다.

gong6587.tistory.com

✅티스토리 웹반응형 스킨 'fastboot' 다운로드와 적용기

 

티스토리 웹반응형 스킨 'fastboot' 다운로드와 적용기

지난 주말경(3월 8일~9일)쯤...또 다시 티스토리 블로그 스킨을 변경했습니다^^ 평소에 로렌과 오뚜막 블로그를 자주 방문해주시는 분들은 아셨을테지만..스킨이 완전 달라졌죠? 이전과 마찬가지

gong6587.tistory.com

그리드형