[hELLO 스킨] 사이드바의 링크 꾸미기

hELLO 스킨으로 되어있는 블로그들을 염탐(?)하다보면, 자신만의 링크들을 프로필 영역 밑에 보여주고 있는 경우가 있다.

채야미의 코드레시피 블로그

 

프로필 하단에 나와 관련된 정보들이 있으면 접근도 쉽고 나만의 허브를 갖는다는 점도 좋다는 생각해 추가해보고 싶었다.

링크 추가

일단 티스토리에서 제공해주는 '링크'에 원하는 링크를 추가해본다.

티스토리 블로그 설정 > 링크 탭 > 나의 링크

예시로 내 GitHub 주소를 넣었는데, 원하는 주소를 넣으면 된다.

이제 블로그를 확인해보면, 사이드바에 추가한 링크가 보인다!

링크 위치 변경

이제 사이드바에서 링크 위치를 프로필 하단으로 변경한다.

이것도 티스토리에서 제공해주기 때문에 쉽게 변경이 가능하다.

티스토리 블로그 설정 > 꾸미기 탭 > 사이드바

Drag & Drop 으로 위치를 바꿀 수 있으니 프로필과 링크가 붙어있도록 변경한다.

저장하고 다시 확인해보면, 내 프로필 밑에 링크가 보이게 된다 :)

링크 꾸미기

마지막으로 스킨을 편집해서 꾸미는 일만 남았다.

티스토리 블로그 설정 > 꾸미기 탭 > 스킨 편집 > (우측 상단) HTML 편집

 

앞으로 우리가 해야할 건 세 가지이다.

1. 링크 타이틀 제거하기
2. 아이콘 변경하기
3. 가운데 정렬하기

<s_sidebar_element><!-- 링크-->
  <li class="el" id="my-links">
    <h2 class="tit">링크</h2>
    <ul class="links flex flex-col gap-y-4">
      <s_link_rep>
        <li class="link">
          <div class="txt leading-none"><i class="ico fa-solid fa-link mr-2 text-xs"></i><a class="link text-sm" href="" target="_blank"></a></div>
        </li>
      </s_link_rep>
    </ul>
  </li>
</s_sidebar_element>

 

'링크'를 검색하면 다음과 같은 영역을 찾을 수 있다.

이 부분만 수정하면 원하는 걸 전부 할 수 있다!

1. 링크 타이틀 제거하기

<!-- <h2 class="tit">링크</h2> 👈 ‼️이 부분 주석 or 제거‼️ -->

 

 

h2 태그를 제거하면 타이틀이 보이지 않는다!

나중에 복구할 수도 있어, 나는 편집 시 대부분 원본 내용은 주석 처리하고 추가된 내용을 넣고 있다.

2. 아이콘 변경하기

현재 아이콘은 fa-solid, fa-link를 쓰고 있는데, 이런 식의 사용은 Font Awesome의 사용 패턴이다.

원하는 아이콘을 검색해서 눌러보면 자세한 사용방법이 나온다. (나는 github를 검색했다.)

현재 적용되어있는 아이콘인 fa-solid, fa-link를 fa-brands, fa-github-alt로 바꿔준다!

<li class="link">
  <!-- <div class="txt leading-none"><i class="ico fa-solid fa-link mr-2 text-xs"></i><a class="link text-sm" href="" target="_blank"></a></div> 👈 ‼️이 부분 주석 or 제거‼️ -->
  <div class="txt leading-none"><i class="ico fa-brands fa-github-alt mr-2 text-xs"></i><a class="link text-sm" href="" target="_blank"></a></div> <!-- 👈 ‼️이 부분 추가‼️ -->
</li>

 

이러면 아이콘도 쉽게 변경이 된다 ㅎㅎ

3. 가운데 정렬하기

여기까지 완료하면 왼쪽에 링크가 있을텐데, 프로필이 가운데있으니 같이 정렬을 해서 안정감을 주도록 한다.

Tailwind CSS를 사용하고 있어, 클래스명 고민없이 바로 적용이 가능하다.

<s_sidebar_element><!-- 링크-->
  <li class="el" id="my-links">
    <!-- <h2 class="tit">링크</h2> -->
    <!-- <ul class="links flex flex-col gap-y-4"> 👈 ‼️이 부분 주석 or 제거‼️ -->
      <ul class="links flex justify-center gap-x-4">
      <s_link_rep>
        <li class="link">
          <div class="txt leading-none"><i class="ico fa-brands fa-github-alt mr-2 text-xs"></i><a class="link text-sm" href="" target="_blank"></a></div>
        </li>
      </s_link_rep>
    </ul>
  </li>
</s_sidebar_element>

 

flex-col을 제거하면 기본적으로 flex-row가 적용된다.

gap-y-4는 y축 여백을 띄우는건데, 가로 정렬이니 x축 여백을 띄우도록 수정했다.

justify-center를 추가해 가운데 정렬을 할 수 있게 됐다.

결과

비교적 쉽게(?) 원하는대로 수정됐다.

다음엔 또 어딜 꾸미지?