티스토리 제목 꾸미기 및 디자인 변경하기
티스토리 블로그를 운영하다보면 제목1, 제목2, 제목3을 보았을때 밋밋하다고 느끼시는 분들이 있습니다.
그런분들을 위해 오늘 포스팅을 준비하였는데요.
제가 작성한 포스팅을 따라하시면서 제목을 마음에 들게끔 변경하셨으면 좋겠습니다.
티스토리 제목?
티스토리 제목1, 제목2, 제목3 은 html이라는 코드에서 <h2>,<h3>,<h4>로 표기되어있습니다.
<h1>은 메이 제일 위의 제목이 h1입니다.
그래서 저희는 티스토리 스킨 편집의 html 영역 옆에 디자인을 담당하는 css라는 탭에서 설정을 진행하겠습니다.
추가로 하단에서는 서식을 만들어서 글마다 이쁜 글을 작성할 수 있도록 해보겠습니다.
티스토리 제목 꾸미는 방법
1. 스킨편집을 통한 제목 꾸미기
2. 서식을 만들어서 글마다 제목을 꾸미기
스킨편집을 통한 제목 꾸미기
1. 티스토리 관리자 페이지로 들어가서 스킨편집을 클릭합니다.
2. html 편집을 클릭합니다.
3. css탭으로 이동을 한 후 'entry-content h3' 을 찾아줍니다.
4. 아래의 그림과 처럼 입력을 해줍니다. 입력후에 적용을 클릭해줍니다.
5. 그러면 다음과 같은 디자인이 제목1에 적용이 됩니다.
6. 코드의 설명을 다음과 같습니다.
border-style: solid; → 선 모양
border-width : 0px 0px 2px 15px; → 선 굵기 순서는 위 오른쪽 아래 왼쪽
border-color: #0aecb3; → 선 색깔
background-color: #fff; → 배경 색상
padding: 6px; →간격
7. 선스타일은 아래의 표를 보고 설정할 수 있습니다.
| 직선 | 동그란 점선 | 네모 점선 | 두줄선 |
| solid | dotted | dashed | double |
8. 선의 위치는 아래의 표를 보고 설정 할 수 있습니다.
| 왼쪽 선 | 오른족 선 | 위쪽 선 | 아래쪽 선 |
| border-left | border-right | border-top | border-bottom |
9. 다음의 디자인은 아래처럼 입력후 적용을 클릭해줍니다.
10. 그러면 다음과 같은 결과를 확인할 수 있습니다.
11. 코드의 설명은 다음과 같습니다.
color : rgb(255,255,255); -> 글자색
padding: 15px 20px; - >내부 여백(상하 / 좌우)
background-color: #5f76f3; -> 배경색
border-radius: 25px 5px 25px 5px; -> 라운드 크기
12. 더이쁘게 그라데이션을 넣으려면 다음과 같이 하면 됩니다.
13. 그러면 그라데이션이 들어간 제목을 확인 할 수 있습니다.
14. 그라데이션을 넣는 코드는 다음과 같습니다.
background: linear-gradient(to right,#ebeff5,#e927e9);
서식을 만들어서 글마다 제목을 꾸미기
1. 티스토리 관리창에서 콘텐츠의 서식과리를 클릭해줍니다.
2. 다음으로는 서식쓰기를 클릭해줍니다.
3. 기본모드를 클릭하여 html로 바꿔줍니다.
4. 다음과 같이 아래의 코드를 입력합니다.
<h3 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #000000 2px solid; margin: 10px 0px; border-left: #000000 10px solid; letter-spacing: 1px; line-height: 2; border-top-width: 0px; padding: 3px 5px 3px 5px;"><b>돈을많이벌자</b></h3>
5. 입력한 후에 기본모드로 돌아와줍니다.
6. 다음의 그림처럼 변경이 된것을 확인할 수 있습니다.
7. 이제 다른디자인으로 html모드로 들어간뒤 아래의 코드를 입력해줍니다.
<h3 style="background-color:#6c7ae0; color:#fff; font-size: 22px; font-weight: bold; margin-top: 30px; margin-bottom:15px; padding: 15px 20px; border-radius: 25px 5px 25px 5px;">돈을많이벌자2</h3>
8. 그러면 다음과 같은 제목을 확인 할 수 있습니다.
지금까지 css 편집과 서식쓰기를 통해 제목을 꾸며보았습니다.
위의 방법을 통해 글을 작성하면 이쁜 제목을 만들수 있습니다.
추가로 샘플을 더 공유하니 아래의 코드들을 참고하여 더 이쁜 포스팅을 하시길 바라겠습니다.
스타일1
<h3 data-ke-size="size23"><span style="border-radius: 5em; padding: 0.5em 1em; background: #F2F2F2; box-shadow: 0.2em 0.15em 0.3em #999; margin-left: 5px; font-weight: bold;">돈을많이벌자3</span></h3>
<p data-ke-size="size16"> </p>
스타일2
<h3 data-ke-size="size23"><span style="border-radius: 15px 15px 15px 0; border: 3px solid #FFAD5B; padding: 0.5em 1em; color: #ff8000; font-weight: bold;">돈을많이벌자4</span></h3>
<p data-ke-size="size16"> </p>
스타일3
<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #000000; border-style: dashed; border-width: 1px, 1px, 1px, 1px; border-color: #A9A9F5; background-color: #dce5fb;" data-ke-size="size23"><b>돈을많이벌자5</b></h3>
<p data-ke-size="size16"> </p>
스타일4
<h2 style="padding: 0.5em; margin: 0.5em 0em; color: #8568e1; border-left: 10px solid #8568e1; border-bottom: 2px #8568e1 solid;" data-ke-size="size26"><b>돈을많이벌자6</b></h2>
스타일5
<h2 style="display: inline-block; padding: 0.5em 1em 0.5em 0.5em; margin: 0.5em 0em; color: #05bd6d; border-left:10px solid #05bd6d; background-color: #f2f2f2; border-radius: 0px 20px 20px 0px;" data-ke-size="size26"><b>돈을많이벌자7.</b></h2>
'수익블로그 꿀팁' 카테고리의 다른 글
| 네이버 실시간 검색어 보는법, 이것만 따라하면 확인가능~! 아주 간단합니다~! (0) | 2023.05.31 |
|---|---|
| [수익형 블로그 만들기] 8탄 티스토리 목차 만들기, 목차 생성 (0) | 2023.05.16 |
| [수익형 블로그 만들기] 6탄 티스토리 키워드 찾는 방법, 키워드 찾는것에 힘들어하지 마세요~! (0) | 2023.05.07 |
| [수익형 블로그 만들기] 6탄. 줌, 빙, 다음에 블로그 노출하기 (0) | 2023.04.29 |
| [수익형 블로그 만들기] 5탄. 구글, 네이버에 블로그 노출하기 (0) | 2023.04.25 |
댓글