워드프레스를 사용하다가 좀더 가독성을 높일 필요가 있는데요.
이 때에는 스킨에서 밑줄 효과를 수정할 수 있습니다.
워드프레스 밑줄 효과
밑줄은 텍스트에서 밑줄을 선택하면 되는데요. 이때에 기본 밑줄을 CSS 수정을 통해서 변경할 수 있습니다.
먼저 밑줄이 어떻게 동작하는지 알기 위해서 개발자 도구를 통해 코드를 확인합니다.
개발자 코드에서 확인해보니 <span style=”text-decoration: underline;”>이라는 코드로 되어 있는 것을 알 수 있습니다.
그러면 이제 이 코드를 수정하면 되는데요.
chatgpt의 설명에 따르면 text-decoration 속성은 다양한 값을 가질 수 있습니다:
underline: 텍스트에 밑줄을 긋습니다.overline: 텍스트 위에 선을 긋습니다.line-through: 텍스트 중앙에 취소선을 긋습니다.none: 텍스트 장식을 모두 제거합니다.
그래서 이제 이 코드를 수정하면 되는데요. 디자인 – 사용자 정의하기 메뉴로 들어갑니다
그리고 추가 CSS에서 아래의 코드를 추가해줍니다.
span[style*="text-decoration: underline;"] {
text-decoration: none;
display: inline;
box-shadow: inset 0 -10px 0 hsla(53, 90%, 83%, 0.93);
}
그리고 이제 글을 작성할 때 밑줄을 넣으면 동작하게 됩니다. 아래처럼 밑줄에 색이 칠해지게 됩니다.
다만 text-decoration에서 이미 underline이 추가되어 있어서 밑줄과 함께 형광색이 입혀지게 되는 문제가 있는데요.
그래서 이것을 해결하기 위해서 u라는 새로운 태그를 정할 수도 있는데요.
이 경우 텍스트에디터에서 <u> </u>를 입력하면 됩니다.
u
{text-decoration-line:none;
padding: 2px 5px;
background: linear-gradient(to top, #ccff00 40%, transparent 40%);
}이 때에는 에디터에서 강조하기 처럼 코드 편집기로 변경한 다음
<u> </u> 사이에 넣어줘야 합니다.
이 방법의 장점은 아까 밑줄을 수정한것과 달리 언더라인 없이 표시된다는 장점이 있습니다.
그럼 잘 사용하시기 바랍니다.