티스토리 링크 버튼 만들기: 그냥 발행글 링크에도 버튼 적용하기

티스토리 링크 버튼 만들기: 그냥 발행글 링크에도 버튼 적용하기

남들 다 가르쳐주는 티스토리 링크 버튼 만드는 방법은 검색만 하면 주구장창 나오니까, 딱히 내가 설명 안해도 만드는 방법이 널려 있습니다. 문제는 그런 방법이 굉장히 짜칩니다.

'버튼 제네레이터' 같은 사이트에서 버튼을 만들고, 붙이고, 서식 설정해서 서식 집어 넣고 글 수정하고...게다가 새창 열기 들어가면 일일이 HTML소스 상태에서 target="_blank" 찾아서 없애고... 귀찮아요.

그래서 저는 그냥 과거 발행글 삽입하기로 내 블로그의 글을 링크로만 삽입하면, CSS가 알아서 버튼 처럼 보이게 하는 방법을 소개해드립니다.

티스토리 블로그를 운영하다 보면 발행글에 링크를 넣어 다른 포스팅으로 독자를 유도할 때가 많습니다. 문제는 이런 링크를 넣을 때, 단순히 텍스트로 된 링크만 사용하면 눈에 띄지 않아 독자들이 지나치기 쉽다는 점이죠. 그래서 많은 블로거들은 이 문제를 해결하기 위해 '버튼' 스타일의 링크를 사용하려고 합니다. 하지만 대부분의 방법들은 꽤나 귀찮고 반복적인 과정을 요구합니다. 여기서는 발행글에 간편하게 버튼 형식의 링크를 넣는 방법을 소개합니다. CSS만으로 쉽게 버튼을 만들고, 과거 발행글에도 일관되게 버튼을 적용할 수 있는 방법입니다.

티스토리 링크 버튼 만드는 전통적 방법의 문제점

많은 분들이 사용하시는 전통적인 링크 버튼 생성 방법은 대부분 '버튼 제네레이터' 같은 웹사이트를 이용합니다. 이러한 사이트에서는 버튼의 형태를 설정하고, CSS 코드를 받아 HTML 편집 모드에 붙여 넣어 링크를 만듭니다. 하지만 이러한 과정은 다소 번거롭고, 다음과 같은 문제점이 있습니다:

• 반복 작업 필요: 각 포스팅마다 HTML 편집 모드에 들어가 코드를 붙여 넣어야 하며, 스타일을 조정하려면 또 다시 코드를 수정해야 합니다. 이는 시간 소모가 큰 작업이며, 비효율적입니다. 블로그 포스팅이 많을수록 이러한 반복적인 작업은 점점 부담이 됩니다.
• 새창 열기 설정의 번거로움: 대부분의 링크 버튼은 새창으로 열리게 하는 것이 좋습니다. 이를 위해 target="_blank" 코드를 추가하거나 수정해야 하는데, 이 작업 역시 일일이 해주어야 합니다. 특히 HTML 편집에 익숙하지 않은 사용자에게는 이 작업이 매우 어려울 수 있습니다.
• 과거 발행글 수정의 어려움: 버튼을 통일된 스타일로 일관되게 적용하고 싶다면 과거에 발행한 모든 글을 일일이 수정해야 하는데, 이는 시간과 노력이 많이 드는 작업입니다. 수많은 글들을 다시 편집하고 수정하는 것은 거의 불가능한 수준으로 복잡하고 귀찮은 작업이 될 수 있습니다.

이러한 문제들을 해결하기 위해 저는 CSS를 사용해 과거 발행글에 버튼처럼 보이게 만드는 방법을 찾았습니다. 이 방법을 사용하면 한 번의 CSS 적용만으로 과거의 모든 발행글에 버튼을 일관되게 적용할 수 있습니다. 한 번 설정해 두면 블로그 전체의 링크 스타일을 동일하게 유지할 수 있어 블로그의 전체적인 일관성과 가독성을 크게 높일 수 있습니다.

2024.11.04 - [컴퓨터 인터넷 모바일 it/블로그 애드센스 등] - 애드센스 전면광고 수익 증대를 위한 티스토리 포스팅 내 링크 새창열기 현재창으로 열게 해주는 방법

애드센스 전면광고 수익 증대를 위한 티스토리 포스팅 내 링크 새창열기 현재창으로 열게 해주

CSS로 발행글에 링크 버튼 스타일 적용하기

