안녕하세요. 오늘은 티스토리 오디세이 스킨의 제목에 적용되는 배경사진을 제거하는 방법과 제목의 높이, 글씨 크기, 높이, 색깔 변경 등 간단한 제목 꾸미기 설정에 대해 알아보겠습니다.
오디세이 스킨은 다 좋은데 제목에 대표사진이 들어가는 게 단점인 거 같아요. 제목에 배경사진이 잘려서 들어가니 예뻐 보이지도 않고, 사진을 로드해야 하다 보니 글의 전체적인 로딩시간이 늘어나 유입을 줄어들게 할 수 있으니, 제목에 배경을 제거하는 게 훨씬 더 깔끔합니다.
오디세이 스킨 제목 배경 제거할 수 있는 간단한 방법을 알려드릴게요.
오디세이 스킨 제목 배경 사진 제거 방법
1) 티스토리 설정 페이지에서 [꾸미기] > [스킨 편집]을 클릭합니다.
2) 오른쪽 상단에 있는 스킨 편집 창에서 [html편집]을 클릭합니다.
3) 티스토리 스킨을 꾸밀 수 있는 CSS를 클릭합니다.
CSS코드에 오디세이 스킨의 모든 꾸미기 설정들이 코딩되어 있습니다. CSS를 모르는 사람이라면 원하는 대로 티스토리를 꾸미기 힘든 거 같아요.
4) CSS편집 창에서 Ctrl+F를 눌러 [article-header]를 찾아줍니다.
area-view > article-header 부분이 모두 글의 제목을 꾸밀 수 있는 설정을 해 둔 부분이라고 생각하시면 됩니다. 기본 설정은 다음과 같고요.
5) 제목 배경을 제거하기 위해서 사진처럼 article-header 안에 아래 코드를 복사해서 붙여 넣기 합니다.
background-image: none !important;
짠! 제목 배경을 없애기만 해도 타이틀이 깔끔해졌어요.
기본적인 회색 배경으로 변경되었는데, 글씨 크기나 색깔, 여백, 제목 높이 등 다양하게 변경하고 싶으신 분들을 위해 몇 가지 설정을 추가로 알려드릴게요.
오디세이 스킨 제목 꾸미는 방법
저도 티스토리를 하면서 css를 처음 접하다 보니 걸음마 단계이지만, 간단하게 설정할 수 있는 것부터 알려드릴게요.
1) area-header에 있는 width, height 값으로 타이틀이 있는 회색 배경 화면의 크기를 조절할 수 있습니다.
2) before의 background-color에서 배경 색상을 변경할 수 있고, inner-header의 color에서 제목 폰트의 색상을 변경할 수 있습니다.
3) title-article에서는 제목이 회색 배경 안에 있는 위치를 변경할 수 있어요. margin에서 설정되어 있는 33px라는 숫자가 높아질수록 제목이 더 위로 올라갑니다. font-size는 제목의 폰트 사이즈를 설정할 수 있습니다.
위 설정으로 원하는 색상과 크기로 타이틀을 설정하실 수 있을 거예요. 티스토리를 예쁘게 꾸미려면 코딩 공부도 해야 하는 산 넘어 산이지만.. 배우는 재미도 있긴 하네요. 이상으로 오디세이 스킨 제목 배경 없애는 방법과 제목 꾸미기 설정 방법에 대해 알려드렸습니다. 도움이 되셨길 바랍니다 :)
'프론트엔드 개발 > 티스토리 공부' 카테고리의 다른 글
| 구글 애드센스 16일만에 승인 받은 후기 (0) | 2023.05.31 |
|---|---|
| 티스토리 포스팅 글자수 세기, 맞춤법 검사 방법 (0) | 2023.05.01 |