티스토리 기본 스킨 Odyssey 선택 이유와 HTML CSS 편집으로 제목 상단 이미지 배너 출력 없애기

티스토리 기본 스킨 Odyssey 선택 이유와 HTML CSS 편집으로 제목 상단 이미지 배너 출력 없애기

티스토리 블로그는 스킨 html css를 마음대로 수정하여 조절할 수 있어 자유도가 높습니다. 티스토리 스킨 제작자들이 공유하고 있는 다양한 스킨이 있는데요.

스킨을 적용할 때 우선적으로 고려한 부분은 독자가 읽기 편하고 이해하기 쉬운 가독성을 중요하게 생각하였고, 그 다음은 검색엔진 최적화를 고려했습니다. 그래서 최종적으로 후보로 생각한 티스토리 스킨은 2가지였습니다.

1. 티스토리 스킨 선정 이유

하나는 많은 분들이 잘 알고 있는 유명한 무료 스킨인 고래 스킨이고, 다른 하나는 티스토리 기본 스킨은 Odyssey 스킨입니다.

고래스킨의 장점

고래 스킨의 장점은 무료스킨인 점, HTML, CSS 코드, 태그 등 구글, 네이버 엔진 최적화를 시켰다고 하고, 실제로 적용하여 사용한 후 효과를 봤다는 다른 티스토리 블로그의 글들도 꽤 있었습니다. 고래 스킨을 기본으로 하여 적용하시는 분들이 많은데요.

인기 스킨 중 하나인 고래 스킨

보기에도 가독성이 좋고 사이드바 광고 고정이라던가 꾸준한 버그 수정과 업데이트를 꾸준히 지원해주고 있어서 관심이 있던 티스토리 블로그 스킨이었습니다.

관련글도 이미지 섬네일 표시가 가능하고 헤더의 색상 변경이나 반응형 스킨으로 모바일과 PC에서 같은 디자인을 유지할 수 있습니다.

장점이 많지만 티스토리 기본 스킨을 고르게 된 이유가 있습니다.

티스토리 기본 스킨 Odyssey 장점

1. 가독성이 모바일 버전과 PC 버전 모두 마음에 듬
2. 자동목록 js 소스를 공유되고 있음
3. 티스토리 스킨 편집, html이나 css를 잘 모르는 사람에게도 용이함

오디세이(Odyssey) 스킨 기능은 반응형이면서, 스킨 편집란으로 들어가면 기본 설정을 좀 더 자세하게 설정할 수 있습니다. HTML이나 CSS에 대한 이해도가 낮은 상황이라면 이러한 옵션을 좀 더 쉽게 설정할 수 있는 기본 스킨이 유리한 부분이 있습니다.

티스토리 스킨 편집 화면에서 고래 스킨을 적용하였을 경우에는 다음과 같이 표시가 됩니다.

고래 스킨 편집 화면

레이아웃 설정이나 헤더 영역 배경색 선택, 메뉴바 사용, 사이드바 전체 보이기 등을 설정할 수 있습니다. 티스토리 기본 스킨을 적용할 경우 다음과 같이 표시가 됩니다.

오디세이 스킨 설정화면

타이틀 헤더나 PC레이아웃, 타이틀 헤더 변경, 사이드바 형태 변경, 더보기 버튼 설정, 내비게이션 설정, 슬로건 섹션, 배너 섹션, 사이드바 프로필 설정 등을 세부적으로 설정할 수 있습니다. SNS 연결과 푸터에 외부링크, 문구 설정까지 편집할 수 있는 선택지가 높아집니다.

그 밖에도 티스토리 기본 스킨인 오디세이 스킨을 선택한 이유 중 하나가 바로 자동 목차 설정 때문이기도 합니다.

방문자 중에서 티스토리 글을 읽을 때 목차가 있으면 글의 구조를 이해하기 편하고 원하는 부분을 집중적으로 읽거나 바로 이동할 수 있는 목차 설정이 있었으면 했는데요. TOC라고 하여 Table Of Contents js 소스를 이용하여 목차를 만드는 방법이 있습니다.

