[블로그 커스텀] heLLO스킨 헤더 편집 (아이콘 추가, hover 효과)

 

 

✨커스텀 전 기본 헤더

 

티스토리에서 hELLO 스킨을 적용하고 게시글을 발행 한 뒤 헤더 부분의 모습이다. 썸네일로 설정한 이미지가 blur 처리되면서 헤더 배경으로 오고, 제목이 가운데로 온다. 그리고 아래는 글 발행시간과 해당 글의 카테고리가 한 줄로 나오는데, 카테고리명에는 <a>태그에 href 속성이 걸려 있어서 클릭하면 해당 카테고리로 넘어 간다. 

 

🧞‍♀️헤더 커스텀 완성작

 

 

이번 포스팅에서 커스텀할 내용은 크게 두 가지이다.

• 헤더 좌측 상단에 아이콘 추가
• 카테고리 이름에 마우스 올리면 색상이 변하는 hover 효과 주기

물론 위 캡처처럼 발행일, 카테고리명의 위치를 카테고리명이 먼저 나오게 바꾸어 줄 것이다.

카테고리에 hover 효과를 주면서 배경에 박스가 생기게 되어  앞으로 나오는 것이 더 낫기 때문이다. 

---

 

1. html 편집

 

블로그설정 > 스킨편집 > html편집에서 헤더 부분을 찾아 준다.

찾는 법은 두 가지가 있는데 개발자 도구 열어서 그 부분 태그에 클래스명 또는 아이디값을 찾는 것이고,

나는 글 발행하는 부분에 '수정 삭제 공개'라는 글자가 있는 걸 보고 '수정'이라고 검색해서 찾았다. 

주의할 점은 이 부분에만 수정이 들어가는 건 아니기 때문에 반드시 해당 부분을 찾아야 한다.

 

 

permalink 바로 밑에 header 부분의 original 코드를 <!-- --> 로 감싸서 주석 처리를 해 주고

그 밑에 아래 코드를 붙여 넣으면 된다.

 

<!-- 썸네일 헤더 커스텀 -->
<header class="mt-20 mb-10 flex flex-col justify-end px-5 w-full lg:max-w-screen-lg lg:w-pem lg:px-0 lg:mx-auto">
  <div class="description text-h-800 dark:text-h-200 lg:mx-0">
  <div class="mb-6 header-thumbnail"><img class="header-thumbnail" src="./images/purpleCoder.png" width="140" height="140"></div>
    <h1 class="font-extrabold mt-4 text-3xl lg:text-4xl">[블로그 커스텀] heLLO스킨 헤더 편집 (아이콘 추가, hover 효과)</h1>
    <div class="flex gap-x-2 mt-2 text-sm flex-wrap text-h-500 dark:text-h-200 font-medium">
      <div class="mt-4 mr-2">
        <a class="text-sm category-getter header-des-cate" href="/category/BlogCustom">BlogCustom</a>
      </div>
      <div class="flex gap-x-2 mt-4">
        <time class="header-des">2024. 11. 11. 21:05</time>
        <s_ad_div><a href="">수정</a><a href="#" onclick="">삭제</a><a href="#" onclick=""></a></s_ad_div>
      </div>
    </div>
    <div class="flex gap-x-1 text-sm"><span class="admin flex gap-x-1"></span></div>
  </div>                  
</header>
<!-- 썸네일 헤더 커스텀 끝 -->

 

여기까지 했으면 이미지를 올려준다.

---

2. 아이콘 이미지 업로드

 

파일업로드 탭에서 아이콘으로 쓸 이미지 파일을 올려준다. 

나는 purpleCoder라는 이름의 png 파일을 올려 주었다.

이 때 주의할 점은, 파일명이랑 위 html 코드에서 src(경로)가 일치해야 한다는 점이다. 글자 하나 틀리면 안 되기 때문에 반드시 이 부분을 올린 이미지 파일명으로 고쳐 준다. 

<img class="header-thumbnail" src="./images/purpleCoder.png" width="140" height="140">

 

꼭 테두리가 동그란 이미지를 올려야 하는 건 아니다. 어차피 border radius 값을 줘서 테두리를 깎아 줄 것이기 때문에 그냥 사각형 이미지를 올리면 되지만, 이상적으로는 정사각형의 이미지나 아이콘을 올려 주는것이 가장 좋다. 그래야 테두리가 균일하게 이쁘게 깎임!! 

 

올렸으면 CSS 편집 가자

---

3. CSS 편집

 

아래 코드를 css 맨 밑에 붙여넣기 해 준다.

 

썸네일 이미지 테두리 동그랗게 깎아주는  CSS

/* 썸네일 헤더 수정 */
div.header-thumbnail{
    width: 130px;
    height: 130px;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0px 2px 15px rgb(0 0 0 / 10%), 1px 2px 3px rgb(0 0 0 / 3%);
}
img.header-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 썸네일 헤더 수정 끝 */

 

카테고리명 누르면 버튼이 그라데이션으로 변하는 css

/* 썸네일 호버 그라데이션 커스텀 */
.header-des-cate:hover {
background-image: linear-gradient(90deg, #d6a7f1 0%, #85b7f1 50%, #6fdad6 100%);
color: rgb(255 255 255);
}
.header-des-cate {
background-color: rgb(153 153 161 / 0.15);
font-weight: 500;
padding: 0.25rem 0.875rem;
border-radius: 99px;
color: rgb(153 153 161 / 0.9);
/* color: rgb(111, 144, 201, 0.8); */
transition: color .2s;
}
/* 썸네일 호버 그라데이션 커스텀 끝 */

---

 

여기까지 하고 적용 해 주면 완성 !

 

다음에는 프로필 사진 테두리 css,

좌측 사이드바 hover 커스텀 같이 해 봅시다 >< 

 

편안한 밤 보내세요~!