By aPOST in 티스토리스킨 —

티스토리 블로그 스킨에 커스텀 SNS 아이콘 링크 붙이기

최근 배포하고 있는 스킨들 중 폰트어썸 아이콘팩을 사용하는 스킨 기준으로 설명된 내용이며, 다른 아이콘팩 라이브러리나 직접 제작해서 사용한 아이콘팩을 사용한 스킨, 다른 스킨 제작자 스킨에서는 해당되지 않을 수 있습니다.

제가 배포하는 스킨들은 대부분 폰트어썸이나 자체 제작 아이콘을 스킨에 적용하고 있습니다.

잘 알려진 소셜 서비스를 제외하고는 아이콘이 제공되지 않기 때문에 없는 아이콘 이미지들은 직접 제작해서 붙여 넣어야 합니다.

1. SNS 아이콘 이미지 준비

링크를 붙이고 싶은 아이콘을 먼저 다운로드 받습니다.

가능하면 png나 svg 포맷 이미지가 좋습니다. 투명 배경이 지원되기 때문에 테두리나 배경색이 있는 아이콘인 경우, 조금 더 보기 좋게 아이콘을 붙일 수 있습니다.

간단하게 개발자 블로그 사이트인 벨로그를 예를 들어서 붙여보겠습니다.

먼저 아이콘을 구글 검색을 통해서 하나 다운로드합니다.

velog.svg

2. SNS 아이콘 업로드

"velog.svg" 이미지를 내 블로그에 업로드합니다.

업로드 한 이미지는 스킨 HTML에 붙일 때 "./images/velog.svg" 경로를 가지게 됩니다.

업로드된 아이콘 이미지

3. 아이콘 이미지 연결

이제 업로드 한 아이콘을 스킨 HTML에 붙어 넣어야 합니다.

스킨 소스에서 "social-link"를 검색합니다.

다음과 같은 코드 블록을 볼 수 있습니다.

제가 배포하는 스킨들은 대부분 다음과 같이 SNS 아이콘을 붙여주는 경로 치환자가 붙은 형태로 작성되어 있습니다.

대부분 스킨 옵션을 통해 표시 여부와 링크를 설정하게 됩니다.

배포하는 스킨에 따라서는 형태가 조금 다를 수 있습니다.

<div class="social-link">
    <s_if_var_sns-instagram><a href="[##_var_sns-instagram_##]" title="[##_var_sns-instagram_##]" <s_if_var_newwindow-snslink>target="_blank"</s_if_var_newwindow-snslink>><i class="fab fa-instagram"></i><div>Instagram</div></a></s_if_var_sns-instagram>
    <s_if_var_sns-twitter><a href="[##_var_sns-twitter_##]" title="[##_var_sns-twitter_##]" <s_if_var_newwindow-snslink>target="_blank"</s_if_var_newwindow-snslink>><i class="fab fa-twitter"></i><div>Twitter</div></a></s_if_var_sns-twitter>
    <s_if_var_sns-youtube><a href="[##_var_sns-youtube_##]" title="[##_var_sns-youtube_##]" <s_if_var_newwindow-snslink>target="_blank"</s_if_var_newwindow-snslink>><i class="fab fa-youtube"></i><div>Youtube</div></a></s_if_var_sns-youtube>
    <s_if_var_sns-facebook><a href="[##_var_sns-facebook_##]" title="[##_var_sns-facebook_##]" <s_if_var_newwindow-snslink>target="_blank"</s_if_var_newwindow-snslink>><i class="fab fa-facebook"></i><div>Facebook</div></a></s_if_var_sns-facebook>
    <s_if_var_sns-pinterest><a href="[##_var_sns-pinterest_##]" title="[##_var_sns-pinterest_##]" <s_if_var_newwindow-snslink>target="_blank"</s_if_var_newwindow-snslink>><i class="fab fa-pinterest"></i><div>Pinterest</div></a></s_if_var_sns-pinterest>
    <s_if_var_sns-email><a href="[##_var_sns-email_##]" title="[##_var_sns-email_##]" <s_if_var_newwindow-snslink>target="_blank"</s_if_var_newwindow-snslink>><i class="fas fa-envelope"></i><div>E-mail</div></a></s_if_var_sns-email>