자동 목차 기능 중에서 모바일 버전에도 적용되는 것을 찾고 있었는데 그러한 기능을 오디세이 티스토리 블로그에 적용하는 방법을 공유하는 글이 있어서 최종적으로 자동 목차 기능의 js가 공유되고 있는 것이 오디세이 스킨을 선택하는데 가장 결정적인 이유가 되었습니다.

기존의 오디세이 스킨 적용 모습, 제목 아래에 이미지가 삽입되어있다

아쉬운 점은 티스토리 글 제목과 이미지가 함께 출력되다보니 이미지에 따라 제목이 잘 눈에 안띄는 것 같은 생각도 들었습니다. 개인적으로 선호하는 크기보다 크다보니 크기를 줄이거나 아예 배경 이미지를 삭제하는 방법을 찾고 있었습니다.

2. 상단 이미지 배너 출력 삭제하는 방법

오디세이 티스토리 블로그 디자인 중에서 글 제목이 별도로 노출되는 상단의 이미지를 편집하고 싶었습니다. 이미지와 제목이 같이 출력되는 것을 편집한 css를 공유하는 분이 있어서 이를 참고하여 수정하였습니다.

참고 출처:suusuus.tistory.com/37

제목이 출력되는 부분의 div class는 'inner-header', 'box-meta', 'title-article', 'box-info'로 구성되어있습니다. 해당 부분의 css를 수정하는 방식입니다.

편집하는 방법 과정을 정리해보았습니다.

(1) 티스토리 관리자 페이지에서 [꾸미기>스킨 편집]을 클릭합니다.

(2) html 편집을 클릭합니다.

(3) css를 클릭합니다.

(4) #tt-body-page .main을 검색합니다.

(※ 특정 문자를 검색하는 방법은 [Ctrl+F] 단축키로 문자 검색이 가능합니다.)

#tt-body-page .main { 
    padding-top: 470px; 
} 

470px;을 40px;로 변경합니다.

@media screen and (max-width: 1060px) { 
    #tt-body-page .main { 
        padding-top: 400px; 
    } 
} 

400px;으로 표시된 것을 40px;으로 변경합니다.

(5) .article-header .box-meta으로 검색합니다.

.article-header .box-meta { 
    position: absolute; 
    bottom: 56px; 
    width: 100%; 
    max-width: 780px; 
    z-index: 2; 
} 

.article-header .box-meta p { 
    margin: 0; 
} 

.article-header .box-meta .category { 
    margin-bottom: 12px; 
    font-size: 14px; 
    font-weight: 600; 
} 

위의 내용을 삭제합니다.

(6) .article-header {을 검색합니다.

.article-header { 아래 보라색 부분을 삭제합니다

position: absolute; 
top: 0; 
left: 50%; 
width: 100vw; 
height: 400px; 
margin-left: -50vw; 
padding: 0 20px; 
background-size: cover; 
background-position: 50% 50%; 

위의 내용을 삭제합니다. 위의 내용을 삭제한 다음에 background-image: none!important;을 추가합니다.

.article-header { 
background-image: none!important; 
} 

이렇게 설정하시면 됩니다.

(7) 아래의 내용 추가하기

.article-header .box-meta .category { 
  margin-bottom: 12px; 
  font-size: 14px; 
  font-weight: 600; 
}
.article-header .title-article { 
  width: 100%;
  max-width: 760px;
  margin: 0 0 33px 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: keep-all;
}
.article-header .box-info { 
  font-size: 13px;
  line-height: 1.54;
  opacity: .7;
}

위와 같이 설정하면 제목 아래에 생성되었던 이미지가 사라지게 됩니다.

편집 후 모바일에서 본 오디세이 티스토리

모바일 버전에서 적용된 부분을 보면 기존과 달리 제목 아래에 이미지가 삭제가 되고 제목 박스 크기도 줄어든 것을 확인할 수 있습니다.

PC버전에서 오디세이 스킨 css변경 후기

PC버전에서도 원하는 대로 티스토리 스킨이 적용되었습니다.