제가 사용하는 방법은 CSS 코드 몇 줄로 발행글에 포함된 특정 링크를 버튼처럼 보이게 하는 것입니다. 이렇게 하면, HTML 편집 모드에서 일일이 코드를 추가할 필요 없이, 링크만 넣으면 자동으로 버튼 스타일이 적용됩니다. 아래는 제가 사용하는 CSS 코드입니다.

버튼 스타일 적용 전 모습과 적용 후 모습. CSS만 적용하면 과거 발행한 포스팅의 링크들도 오른쪽 처럼 버튼처럼 보이게 됩니다.

이 CSS를 티스토리 관리 -> 꾸미기 -> 스킨 편집 -> CSS에서 맨 아랫줄에 추가하시면 됩니다. 저는 위에 추가했지만, 보통 새로 추가하는 CSS는 맨 끝에 추가하셔야 제대로 적용됩니다. CSS는 마지막에 적용된 스타일이 먹히거든요. 하지만 제가 작성한 CSS 스타일은 기존 스타일과 충돌하는게 없기 때문에 어디에 추가해도 동일하기 때문에 저는 위에 적용했습니다. 하지만 여러분의 스킨도 제것과 같다는 보장이 없으므로, 맨 마지막에 추가하시길 추천드립니다.

.entry-content p>a, .entry-content blockquote>a  {
    display: block;
    box-shadow: inset 0px 1px 0px 0px #cf866c;
    background: linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
    background-color: #d0451b;
    border-radius: 9px;
    border: 1px solid #942911;
    cursor: pointer;
    color: #ffffff !important;
    font-family: Arial;
    font-size: 1.15em;
    letter-spacing: -2px;
    font-weight: bold;
    padding: 20px 50px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #854629;
}
.entry-content p>a:hover, .entry-content p>a:focus,
.entry-content blockquote>a:hover, .entry-content blockquote>a:focus {
    background: linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
    background-color: #bc3315;
    text-decoration: underline;
}

위의 CSS 코드에서 핵심은 .entry-content p>a와 .entry-content blockquote>a 선택자입니다. 이 선택자는 포스팅 본문 내의 특정 링크에만 스타일을 적용하도록 되어 있습니다. 또한 .entry-content p>a:hover와 .entry-content blockquote>a:hover를 통해 링크에 마우스를 올렸을 때 스타일 변화도 정의할 수 있습니다. 이를 통해 링크가 더욱 눈에 띄고 클릭을 유도할 수 있는 시각적 효과를 줄 수 있습니다.

2024.11.01 - [컴퓨터 인터넷 모바일 it/블로그 애드센스 등] - 구글 애드센스 의도기반 형식 광고 대응 티스토리 링크 버튼 스타일 변경. CSS :not() 가상선택자

구글 애드센스 의도기반 형식 광고 대응 티스토리 링크 버튼 스타일 변경. CSS :not() 가상선택자

이 코드를 사용하면, 포스팅 본문에 포함된 링크가 자동으로 버튼처럼 보이게 되어 시각적인 효과를 줄 수 있습니다. 이를 통해 독자들이 링크를 더 쉽게 찾고 클릭하게 만들 수 있습니다. 블로그의 탐색성을 높이고, 독자들이 다른 포스팅으로 쉽게 이동할 수 있도록 도와주는 기능을 제공합니다.

새창으로 열기 설정과 스타일의 일관성 유지

제가 사용한 방법의 또 다른 장점은 일관성 있는 스타일 유지입니다. 기존에는 각 글마다 새창으로 열기 설정을 다르게 하거나, 인용문 안에 링크를 넣거나 하는 식으로 불규칙하게 링크를 넣었지만, 이 방법을 사용하면 자동으로 일관된 스타일이 적용됩니다. 블로그 내 모든 링크들이 동일한 스타일을 유지하면 독자들에게도 신뢰성을 주고, 블로그의 전체적인 디자인 품질이 상승하게 됩니다.

새창으로 열리는 링크는 HTML의 target="_blank" 속성을 통해 설정할 수 있습니다. 위의 CSS에서는 이 속성에 대한 직접적인 설정은 없지만, 티스토리의 글 작성 화면에서 링크 삽입 시 새창으로 열기를 선택하면 CSS가 자동으로 스타일을 적용합니다. 이를 통해 각 포스팅마다 번거로운 작업 없이 일관된 스타일을 유지할 수 있습니다. 또한, 링크 버튼이 새창으로 열리면 독자들은 현재 페이지를 잃지 않고도 다른 정보로 쉽게 이동할 수 있게 되어, 블로그 체류 시간과 탐색성을 높이는 데 큰 도움이 됩니다.

