Tistory 블로그 상단 제목이 너무 길어서 다 표현이 되지 않을 때 보이게 하는 방법

- 목적 : 이 글을 읽고 Tistory 상단의 제목 (로고) 의 사이즈를 적당히 조절하여, 모든 글자가 상단에 표현되게 하려고 함.

 

- 개요 : 블로그를 새로 시작하려다 보니 사이드바 구성을 위한 카테고리 정리부터 시작해서, 오래된 글 삭제, 세밀한 디자인 수정 등 이래저래 정비를 진행하고 있는데, 아래와 같이, 블로그 제목이 일부 숨김처리되는 거슬리는(?) 상황이 발생함. (왼쪽 상단)

 

블로그 제목이 온전하게 표시되지 않는 현상

 

- 해결 과정 : 잠깐의 구글링을 진행해 보니, 갤러리형 게시물에서 블로그 제목이 길 경우 약간의 서식편집에서 CSS 코드 수정을 통하여 원하는 결과를 얻을 수 있다는 정보를 얻게 되어, 이를 유추 적용더니 약간의 개선이 됨.

블로그를 참조하여 그대로 따라하니, 원하는 대로 구현이 되지 않음

간단하게 절차를 설명하자면, 먼저 블로그 제목에 해당하는 부분이 어떤 부분에 속해있는 것인지 파악해야 함. 이를 위해 개발자 도구(F12)를 들어가서 Elements - Layout 으로 들어가서 Flexbox의 Flexbox overlays 에 마우스오버를 하면, 포함되는 부분이 화면에 표기가 되어, h1.title_logo 에 포함되어 있다는 것을 확인하였다. (아래 그림은 수정 후에 설명을 위해 딴 그림이라서, 모두 표기가 되어있음.)

개발자 도구 (F12) 진입 시 참고용 그림

 

 

포함된 위치를 알았으니, CSS를 간단하게 수정하면 된다.

왼쪽의 그림처럼, 블로그 관리 탭으로 들어가서 꾸미기 - 스킨 편집을 클릭 한 후 html 편집을 들어간다.

 

 

 

 

html에서 찾기(ctrl-f) 를 활용하여, title_logo를 확인해보면, 아래와 같이 금방 찾을 수 있다. 또한, 그 위에 header class가 box_header 에 해당하는 것을 확인할 수 있다. 이를 활용하여, CSS 탭에서 다시 찾기를 활용하여 검색을 해 본다.

html 코드 일부 캡쳐 (h1.title_logo)

CSS 코드 중 box_header가 검색되는 부분

여기서, 필자의 경우 실험적으로 수치값 혹은 글자값을 검색을 통해 변경하여 봤음. 결론적으로 목적을 달성하기 위해 건드려야 하는 부분은 .box_header . title_logo 내부에 있는 width (line 470 ~ 471) 의 값을 기본값인 200px에서 400px으로 변경하여 주었더니 해결되었다. 

 

코드 적용 후, 제목 전체가 표현됨

 

이상입니다. 읽어주셔서 감사합니다.