티스토리 프로필에 SNS 아이콘 삽입하기

현재 블로그에서는 티스토리의 블로그형 스킨 'Odyssey'를 사용중이다.

'Odyssey' 스킨에서 HTML과 CSS 코드를 수정하여 현재 스킨을 디자인하였다. 

 

해당 스킨의 사이드바에 보이는 프로필에는 페이스북, 유튜브, 인스타그램, 트위터 URL을

스킨 편집의 사이드바-프로필에 삽입하여 SNS 링크 버튼을 자동으로 삽입할 수 있다.

 

 

 

 

본 블로그에서는 몇가지 HTML, CSS 코드를 수정하여 트위터를 빼고 깃허브, 링크드인, 스트라바 아이콘을 삽입했다.

 

 

 

 

먼저, SNS의 아이콘 이미지를 다운받는다. 웹에서 아이콘은 2차원 벡터 그래픽 형태인 SVG를 사용해야 깨지지 않는다. 블로그의 아이콘은 Flaticon 에서 다운받았다. 

 

 

그리고 스킨 편집의 'html 편집'을 클릭하여 파일 업로드에서 사용할 SVG 파일을 추가한다. 

HTML 코드 수정란에서 `box-sns` 클래스를 찾아 아래의 코드와 같이 수정해준다. 

이때  href 링크는 본인 SNS 주소를, src 링크는 업로드한 SNS 아이콘의 SVG 파일 이름으로 지정해준다. 

<div class="box-sns">
  <a href="https://www.facebook.com/ahhyun.yuh/" class="link-sns">
  	<img src="./images/facebooklogo.svg" width="70%" height="70%"/>
  </a>
  <a href="https://www.instagram.com/u_ahhh/" class="link-sns">
  	<img src="./images/instagramlogo.svg" width="70%" height="70%"/>
  </a>
  <a href="https://github.com/lucy0828" class="link-sns">
  	<img src="./images/githublogo.svg" width="70%" height="70%"/>
  </a>
  <a href="https://www.linkedin.com/in/ahhyun-yuh-303773174/" class="link-sns">
  	<img src="./images/linkedinlogo.svg" width="70%" height="70%"/>
  </a>
  <a href="https://www.strava.com/athletes/58028255" class="link-sns">
  	<img src="./images/stravalogo.svg" width="70%" height="70%"/>
  </a>
</div>

 

 

아이콘의 크기를 수정하고 싶다면 CSS 코드를 수정하면 된다.

해당 블로그는 아래와 같이 수정하였다. 

.area-aside .box-profile .box-sns {
    font-size: 0;
    text-align: center;
		margin-bottom:30px;
}

.area-aside .box-profile .link-sns {
    display: inline-block;
    width: 35px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 36px;
    vertical-align: top;
}