[티스토리] Flatinum 스킨 '글 제목' 영역 수정

---

[Flatinum 스킨 '글 제목' 영역 수정]

아래의 그림처럼 Flatinum 스킨의 '글 제목' 영역은 영어를 사용하게 되면 자동으로 대문자로 바꿔주도록 되어있습니다. 또한 제가 느끼기에는 '글 제목' 영역의 높이가 조금 높습니다. 이번 포스팅에서는 이 두개를 수정해보도록 하겠습니다.

▲ '글 제목' 영역에서 수정할 항목

(제목에 폰트는 '나눔 고딕'으로 바꿔놓은 상태)

---

'글 제목' 대문자 변환 제거

▲ CSS 편집화면에서 '글 제목' 대문자 수정 부분

영어 텍스트를 대문자로 바꿔주는 부분은 CSS 편집화면에서 'uppercase'라는 키워드로 검색하시면 딱 하나 나오게 됩니다. 이 부분을 주석처리 해주면 간단하게 처리가 됩니다. 위의 그림에서는 제가 '나눔 고딕'으로 바꾸고 폰트 두께를 700에서 800으로 변경해준 내용도 있습니다. (이렇게만 작성하면 '나눔 고딕'으로 변경되지 않습니다. 별도의 다른 코드도 넣어주어야 합니다.)

---

'글 제목' 영역 높이 줄이기

▲ HTML 편집화면에서 '글 제목' 부분

'글 제목' 영역의 높이를 줄이기 위해서 해당 영역에 id를 할당해야 합니다. 애초에 '글 제목' 영역에 id가 할당되어 있는 상태라면 그 id를 사용하면 되지만 초기 Flatinum 스킨에는 할당된 id가 없습니다. HTML 편집화면에서 [티스토리] Flatinum 스킨 '글 제목' 영역 수정로 검색하시면 위의 그림과 같이 소스 코드가 나오는 데 거기서 저는 'contentTitle' 이라고 id를 할당하였습니다.

▲ CSS 편집화면에서 '글 제목' 높이 설정

그런 다음, CSS 편집화면으로 넘어와서 적당한 곳에 위의 그림과 같이 입력해주었습니다. 위치는 특별한 제약은 없는 것 같으나 저는 나중에 편집할 때 찾기 쉽게 하기 위해서 #content라는 기존의 코드 밑에 넣어두었습니다. 이런 식으로 id를 추적하여 속성값들을 변경해주는 것을 몰라 한참 코드를 뒤적거리다가 발견했네요. 아래 그림은 높이를 조절하기 전과 후를 비교한 것입니다. 하나만 놓고 보면 잘 몰랐는데 두개를 나란히 놓고 보니 조절된 것이 느껴지네요.

▲ '글 제목' 영역 높이 수정 결과

---

관련 포스팅

[티스토리] Flatinum 스킨 수정 시리즈

---

유익한 시간되셨다면 하단에 공감 버튼을 눌러주세요.

여러분의 공감은 저에게 큰 힘이 됩니다.