무료 워드프레스 테마인 Shamrock 테마에서 링크 컬러를 변경하는 방법에 대해 살펴보겠습니다. 워드프레스에서 텍스트 색상은 테마 사용자 정의하기에서 옵션을 제공하는 경우 수월하게 색상을 지정할 수 있습니다. 그렇지 않은 경우에는 기초적인 CSS를 사용하여 변경이 가능합니다.
워드프레스 Shamrock 테마
Shamrock 테마는 워드프레스 관리자 페이지 > 테마 디자인 > 테마에서 새로 추가 (Add New)를 클릭하고 검색하여 설치할 수 있습니다.
Shamrock은 현재 5,000개 이상 사이트에 설치되어 있고 2018년 8월에 최종 업데이트되었습니다.
무료 테마를 원하는 경우 가급적 최근에 업데이트된 테마를 선택하면 좋을 듯합니다. 심플하면서 속도가 빠른 워드프레스 테마를 찾는 경우 OceanWP, Astra, GeneratePress와 같은 테마가 괜찮은 선택일 수 있습니다.
이 블로그에는 현재 GeneratePress 테마가 사용되고 있습니다. 수익형 블로그를 운영하려는 경우 심플한 레이아웃으로 사이트를 만들고 키워드 분석을 통해 단가가 높은 키워드를 발굴하여 글을 작성하면 도움이 될 것입니다.
Shamrock 테마에서 링크 컬러 변경하기
아바다 등과 같은 테마에서는 색상과 글자 크기를 세부적으로 설정할 수 있는 옵션을 비롯하여 다양한 테마 옵션을 제공합니다.
무료 테마에서는 설정할 수 있는 항목이 많지 않을 수 있습니다. Shamrock 테마에서는 간단한 CSS 코드를 사용하여 링크 색상을 변경할 수 있습니다.
Shamrock 테마의 경우 링크 텍스트의 색상이 본문 글자색과 동일하고 빨간색 밑줄이 그어져 있습니다.
대시보드 > 테마 디자인 > 사용자 정의하기 > 추가 CSS에 다음과 같은 코드를 사용하여 링크 색상을 바꿀 수 있습니다.
/* Shamrock 테마에서 링크 텍스트 색상 변경하기 */
/* Change a anchor text color in the WordPress Shamrock theme */
.entry-content a {
color: #1e90ff !important;
}
.entry-content a:not(.more-link):not(.wp-block-button__link) {
background: none;
}
.entry-content a:hover {
color: #ff5050 !important;
}컬러값은 원하는 값으로 변경하시기 바랍니다. 컬러 코드는 HTML Color Picker 문서에서 확인하면 편리할 것입니다.
마치며
워드프레스를 제대로 운영하려면 먼저는 기본적인 사용법을 익히는 것이 중요한 것 같습니다. 기초적인 사용법을 모르는 상황에서 시작할 경우 시행착오를 겪다가 포기할 가능성이 높을 것입니다.
그리고 CSS를 조금 알면 커스텀하기가 조금 용이해질 것입니다. 티스토리 블로그나 그누보드 등을 이용하더라도 CSS를 알면 도움이 됩니다.
위의 코드로 빨간색 밑줄이 없어지지 않으면 두 번째 부분을 다음 코드로 대체해보시기 바랍니다.
.entry-content a:not(.more-link):not(.wp-block-button__link) {
background: none !important;
}