WordPress에서 링크 색상을 변경하는 방법(초보자 안내서)

최근 게시물 게시판 wordpress WordPress에서 링크 색상을 변경하는 방법(초보자 안내서)

  • WordPress에서 링크 색상을 변경하는 방법을 배우고 싶습니까?

    링크 색상을 변경하면 웹사이트 디자인을 더 잘 제어할 수 있고 방문자가 더 쉽게 탐색할 수 있습니다.

    이 기사에서는 WordPress에서 링크 색상을 변경하는 방법을 단계별로 보여줍니다.

    WordPress에서 링크 색상을 변경하는 이유는 무엇입니까?

    때를 WordPress에 링크 추가, 테마는 링크의 색상을 자동으로 결정합니다.

    때때로 당신의 워드프레스 테마 기본 색상 옵션은 정확히 원하는 것이지만 다른 경우에는 링크 모양을 더 잘 제어해야 합니다.

    예를 들어 비즈니스 브랜드 또는 심벌 마크. 또는 시각 장애가 있는 독자의 웹 접근성을 개선하기 위해 색상 대비를 높일 수 있습니다.

    일부 테마를 사용하면 테마 옵션 패널 또는 워드프레스 테마 커스터마이저, 따라서 CSS로 링크 색상을 변경하기 전에 테마 문서를 확인하십시오.

    즉, 링크 색상을 변경할 수 있는 몇 가지 방법을 살펴보겠습니다. 워드프레스 웹사이트.

    방법 1. CSS를 편집하여 WordPress에서 링크 색상 변경

    WordPress에서 링크 색상을 변경하는 한 가지 방법은 사용자 정의를 추가하는 것입니다. CSS 암호.

    가장 먼저 해야 할 일은 WordPress 관리 대시보드로 이동하여 외관 » 사용자 정의 그런 다음 ‘추가 CSS’ 메뉴 옵션을 클릭합니다.

    추가 CSS에 대한 WordPress 사용자 정의

    그러면 페이지 왼쪽에 사용자 정의 CSS 코드를 추가할 수 있는 화면이 표시됩니다.

    아래 예제의 CSS 코드 조각을 편집기의 이 섹션에 추가합니다.

    추가 CSS 코드 화면 추가

    먼저 전체 링크 색상을 사용자 정의합니다. 이것은 방문자가 이전에 링크를 클릭한 적이 없는 경우에 표시되는 색상입니다.

    아래 CSS 코드를 예로 사용할 수 있습니다.

    
    a {
         color: #FFA500;
    }
    

    이렇게 하면 기본 링크 색상이 주황색으로 변경됩니다. 변경했는지 확인 #FFA500 사용하려는 색상으로 색상을 지정합니다.

    WordPress에서 링크 호버 색상 변경

    다음으로 변경할 사항은 링크 호버 색상입니다. 이렇게 하면 사용자가 링크 위로 커서를 가져가면 색상이 변경되어 주의를 끌 수 있습니다.

    아래 CSS 코드를 예로 사용할 수 있습니다.

    
    a:hover {
         color: #FF0000;
         text-decoration: underline;
    }
    

    위의 코드는 방문자가 링크 위로 마우스를 가져갈 때 링크 색상을 빨간색으로 변경하고 텍스트에 밑줄을 긋습니다. 꼭 변경하세요 #FF0000 원하는 색상으로.

    여기 WPBeginner의 링크에서 링크 밑줄 호버 효과를 사용합니다.

    WordPress 방문 후 링크 색상 변경

    변경할 수 있는 또 다른 사항은 사용자가 링크를 클릭한 후의 링크 색상입니다. 이렇게 하면 방문자가 귀하의 워드프레스 블로그 이미 클릭한 링크를 확인합니다.

    아래 CSS 코드를 사용하여 방문한 링크 색상을 변경할 수 있습니다.

    
    a:visited {
         color: #0000FF;
    }
    

    파란색을 변경했는지 확인하십시오. #0000FF 원하는 색상으로 색상을 지정합니다.

    다음은 위의 모든 CSS 코드가 WordPress 커스터마이저 내부에서 어떻게 보이는지 보여줍니다.

    워드프레스 커스터마이저 코드

    변경한 후에는 ‘게시’ 버튼을 클릭하여 변경 사항을 적용하십시오.

    위의 CSS 코드는 사이트에 있는 모든 링크의 색상을 변경합니다.

    귀하의 사이트에 있는 링크만 사용자 정의하려는 경우 게시물 및 페이지, 다음 코드 샘플을 사용할 수 있습니다.

    
    .entry-content a {
         color: #FFA500;
    }
    
    .entry-content a:hover {
         color: #FF0000;
         text-decoration: underline;
    }
    
    .entry-content a:visited {
         color: #0000FF;
    }
    

    이 코드는 위의 코드 샘플과 동일한 작업을 수행하지만 .entry-content 콘텐츠 내의 링크만 타겟팅합니다.

    WordPress에서 탐색 링크의 색상 변경

    사용자 정의할 수 있는 마지막 링크 스타일은 탐색 메뉴 링크입니다.

    탐색 메뉴 링크 사용자 정의

    자세한 내용은 다음 가이드를 참조하세요. WordPress 탐색 메뉴의 스타일을 지정하는 방법.

    WordPress 테마에 직접 코드를 추가하고 싶지 않다면 CSS 플러그인을 사용하여 웹사이트에 코드를 추가할 수 있습니다.

    그렇게 하면 CSS 변경 사항이 적용됩니다. WordPress 테마 변경.

    가장 먼저해야 할 일은 설치하고 활성화하는 것입니다. 간단한 사용자 정의 CSS 및 JS 플러그인. 자세한 내용은 단계별 가이드를 참조하세요. WordPress 플러그인을 설치하는 방법.

    활성화되면 다음으로 이동하십시오. 사용자 정의 CSS 및 JS » 사용자 정의 CSS 추가 WordPress 관리자 패널에서.

    여기에 위와 동일한 CSS 코드를 추가할 수 있습니다.

    플러그인으로 사용자 정의 CSS 코드 추가

    코드 추가가 완료되면 ‘게시’ 또는 ‘업데이트’ 버튼을 클릭해야 합니다.

    방법 2. CSS 편집 없이 링크 색상 변경

    CSS 파일을 편집하는 데 익숙하지 않다면 이 방법이 적합합니다.

    CSS 코드를 웹사이트에 직접 추가하는 대신 CSS 스타일 플러그인을 사용하여 코드를 작성하지 않고도 사이트를 시각적으로 편집할 수 있습니다.

    우리는 사용하는 것이 좋습니다 CSS 영웅 플러그인. 매우 초보자에게 친숙하며 웹 사이트를 시각적으로 사용자 정의할 수 있습니다. 드래그 앤 드롭 페이지 빌더.

    플러그인이 설치되면 플러그인 목록 위의 ‘제품 활성화 진행’ 버튼을 클릭하여 활성화하고 계정을 연결해야 합니다.

    CSS 영웅 활성화

    그러면 사용자 이름과 비밀번호를 입력할 수 있는 화면으로 이동합니다.

    화면의 지시를 따르기만 하면 계정이 확인된 후 웹사이트로 돌아갑니다.

    다음으로 ‘다음으로 사용자 지정 CSS 영웅‘ 버튼은 WordPress 관리 도구 모음 상단에 있습니다.

    CSS Hero로 사용자 정의

    그러면 CSS Hero가 실행되는 웹사이트가 열립니다. CSS Hero는 WYSIWYG(What You See is What You Get) 편집기를 사용합니다.

    페이지의 아무 요소나 클릭하기만 하면 사용자 정의할 수 있는 도구 모음이 나타납니다.

    그런 다음 웹사이트의 링크 중 하나를 클릭합니다. 블로그 게시물 링크 중 하나부터 시작하겠습니다.

    웹사이트 링크 클릭

    그런 다음 ‘Typography’ 메뉴 항목을 선택하고 링크의 새 색상을 선택할 수 있습니다.

    목록에서 새 색상을 선택하거나 고유한 색상 코드를 추가할 수 있습니다.

    타이포그래피 옵션 선택

    WordPress 탐색 메뉴의 색상 변경

    다음으로 색상을 변경할 수 있습니다. 워드프레스 탐색 메뉴 연결.

    탐색 메뉴 위로 마우스를 가져간 다음 메뉴 항목 중 하나를 클릭하기만 하면 됩니다.

    탐색 메뉴 링크 클릭

    그런 다음 ‘Typography’ 옵션을 선택하고 바로 아래에서 색상을 사용자 지정할 수 있습니다.

    메뉴 링크 색상을 변경하면 변경 사항이 미리 보기에 즉시 표시됩니다.

    메뉴 색상 사용자 정의 CSS Hero

    링크 색상 변경이 완료되면 ‘저장 및 게시’ 버튼을 클릭하여 변경 사항을 적용해야 합니다.

    이 기사가 WordPress에서 링크 색상을 변경하는 방법을 배우는 데 도움이 되었기를 바랍니다. 당신은 또한 우리의 가이드를보고 싶을 수도 있습니다 최고의 웹 디자인 소프트웨어를 선택하는 방법, 또는 우리의 목록 필수 WordPress 플러그인.

    이 기사가 마음에 들면 구독하십시오. 유튜브 채널 WordPress 비디오 자습서용. 당신은 또한 우리를 찾을 수 있습니다 트위터 그리고 페이스북.

    Source link

    신고하기
'WordPress에서 링크 색상을 변경하는 방법(초보자 안내서)'에 답변달기
글쓴이 정보:




+ 45 = 50