블로그 운영/블로그 고급설정

티스토리 형광펜 언더라인 본문에 넣어 가독성 높이자

Oliviamy 2024. 3. 12.
반응형

오늘은 티스토리 본문에 언더라인 칠하기, 형광펜 밑줄긋는 방법을 알아 보도록 하겠습니다. 블로그의 트래픽은 높지만 유지 시간은 낮은 것이 걱정되신다면 유지 시간을 늘리는 방법 중에는 형광펜 효과를 사용하여 텍스트를 읽기 쉽게 만들어 가독성을 높이는 것이 훨씬 더 효과적입니다. 응용프로그램이 간단하므로 가독성을 높이려면 천천히 진행하세요.

블로그 형광펜효과

1. 티스토리관리 스킨편집 메뉴

하이라이터 효과를 적용하려면 CSS 코드를 다운로드하여 복사하고 스킨 편집 CSS 모드에서 원하는 위치에 배치한 다음 적용하고 게시하면 됩니다. 밑줄에 형광펜이 적용된 것을 볼 수 있습니다. 먼저 티스토리 홈페이지에 접속하셔서 관리자 모드로 들어가주세요. 이는 티스토리 관리 - 스킨편집 으로 들어가셔서 'CSS'편집으로 들어 가시면 됩니다.

 

 

2. 스킨 편집에 들어갑니다.

나의 티스토리 홈페이지에서 스킨 편집이 가능합니다.

3. HTML 편집 모드로 들어갑니다.

스킨 편집에 들어간 후 HTML 편집 모드로 들어갈 수 있습니다. 이것을 편집하려면 HTML로 이동하세요.
HTML을 편집하려면 클릭하세요.

 

 

4. CSS 모드로 진입

HTML 편집 모드에 진입하면 HTML, CSS, 파일 업로드 항목이 있으며, CSS 모드로 진입할 수 있습니다.

 

 

5. 밑줄 형광펜 CSS 코드 다운로드

아래 CSS 코드 파일을 다운로드한 후, 아래 빨간색 박스 안의 코드 블록을 복사(ctrl+C)하세요.

코드를 사용하여 사진 보관
다운로드한 파일에서 코드를 복사합니다.

 

형광펜 밑줄 CSS코드.txt
0.00MB

 

 

6. 다운로드한 코드를 CSS 창에 붙여넣기

다운로드한 파일 코드를 CSS 모달 창에 입력하고 원하는 위치에 붙여넣기(ctrl+V)하세요. 삭제하기가 두려워 맨 밑에 복사해 두었습니다. 참고로 저는 북클럽 스킨을 사용하고 있으며, 아래 코드에서 -9px는 밑줄 굵기를 조절할 수 있는 항목이고, 컬러박스는 밑줄 형광펜을 변경할 수 있는 항목입니다. 색상이나 밑줄 굵기를 변경하고 싶다면 이 부분을 변경하시면 됩니다. 화면 코드를 복사하여 CSS 창에 붙여넣으세요. 

 

 

7. 코드를 붙여넣고 적용한 후 새로고침하세요.

코드를 복사하여 붙여넣고 적용하고 다시 로드하면 게시된 밑줄 효과가 형광펜 밑줄로 변경됩니다. 완료되면 "적용" 버튼을 클릭하세요. 신청 후 새로고침 누르기로 완료 됩니다.

 

8. 글쓰기 편집 모드에서 밑줄 적용

밑줄 형광펜 코드가 올바르게 적용되었는지 확인하려면 아무 게시물에나 쓰기 모드로 진입한 후 편집 모드로 들어가서 밑줄 효과를 적용해 보세요. 편집 모드에서는 밑줄 효과가 그대로 적용됩니다. 게시물을 공개로 설정하고 게시하면 밑줄이 형광펜으로 변경됩니다. 테스트 화면 밑줄 쓰기 모드에서 편집 모드로 이동하여 밑줄 테스트를 확인합니다.

 

 

9. 공개 후 확인

공개 게시물을 작성한 후 해당 게시물에 들어가면 편집 모드의 밑줄이 형광펜으로 변경된 것을 확인할 수 있습니다. 색상과 굵기 모두 조절 가능해서 취향에 맞게 변경 가능해요. 콘텐츠를 게시한 후에는 실제로 작동하는지 확인하세요.

반응형

댓글

💲 추천 글