깃허브 블로그 꾸미기 (1) 링크 색 변경

깃허브 블로그 꾸미기 (1) 링크 색 변경

Summary:

기존 템플릿의 링크 색을 제가 좋아하는 색으로 변경했습니다.


기존 화면

Indigo Minimalist Jekyll Template 테마를 이용하고 있다. 이 테마는 깔끔하고 다 좋은데, 링크 색이 보라색인 게 맘에 들지 않는다. 이미 들어갔던 링크 같고 칙칙하달까. 오늘 이 보라색을 다른 색으로 바꿔보자.

pic1

기존 블로그

색상 속성이 어디에 숨어있나

방법은 간단하다. 색상 속성을 집어넣은 코드를 찾아서 해당값을 지우고 내가 원하는 색을 쓰고 푸쉬하면 된다. 내 깃허브 블로그 레포지토리에는 6개의 세부 폴더가 있다.

보통 꾸미는 내용들은 .css나 .sass로 확장자가 설정되어 있기 때문에 그 파일들이 들어있는 _includes_sass 폴더 내부를 뒤져봤다. 결론부터 말하자면 _sass/base/general.sass에 블로그에 들어가는 각종 문자에 대한 색상들이 설정되어 있었다.

pic2

html에서 링크를 설정할 땐 를 이용한다. 31번째 줄을 보면 a 태그에는 $delta 색과 underline 표시를 하도록 되어 있다. 그런데 구글링해보니 delta라는 색이 보라색이 아니다. 뭔가 더 있나보다.

pic3 pic4

_sass/base/variables.sass에 $delta색이 정의되어 있었다. #4b0082 색을 구글에 치면 아래처럼 색생과 명칭을 알 수 있다.

#4b0082을 #59ABE3으로 변경했다. 그 다음 저장, 깃 add, commit, push!

pic5

변경 사항 확인

푸쉬한 다음 imyeonn.github.io에 재접속했다. 그 결과,

pic6

변경된 색상

완성!!!!!

와. 이렇게 쉽게, 빠르게, 에러없이 뭔가를 완성한 게 얼마만인가. 날아갈 것 같다.


Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora