티스토리 hELLO 스킨 코드블럭 너비 늘리기 (feat. 25% 너비 증가)

코드블럭 너비 쫌만 넓혀볼게요...?

적용 시 기존 대비 대략 25% 넓어진다!!

hELLO 스킨 정말 좋아해서 이것만 쓰는 중인데 뭔가 코드 블럭의 범위를 좀 넓히고 싶었다

그래서 html 편집에 들어가서 아래처럼 수정해주었음

---

수정 방법과 위치

사진 순서대로 누르면 된다

혹시 기존 CSS 코드 꼬일수도 있으니 메모장에 복붙해두시는걸 추천!

---

코드

/* < 커스텀 파트 시작 > */
/* 코드 블럭을 뷰포트 기준으로 넓히기 */
/* left: 50% + translateX(-50%) 조합은 가로 정중앙 정렬의 대표 패턴 */
.hljs, pre, code {
  font-family: Consolas, monospace !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 72vw;              /* 전체 화면 너비 기준 비율 */
  max-width: 900px;         /* 화면이 커지면 여기까지만 */
  min-width: 320px;
  color: #f8f8f2;
  overflow-x: auto;
  box-sizing: border-box;
  /* font-size: 0.95rem; */
  border-radius: 8px;
  padding: 1.5rem;
  margin: -1.2rem 0;
  z-index: 0;
}

/* < 커스텀 파트 끝 > */

---

Before & After

Before

---

After

---

번외 - 다른 방법

귀찮다 싶으면 스킨 편집에 가서 페이지 전체 너비를 늘려도 되긴하다

https://ratatou2.tistory.com/268

티스토리 hELLO 스킨 글 너비 늘리기 (feat. 코드 수정 X)