Tistory 배경 아이콘/ Icon 편집

 

 

[Tistory 꾸미기]

📁배경 Icon 편집

 

 

티스토리를 편집하기 위해서 html, css를 수정할 수 있어야 한다.

그러나 두 언어를 사용해 본 적이 없는 사람은 고치기 어려운 부분이다.

 

 

🌟아래 처럼 원하는 아이콘으로 바꾸고 싶은 사람은 모두 주목!!🌟

 

 

 

 

 

---

[1] 아이콘 저장

---

 1. 아래 링크에 들어간다.

https://fontawesome.com/

Font Awesome

 

 

 

2. 자신이 찾고 싶은 아이콘 검색 (필자의 경우 github으로 검색)

 

 

 

3. 검색된 아이콘 중에 원하는 것 선택

 

 

 

4. 아이콘 저장

① 아이콘 크기 선택 (필자의 경우 제일 작은 크기 선택)

② svg 파일 저장 (필자의 경우 ico_github.svg 로 저장)

❗저장한 파일명은 나중에 쓰이니깐 잘 기억해두기❗

 

 

 

5. 동의하고 저장하기

 

 

 

 

 

---

[2] 블로그 편집

---

1. 블로그 편집 메뉴 → 스킨 편집 

 

 

 

2. html 편집 선택

 

 

 

3. 위치 확인

① (ctrl + f) → insta 검색

② 원하는 위치에 html 삽입 (필자의 경우 Facebook, Twitter 사이에 삽입함)

 

 

*필자의 경우 아래 코드 사용

 <s_if_var_snsGithub>
 	<li><a href="https://github.com/dohyeonkim2526" class="link_sns link_github" target="_blank"><span class="blind">깃허브</span></a>
    </li>
</s_if_var_snsGithub>

 

 

*코드 작성법 (아래 색깔 글씨만 수정하고 나머진 똑같이 기입)

 <s_if_var_snsGithub>
  <li><a href="연결하고 싶은 주소 url" class="link_sns link_github" target="_blank"><span class="blind">깃허브</span>  </a>
    </li>
</s_if_var_snsGithub>

 

 

snsGithub : 자신이 알아볼 수 있도록 아무거나 적으면 됨.(단, 맨 마지막 빨간색 글씨에도 동일하게 적어야 함)

"연결하고 싶은 주소 url" : 연결할 페이지의 주소 기입 (필자의 경우 Github 주소 적음)

link_github : 자신이 알아보기 쉽게 적으면 된다.(아래에서 A라고 부름)

깃허브 : 자신이 알아보기 쉽게 적으면 된다.

 

즉, url을 제외하고는 자신이 원하는대로 적으면 된다.

 

 

 

 

 

 

---

[3] 이미지 추가

---

 

1. 상단 메뉴의 파일 업로드 → 추가 선택 → [1]-4번에서 저장한 파일 선택

 

 

2. 이미지 추가 확인

*필자의 경우 [1]-4번에서 ico_github.svg 저장 

*images/ico_github.svg 라는 이름으로 추가됨!

 

 

 

 

 

 

---

[4] 마지막 CSS 편집

---

1. CSS 편집

① 상위 메뉴에서 CSS 선택

② (ctrl+f) → insta 검색

③ 아래 코드 편집

 

 

*코드 편집하는 방법

① 필요 없는 아이콘은 /* */ 주석 처리 (필자의 경우 모두 필요 없어서 다 주석 처리 함)

② 코드 추가

 

*코드 추가 방법 (글자 사이 공백이 있으므로 아래 코드 복사하는 것을 추천함)

/*.area_menu .list_sns .link_fb {
  background: url(images/ico_fb.png) no-repeat center;
}

.area_menu .list_sns .link_twitter {
  background: url(images/ico_twitter.png) no-repeat center;
}

.area_menu .list_sns .link_insta {
  background: url(images/ico_insta.png) no-repeat center;
}*/

.area_menu .list_sns .link_github {
	background: url(images/ico_github.svg) no-repeat center;
}

 

*아래 색깔 글씨만 수정하고 나머지는 똑같이 기입

.area_menu .list_sns .link_github {
background: url(images/ico_github.svg) no-repeat center;
}

 

link_github : [2]-3번에서 명칭한 A (필자의 경우 link_github 이었음)

images/ico_github.svg : [3]-2번에서 추가된 이미지 이름 (필자의 경우 images/ico_github.svg)

 

 

 

 

 

모든 과정을 완료했으면 저장하면 된다!

그러면 아래 처럼 카테고리에 아이콘이 생성된 것을 확인할 수 있다.

 

깃헙 아이콘 생성

 

 

 

 

해당 아이콘을 누르면 필자의 GitHub으로 연결된다.

이 기능을 사용하면 자신의 sns 또는 여러 홈페이지와 연결 할 수 있다.

 

 

모두에게 이 글이 도움되었으면 좋겠다.

그럼 오늘도 이만~~👏👏