블로그 밑줄 꾸미기 – 형광펜,물결, 글 선택 색상 변경
블로그 밑줄 꾸미기 그리고 글 선택시 색상 바꾸는 방법을 알아보겠습니다. 저는 글 강조를 위해 밑줄에 색상과 두께를 넣어서 적용합니다. 그리고 글을 읽을 때 마우스로 글을 드레그 하면서 읽는 편이라 이때 적용되는 색상을 바꾸는 방법도 알아보겠습니다.
블로그 글자 꾸미기 코드 넣는 방법
블로그 글자의 밑줄과 글을 드레그하여 선택할 경우 나타나는 색상을 변경하는 방법입니다. 코드를 넣는 곳은 워드프레스의 외모 – 사용자 정의하기 – 추가 CSS 에 아래의 코드를 입력합니다.
블로그 밑줄 꾸미기 코드
형광펜
블로그 밑줄은 보통 까만색 한줄로 표시됩니다. 저는 두께도 있고 색상도 있는 밑줄을 사용중입니다.
- text-decoration-line:none; 밑줄을 표시하지 않습니다.
- padding:2px 5px 글자의 아래와 양옆의 형광펜 밑줄 여백입니다.
- background:linear-gradient 색상과 형광펜의 두께를 설정합니다.
u{text-decoration-line:none; padding: 2px 5px; background: linear-gradient(to top, #ccff00 40%, transparent 40%);}물결 밑줄
아래의 코드는 물결 밑줄 입니다. 물결 밑줄은 아래와 같이 표시됩니다. 예전에 티스토리 블로그에서 사용한적 있는데 깔끔하게 강조할수 있어서 좋은것 같습니다.
u{text-decoration-style: wavy; text-decoration-color:#0a64c9; text-decoration-thickness:0.08em; }워드프레스 블로그에서 밑줄 사용방법
저는 코드를 u 를 써서 바꾸었습니다. 워드프레스에서 글 선택 후 옵션html 편집으로 들어가 글과 글 사이에 <u> </u> 코드를 입력합니다.
그냥 밑줄을 넣을 경우 다른 코드가 적용되기 때문에 내가 설정한 형광펜이나 물결 밑줄이 나오지 않고 일반적인 밑줄이 나옵니다.
글선택 색상 바꾸는 방법
아래의 코드는 블로그 글에서 텍스트를 드래그 했을때 나타나는 글 배경 색상을 바꾸는 방법입니다. 제 글을 드레그 해 보시면 형광펜색상으로 바뀌는것을 확인할 수 있습니다.
색상은 #ccff00 부분을 바꾸어주면 됩니다.
::-moz-selection { color: #000; background-color: #ccff00; }
::selection { color: #000; background-color: #ccff00; }글선택 색상 바꾸는 것은 제가 글을 읽을때 드래그 해서 배경 색상을 바꿔서 읽으면 더 잘 읽혀서 바꾸는 것인데 보통은 블로그에 오른쪽마우스 클릭 방지가 되어 있어 글 선택도 되지 않습니다.
그래도 저처럼 글을 드래그 해서 읽기 편한분들이 계실것 같아서 바꾸었습니다.
✓ read more URL 삭제방법(#more) 워드프레스 더보기 버튼