</div>

맨 밑에 있는 이메일 주소 표시 링크 밑에 벨로그 아이콘을 붙여보겠습니다.

먼저 맨 밑의 이메일 링크 치환자 코드를 복사해서 붙여 넣고 치환자 태그([## ... ##])와 치환자(<s_if...>, </s_if...>)를 모두 지웁니다.

그러면 다음과 같은 코드만 남게 됩니다.

<a href="" title="" target="_blank"><i class="fas fa-envelope"></i><div>E-mail</div></a>

순수하게 남은 HTML 태그에 필요한 내용들을 채웁니다.

하이퍼링크를 제외하고는 나머지 텍스트들은 표시되지 않고 아이콘으로 대체되기 때문에 벨로그 사이트 링크만 제대로 넣으면 됩니다.

<a href="velog.io" title="벨로그" target="_blank" class="icon-velog"><i class="fas fa-envelope"></i><div></div></a>

그리고 수정된 태그에서

<i class="fas fa-envelope"></i>

이 태그가 폰트어썸 아이콘 라이브러리에서 편지봉투 모양의 아이콘을 붙여 넣는 태그입니다.

<i> 태그 쌍을 삭제하고 그 뒤의 <div></div> 태그 쌍도 삭제합니다. <a></a> 태그 쌍 안에 이미지 태그(<img>)를 추가한 후 CSS(클래스 이름은 "icon-velog"로 하이퍼링크 태그에 정의해서 사용)로 이미지의 크기 속성을 정의하게 됩니다.

4. 폰트어썸이 아닌 다른 아이콘을 적용한 스킨

폰트어썸이 아닌 직접 제작한 폰트로 배포하는 스킨이나 다른 아이콘 팩을 사용한 경우, <i> 태그 없이 다음과 같이 하이퍼링크 태그(<a>)에 클래스로 아이콘 속성을 정의해서 사용합니다.

이런 경우 style.css 에서 아이콘 이미지를 직접 정의해야 하기 때문에 방법이 약간 다릅니다.

//다른 예 1
<s_if_var_sns-email><a href="[##_var_sns-email_##]" title="[##_var_sns-email_##]" class="icon-email" <s_if_var_newwindow-snslink>target="_blank"</s_if_var_newwindow-snslink>><div>E-mail</div></a></s_if_var_sns-email>

//다른 예 2
<a href="#" class="pinterest"><div>Pinterest</div></a>

마찬가지로 치환자 태그를 모두 제거하고 하이퍼링크의 클래스 명을 뒤에서 정의할 클래스 이름으로 변경합니다.

//다른 예 1
<a href="velog.io" title="" class="icon-velog" target="_blank"><div></div></a>

//다른 예 2
<a href="velog.io" class="icon-velog"><div></div></a>

수정한 태그는 

<div></div>

태그 쌍을 없애고 그 자리에 이미지 태그를 추가하면 됩니다.

이후 작업은 모두 동일합니다.

커스텀 아이콘을 붙일 때는 <div></div> 태그 쌍은 반드시 삭제해야 합니다.

업로드한 이미지 경로를 사용해 이미지 태그를 추가합니다.

<a href="velog.io" title="벨로그" target="_blank" class="icon-velog"><img src="./images/velog.svg"></a>

5. CSS적용

이제 style.css 안에 붙여 넣은 이미지 아이콘의 크기를 정해줍니다.

크기가 맞지 않으면 적당히 조절해주면 됩니다.

아이콘은 style.css 에서 위에서부터 ". social"로 검색하면 소셜 아이콘의 CSS를 설정한 위치를 쉽게 찾을 수 있습니다.

.icon-velog {
    width: 20px;
    height: 20px;
}

붙여 넣은 새 아이콘은 다음처럼 보이게 됩니다.

일단 위치를 잡고 나면 그다음부터는 수월하므로 조금씩 손을 봐서 원하는 방향으로 조절을 하면 됩니다.

svg 이미지는 색상을 임의로 변경하기가 쉽지 않으므로 png 이미지를 이미지 편집기에서 편집해서 붙여 넣는 것을 더 추천합니다.

티스토리스킨 관련글
글 229 개 모두보기 →