🎨 hELLO 스킨 설정 팁! (사이드바 크기, 이미지 고정, 코드 하이라이팅)

이전 글에서 hELLO 스킨을 티스토리 블로그에 적용해보았는데요.
혹시 아직 hELLO 스킨을 적용하지 않은 분들은 아래 링크로 이동하여 스킨 적용 후 이 글을 읽으시는 걸 추천드립니다.

 

티스토리 hELLO 스킨 적용하기 (2025년 7월 기준 작성)

---

🧱 사이드바 크기 변경 (선택 사항)

hELLO 스킨의 좌측 사이드바 기본 크기는 `256px`입니다.
저는 사이드바 광고 삽입을 위해 조금 넓게 수정하여 사용하고 있습니다.
사이드바 크기를 변경하고자 한다면 아래 과정을 수행하시면 됩니다.

 

1️⃣ 관리 페이지에서 [꾸미기] - [스킨 편집]으로 이동합니다.
2️⃣ 우측 상단의 ‘HTML 편집’ 버튼을 눌러 코드 편집창으로 들어갑니다.
3️⃣ HTML 상단 부분에서 아래와 같은 코드를 찾습니다:

 

<style>
  :root {
    --h-idx: 1100px;
    /* index */
    --h-pem: px;
    /* permalink */
    --h-s: 320px;      <---- 여기의 값을 수정하면 사이드바 크기가 조정됩니다.
    /* sidebar */
    --h-c: calc(100% - var(--h-s));
    /* content */
    --h-h: 256px;
    /* header */
  }
</style>

---

⚙️ 스킨 옵션 설정

관리페이지의 [꾸미기] - [스킨 편집]을 눌러 스킨 편집화면으로 이동합니다.

우측 하단에 보이는 '글'에 해당하는 부분이 본문 글을 작성할 때 적용되는 옵션입니다.

 

🖼️ 헤더 스타일

• 심플: 제목만 출력
• 섬네일 (기본값): 제목 뒤에 섬네일 이미지 출력
• 스크린: 모니터 화면만큼 섬네일 이미지가 배경으로 출력, 제목은 이미지 위에 표시

※ 이미지가 없거나 대표 이미지(썸네일)를 설정하지 않은 경우 자동으로 심플 스타일로 표시됩니다.

 

헤더스타일 섬네일 예시. 본문 상단에 제목과 배경 이미지가 같이 표현되는 형태

 

📏 본문 너비

• 기본 값 : `720px`
• 추천 범위: `375px` ~ `1100px`
  (범위를 벗어나면 레이아웃이 깨질 수 있으니 주의! 소스코드 수정을 권장)

 

🧑‍💻 코드 하이라이팅

hELLO 스킨은 highlight.js가 내장되어 있어 티스토리 플러그인 없이도 사용 가능합니다.

 

스킨 편집의 코드 하이라이팅 테마 설정부분

 

 

• Light / Dark 모드 각각의 하이라이팅 테마를 선택 가능
• 테마는 아래 링크에서 미리보기 후 이름을 복사해 설정하세요.

Demo - highlight.js

 

※ 버전에 따라 지원하지 않는 테마도 있으니 유의하시길 바랍니다.

hELLO 스킨은 v11.10.0 버전을 사용하고 있으므로 이에 지원하는 테마 목록은 아래 사이트에서 확인할 수 있습니다.

 

highlight.js/src/styles at 11.10.0 · highlightjs/highlight.js

 

※ 다크모드 변경 방법: 블로그 우측 하단의 🌙 아이콘을 클릭하면 토글할 수 있습니다.
※ 하이라이팅 배경색은 스킨과 일관성 유지 차원에서 고정되어 있으며, 스타일은 변경 가능하지만 배경색 변경은 별도 코드 수정 필요합니다.

다크모드 토글

---

🖼️ 이미지 크기 본문 너비에 맞추기

hELLO 스킨은 이미지를 중앙 정렬했을 때만 최대 `1100px`까지 고정 사이즈로 출력됩니다.
하지만 본문 너비가 `720px`일 경우, 중앙 정렬된 이미지가 본문 밖으로 튀어나와 보일 수 있습니다.

 

🔧 해결 방법:

1️⃣ 글 작성 중 이미지를 클릭하면 상단에 정렬 아이콘이 표시됩니다.
2️⃣ 여기서 ‘본문 폭 맞춤’ 아이콘을 클릭하면 이미지가 본문 너비에 맞춰 출력됩니다.

본문 폭 맞춤으로 이미지 글 너비에 맞추기

---

🧠 추가 팁: 이미지 그리드 블록 크기 조정하기

이번에는 hELLO 스킨을 사용할 때 종종 발생하는 문제 중 하나인
**2개 이상의 이미지를 그룹화한 '이미지 그리드 블록(imagegridblock)'**의
가로 크기를 본문 너비로 고정시키는 방법에 대해 알려드리겠습니다.

 

🖼️ 문제 상황

hELLO 스킨은 기본적으로:

• 1장의 이미지: 본문 폭 맞춤 기능을 통해 본문 너비에 맞게 조정 가능
• 2장 이상 그룹화한 이미지(그리드 블록): 자동으로 1100px로 고정되며,
  '본문 폭 맞춤' 기능이 적용되지 않음

즉, 이미지가 본문보다 튀어나와 가독성과 디자인을 해치게 되는 문제가 생깁니다.

※ 물론 모바일에서는 문제없습니다. PC에서 큰 화면으로 볼 때 발생

 

🔧 해결 방법

이 문제를 해결하려면 HTML 편집 > CSS 영역에서
직접 코드를 추가하여 스타일을 수정해주어야 합니다.

 

1️⃣ 관리자 페이지 → [꾸미기] → [스킨 편집] → HTML 편집으로 이동
2️⃣ 상단 탭에서 CSS 편집창으로 들어갑니다
3️⃣ CSS 코드의 맨 아래에 아래 스타일 코드를 붙여넣기
4️⃣ 저장하고 적용하면 끝!

/* 이미지 그리드 블록(2개 이상 이어붙인 이미지)의 가로폭 가득차게 설정 */
figure.imagegridblock {
  width: 100% !important;
}

---

 

이렇게 해서 기본적인 hELLO 스킨 설정 팁과 이미지 사이즈 고정까지 알아보았습니다.
조금씩 커스터마이징하면서 나만의 블로그를 완성해보세요! 😊

감사합니다! 🙏

 

hELLO 스킨 코드 하이라이트(highlight.js) 커스터마이징 가이드 (줄번호, 언어표시, 복사버튼)

hELLO 스킨 코드 하이라이트(highlight.js) 커스터마이징 가이드 (줄번호, 언어표시, 복사버튼)