버튼 스타일 커스터마이징하기

물론 이 CSS 코드의 스타일은 여러분이 마음에 드는 대로 수정할 수 있습니다. CSS에 익숙하지 않으신 분들도 '버튼 제네레이터' 사이트를 활용하여 원하는 버튼 스타일을 만든 후, 그 CSS 코드를 위 코드에 덮어씌우면 됩니다. 기본적인 코드 구조를 유지한 상태에서 색상이나 텍스트 스타일 등을 조정하면 자신만의 고유한 버튼 스타일을 만들 수 있습니다.

다음과 같은 요소들을 조정해볼 수 있습니다:

• 색상 변경: background 속성의 값을 변경하여 버튼의 색상을 바꿀 수 있습니다. 예를 들어, 좀 더 부드러운 느낌을 주고 싶다면 밝은 파스텔 톤의 색상을 사용할 수 있습니다. 색상을 통해 링크 버튼이 블로그의 전반적인 테마와 잘 어울리도록 만들어보세요.
• 크기와 모양 변경: padding, border-radius 등의 속성을 수정하여 버튼의 크기와 모양을 바꿀 수 있습니다. 각 블로그의 테마에 맞게 크기를 조정해보세요. 테마에 따라 모서리를 둥글게 하거나 사각형으로 만드는 등의 미세한 조정이 가능합니다.
• 글자 스타일 변경: font-family, font-size, font-weight 등을 수정하여 버튼 안의 텍스트 스타일을 바꿀 수 있습니다. 블로그 전체의 글꼴과 일치시키거나 강조하고 싶은 스타일로 변경할 수 있습니다. 텍스트의 크기나 굵기를 변경함으로써 버튼의 가독성을 더 높이고, 독자들의 클릭을 유도하는데 효과적입니다.

CSS를 통한 효율적인 블로그 관리

이제까지 설명한 방법을 통해 효율적으로 블로그의 링크 버튼을 관리할 수 있습니다. CSS를 활용하면 모든 발행글에 대해 일괄적으로 버튼 스타일을 적용할 수 있기 때문에 시간과 노력을 크게 절약할 수 있습니다. 특히 과거에 발행한 글들이 많을 경우, 이런 방식이 매우 유용합니다. 일일이 글을 수정하지 않아도 CSS만으로 모든 링크에 통일된 스타일을 적용할 수 있어 매우 효율적입니다.

새로운 포스팅을 작성할 때도 단순히 링크만 추가하면 되므로 HTML 편집 모드에 들어갈 필요가 없습니다. 또한, 한 번 CSS를 수정하면 모든 포스팅에 동일하게 반영되므로 버튼 스타일을 통일하고 유지하기가 쉽습니다. 만약 전체적인 버튼 스타일을 변경하고 싶다면, CSS 파일을 한 번 수정하는 것만으로도 모든 포스팅에 즉각 반영됩니다. 이를 통해 블로그의 디자인을 쉽게 업데이트할 수 있습니다.

결론: 링크 버튼으로 블로그의 가독성 높이기

블로그에서 링크 버튼을 사용하는 것은 독자들에게 중요한 정보를 강조하고, 다른 글로의 이동을 쉽게 만들어줍니다. 특히 티스토리 블로그에서 CSS를 사용해 링크를 버튼 스타일로 만들어 주는 것은 효율적이고 일관성 있는 방법입니다. 위에서 설명한 CSS 코드를 사용해 간편하게 버튼을 적용해 보세요. 이렇게 하면 독자들이 더 쉽게 블로그를 탐색할 수 있을 뿐만 아니라, 블로그의 가독성도 한층 높아질 것입니다.

블로그의 전반적인 디자인 일관성은 독자들이 머무르는 시간을 늘리는 데 중요한 역할을 합니다. 링크 버튼을 통일된 스타일로 설정하면, 독자들은 필요한 정보를 더 쉽게 찾고, 블로그의 탐색성을 높일 수 있습니다. 또한, CSS를 이용한 이 방법은 매우 간편하고 유연하기 때문에 블로그를 자주 관리하거나 디자인을 변경할 때도 많은 도움이 될 것입니다. 이제 CSS를 사용해 여러분의 블로그 링크를 더 눈에 띄고 매력적으로 만들어 보세요.