티스토리 타이틀 제목 박스 만들기

티스토리 타이틀 제목 박스를 만들어 조금 더 깔끔하고 가독성 좋은 블로그로 편집해 보세요. 가독성이 좋으면 방문객들의 체류 시간이 조금 더 길어지는 효과를 볼 수 있습니다. 쉬게 설명되어 있으니 HTML코드만 복사하셔서 사용하셔도 됩니다.


티스토리 타이틀 제목에 박스나 라인을 넣는 방법을 쉽게 알려드리겠습니다. 간단하게 서식을 활용하셔도 되고, 귀찮더라도 메모장에 html 코드를 저장해 놓고 사용하셔도 됩니다.


티스토리 타이틀 제목 박스 만들기 섬네일



1. 티스토리 타이틀 제목 박스 및 라인

티스토리 타이틀 제목 박스 3가지를 알려드리겠습니다. 내용을 확인해 보시고 색상이나 박스 크기 등을 변경하여 본인에게 적합하게 변경하여 사용하시면 됩니다.


1-1. 말풍선 박스

<p class="txc-textbox" style="background-color: #dbe8fb; border-radius: 15px 15px 0px 0px; padding: 7px; font-weight: bold;" data-ke-size="size16">제목</p>

색상변경을 위해서는 ‘background-color: #dbe8fb’ 부분의 #dbe8fb 이 부분을 각 컬러에 맞는 코드를 넣어주시면 됩니다. 색상을 쉽게 찾는 방법은 네이버 ‘색상코드’에서 검색하셔서 찾으시면 됩니다.


그리고 사각 박스의 위쪽 라운드부분 및 아래쪽 각진 부분은 ‘border-radius: 15px 15px 0px 0px’ 여기서 변경하시면 됩니다. 15px 15px 0px 0px 첫번째부터 좌상 우상 우하 좌하 순서입니다.

예를 들어 border-radius: 15px 15px 15px 0px 로 변경하게 되면 아래와 같은 모양이 됩니다.

말풍선 박스 변형


본인 원하는 모양대로 변형하면 됩니다. 그리고 15px는 곡선의 모양입니다. 즉, 숫자가 낮을수록 직각에 가까워 지고 숫자가 커 질수록 원형에 가깝게 됩니다.

‘padding: 7px’는 말풍선 두께입니다. 숫자가 커질수록 두께가 두꺼워 집니다.

내가 적을 글제목은 위 ‘제목’ 부분을 삭제하고 본인이 원하시는 제목 내용을 적으시면 됩니다.


1-2. 색상없는 사각 라운드 박스

색상없는 사각 제목 박스
<p style="border: 2px solid #688FF4; border-radius: 5px; padding: 10px; font-weight: bold;" data-ke-size="size16">제목~</p>

깔끔한 색상없는 사각 라운드 박스입니다.

‘border: 2px’ 박스 라인 두께입니다. 숫자를 변경하면 두께를 조절할 수 있습니다.

‘solid #688FF4’ 라인 색상 코드 입니다.

‘border-radius: 5px’ 모서리 부분 곡률입니다. 숫자를 변경하면 곡률을 조절할 수 있습니다.

‘padding: 10px’ 박스 세로 길이 입니다. 숫자를 변경하면 길이를 조절할 수 있습니다.


1-3. 라인

라인 글제목 서식
<p style="border-left: 10px solid #688FF4; padding: 8px; border-bottom: 2px solid #688FF4; font-weight: bold;" data-ke-size="size16">제목~</p>

좌측 강조 라인과 하단 라인으로 깔끔함을 강조한 라인 제목 박스입니다.

‘border-left: 10px’ 왼쪽 세로 라인 두께입니다. 숫자를 변경하면 두께 조절할 수 있습니다.

‘solid #688FF4’ 왼쪽 세로 라인 색상 코드입니다.

‘padding: 8px’ 왼쪽 세로 라인 길이 입니다. 숫자를 변경하면 길이를 조절할 수 있습니다.

‘border-bottom: 2px’ 하단 라인 두께입니다. 숫자를 변경하면 두께를 조절할 수 있습니다.

‘solid #688FF4’ 하단 라인 색상 코드입니다.



2. 티스토리 서식에서 타이틀 제목 만들기

티스토리 블로그관리에서 서식으로 위에서 티스토리 타이틀 제목 박스를 설정을 해 놓으면 블로그 작성 시 편안하게 사용할 수 있습니다. 어떻게 서식에 설정을 하는지 알아보겠습니다.

먼저 블로그관리 홈에서 콘텐츠 서식관리를 클릭해 줍니다.


티스토리 블로그관리 홈 콘텐츠 서식관리 클릭


서식관리를 클릭 후 우측 상단 서식 쓰기를 클릭해 줍니다.


티스토리  서식관리 페이지


서식 쓰기 클릭 후 우측 기본모드를 HTML로 변경해 줍니다.


티스토리 서식쓰기 페이지


HTML화면에서 본인이 사용하고자 하는 타이틀 제목의 HTML코드를 복사하여 숫자1 옆에 붙여넣기 해 줍니다.


티스토리 서식 HTML화면


붙여넣기를 하셨으면 본인이 원하는 색상이나 선의 두께 등을 설정 해 줍니다. 설정이 완료됐으면, HTML모드에서 기본모드로 변경해 줍니다.


티스토리 서식 완료페이지


기본모드로 변경하셨으면 본인이 알 수 있는 제목을 넣어주시고 우측 하단 완료 버튼을 눌러주시면 완료됩니다.

위와 같이 티스토리 타이틀 제목 박스를 만들어 사용하게 되면 글을 읽는 독자들의 가독성이 증가하여 블로그 체류 시간을 증가시킬 수 있는 장점이 있습니다.



▶ 워드프레스를 이용해 블로그를 운영하신다면 워드프레스 소제목 스타일 만들기를 함께 참고하시면 블로그 운영하시는데 도움이 될 것 입니다.

워드프레스 소제목 스타일 만들기




Leave a Comment