티스토리 꾸미기 - FastBoot 텍스트로고에 홈바로가기 기능 넣기

현재 사용 중인 스킨은 Readiz님의 패스트부트 (FastBoot 1.6.2) 스킨입니다.

레이아웃을 비롯한 여러가지 요소들이 꽤 마음에 들어서 사용중인데요.

무심결에 블로그 최상단의 헤더 영역 블로그 이름을 눌렀다가 홈바로가기 기능이 없길래 기능을 추가해봤습니다.

텍스트로고라고 표현하면 될까요?

아무튼 이게 스크롤을 조금 내려서 플로팅 상태가 되면 링크 기능이 활성화되는데 기본상태에서는 없더군요.

그래서 텍스트로고를 클릭하면 홈화면으로 가도록 하고자 소스를 조금 수정해봤습니다.

◇  ◇  ◇  ◇  ◇  ◇  ◇

블로그관리 → 꾸미기 → 스킨편집  → HTML편집 → HTML로 가서 소소한 Web창고를 찾아줍니다. 

변수로 선언되어 여러 위치에서 사용되기 때문에 주변의 클래스와 요소들을 잘 확인해야 합니다. 

위치를 확인했다면 아래와 같이 a태그를 삽입한 형태로 수정해주면 됩니다.

<a href="https://sswh.tistory.com/"><h3>소소한 Web창고 </h3></a>

좌측의 미리보기 화면을 새로고침해서 아래처럼 색상이 변하면 성공,

혹시 색이 안 변하더라도 마우스를 올렸을 때 클릭모양으로 변하면 성공입니다.

그 후 저장해주면 끝. 

이제 다른 스킨이나 블로그들처럼 블로그명을 클릭하면 홈화면으로 들어갈 수 있습니다.

지금 수정한 위치는 데스크탑의 헤더영역만 해당되니 참고하시기 바랍니다.

---

흠... 코드를 열어본김에 무언가 아쉬운 생각이 들어 텍스트에 효과를 주기로 했습니다. 

모든 브라우저에 먹히는게 아닌 반쪽짜리긴하지만 적당히 꾸며본다는 취지로 진행했습니다.

반쪽짜리란게 무슨 뜻이냐하면 아래 작성한 코드는 크롬 브라우저에서는 적용되지만 IE에서는 적용되지 않는 다는 점!!!

참고하시기 바랍니다. 

css로만 제어할거라 앞서 a태그를 작성한 위치의 <h3> 태그에  class="titLink"라는 클래스를 하나 만들어줍니다.

클래스명은 css에 쓸때 똑같기만 하면 되니까 아무렇게나 적어도 됩니다.

<a href="https://sswh.tistory.com/"><h3 class="titLink">소소한 Web창고 </h3></a>

이번에는  블로그관리 → 꾸미기 → 스킨편집  → HTML편집 → CSS 로 이동합니다.

특별한 경우가 아니라면 CSS는 가장 아래 작성할 수록 우선순위가 부여되므로 스크롤을 쭉내려 맨 끝으로 가면 됩니다.

아래의 코드를 붙여넣기하고 제대로 작동하는지 미리보기 화면을 새로고침해서 확인해가며 원하는 색상을 선택하면 됩니다.

.titLink{
    background: -webkit-radial-gradient(white 10%, blue);    
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;    
}

코드를 적용한 결과, 텍스트로고에 아래와 같이 그라데이션이 적용됩니다.

위의 예시로는 radial-gradient를 적용했지만 아래스샷들처럼 linear-gradient로 선택이 가능하며 색상 옵션도 조절이 가능합니다.

마음에 드는 색상을 만들기 위해 갖가지 옵션을 적용해본 결과물들입니다.

결국 무난하게 나온 색상(현재 사용 중인 텍스트로고)으로 정하긴 했습니다. 

다만, IE에서도 스크립트를 통한 복잡한 과정없이 간단하게 적용되면 좋겠는데 참 아쉬운 부분입니다.