어두운 배경이 싫으시다면 페이지 우측 하단에 보이는 초승달 모양의 아이콘을 클릭하면 화이트모드로 변경됩니다.
초승달 모양 버튼 : `화이트/다크 모드` 전환
테마모드 변경 가이드

 

🔸2024. 12. 추가 설명 : hELLO 스킨 2024년 이후 업데이트된 버전을 사용하시는 분들 중에서 갑자기 블로그 화면이 깨지거나 무한 로딩으로 인해 블로그 메인화면에 접속할 수 없는 경우 목차의 4번 항목을 참고하여 수정해주시면 해결됩니다.

`+` 제작자 블로그에 새로 수정본이 올라왔습니다. (`4.10.2a`) 해당 버전을 받으셔서 적용하셔도 됩니다.

 

🔸2024. 11. 추가 설명 : 아래에서 설명하는 버전은 9월에 작성하였기 때문에 4.10.0c 버전입니다. 지금은 4.10.1 버전이지만 큰 틀에서 변경된 점은 없고 약간의 버그 수정한 버전이므로 아래 내용을 그대로 진행하셔도 됩니다. 다운로드 받으실 때는 최신버전을 다운로드 받으시면 됩니다.

 

첫 블로그 개설을 한 블로거의 경우 티스토리에 대한 기본 관리자 설정을 수행한 뒤 아래 스킨을 적용하는 것을 추천합니다. 물론 스킨을 먼저 적용하고 블로그 관리자 페이지를 설정해도 되지만, 플러그인 설정 등이 미리 해놓는게 편할 수 있어서 먼저 작업해주시면 좋습니다. 

 

🔸첫 블로그 개설! 블로그 관리자 페이지 기본 설정하기

 

티스토리 블로그 첫 개설! 관리자 메뉴 설정법

어두운 배경이 싫으시다면 페이지 우측 하단에 보이는 초승달 모양의 아이콘을 클릭하면 화이트모드로 변경됩니다.초승달 모양 버튼 : `화이트/다크 모드` 전환1. RSS 설정티스토리 블로그를 개

rightnowhj.tistory.com

 

1. 스킨 받기

제가 이전 블로그에서부터 사용하던 hELLO 스킨을 다운로드하여 추가해 보도록 하겠습니다. 

 

hELLO 티스토리 스킨을 소개합니다.

hELLO 는 2020년 3월 첫 공개 이후 지금에 이르기까지 티스토리에서 많은 블로거분들께 사랑받은 스킨이 되었습니다. 그 결과 가장 영향력 있는 개발자 커뮤니티인 깃허브에서 약 천 개에 달하는

pronist.tistory.com

 

위의 링크는 원작자(정상우)님의 블로그입니다. 해당 블로그에서 hELLO 스킨에 대해서 설명해 주시면서 업데이트될 때마다 새로운 버전에 대해서 업로드해 주시기 때문에 오래된 버전을 사용하시던 분들도 새로 받아서 적용하시면 각종 버그나 최적화 등과 함께 달라진 스킨 분위기를 경험하실 수 있습니다~

 

위 링크로 들어가시면 목차에 '받기'를 누르시면 됩니다. 2024년 9월 기준 4.10.0c 버전입니다. 다운로드 받으시고 압축파일을 해제합니다.

 

+ 2024. 11. 추가 : 2024년 11월 기준 4.10.1 버전이 최신버전입니다.

 

2. 스킨 추가 및 적용하기

블로그 관리페이지에서 '스킨변경' 메뉴를 클릭. 스킨목록 우측 끝에 보면 '스킨 등록+' 버튼을 눌러 새로운 커스텀스킨들을 추가할 수 있습니다.

 

아래 우측 이미지처럼 '추가' 버튼을 눌러 방금 다운로드 받은 스킨의 파일들을 추가합니다. 이때 폴더는 추가가 안 되므로 images 폴더 안에 있는 파일들을 모두 선택해서 추가해 주시면 됩니다.

 

스킨 추가하기파일 추가하고 저장
커스텀 스킨 추가하기

 

저장버튼을 누르면 스킨이름을 입력하는 창이 나타납니다. 본인이 원하는 이름을 입력하고 저장하면 됩니다. 저장하면 스킨보관함에 본인이 추가한 커스텀 스킨들이 보입니다. 여기서 추가한 스킨 위로 마우스를 올리면 버튼들이 나타나고, '적용' 버튼을 누르면 해당 스킨이 블로그에 적용됩니다.

 

상단에 보이는 '사용중인 스킨'에 현재 적용된 스킨을 볼 수 있으며, 백업하기 위해 보관 혹은 다운로드할 수 있습니다.

 

새로운 스킨 저장새로 추가한 스킨 위로 마우스 올리면 버튼이 나타나고 적용까지 눌러야 블로그에 스킨이 적용이 된다.
스킨명 입력하고 저장

 

스킨 변경페이지로 이동했을 때 처음에는 기본 스킨목록만 뜨는데 우측 상단에 보면(스킨 등록 버튼 아래) '스킨 보관함'이 있습니다. 이걸 누르면 커스텀 스킨 목록이 나타납니다.

 

커스텀 스킨 보관함
추가한 스킨들은 스킨 보관함에서 확인 가능

 

3. 스킨 편집하기

차후에 HTML을 본격적으로 수정하기에 앞서 기본적인 내용만 조금 확인하고 설명하면서 일부 코드를 추가해 보겠습니다. 일단 관리페이지 좌측에 '스킨 편집' 메뉴를 눌러서 스킨 편집 페이지창으로 이동합니다.

 

스킨 편집 페이지에서는 아래 이미지와 같이 페이지의 스타일을 설정할 수 있습니다. 아마 초기에 설정한 값과 아래 이미지의 값이 약간 다를 수 있는데 본인 취향에 맞춰서 설정해주시면 됩니다.

 

스킨 편집창에서 스타일 설정과 HTML 편집을 할 수 있다.
스킨 편집창 화면

 

'글' 에 해당하는 부분은 포스팅한 글의 본문을 나타내며, 너비는 초기값이 아마 720이었을 겁니다. 저는 900 정도가 적당해서 해당 값으로 사용합니다. 그리고 아래 '코드 하이라이팅' 부분이 두 개 있는데, 이 부분은 개발자로써 코드 highlight를 사용하실 경우, 스타일을 적용하면 됩니다. 일단 저는 vs2015를 화이트모드와 다크모드 둘 다 적용하여 사용합니다. 이 부분에 대해서는 따로 코드 highlight를 설명하는 포스팅을 작업할 예정이니 그때 자세하게 설명하도록 하겠습니다.

 

기본적인 스킨 편집이 되었다면 맨 위에 '적용' 버튼이 검정색으로검은색으로 활성화된 상태로 보일 겁니다.(수정이 이루어졌을 때만 검은색으로 변함) 이걸 클릭해서 적용해야만 스킨이 제대로 변경됩니다. 

 

 

🟦 HTML 편집

이제 'HTML 편집'을 클릭해서 코드를 약간 추가해보겠습니다. HTML 편집을 누르면 코드 편집을 하는 창으로 이동한다는 확인 메시지가 나타나고 확인을 누르면 코드 수정할 수 있는 창으로 바뀝니다.

 

여기서 아래 코드를 `<head>` 태그 아래에 추가해 줍니다. 

 

🔹URL 주소 카테고리 정보 제거

<script type="text/javascript"> if (typeof(history.pushState) == 'function') { var CatagoryURL = location.href; CatagoryURL = CatagoryURL.replace(/\?category=([0-9]+)/ig, ''); history.pushState(null, null, CatagoryURL); } </script>

 

HTML 편집에서 &lt;head&gt; 태그 아래 위 코드를 추가한 모습. 해당 코드는 URL 주소 뒤에 카테고리 정보가 랜덤 문자열로 붙는 것을 방지하여 정확한 주소를 검색엔진에 색인 등록할 때 필수요소
HTML 편집에 script를 추가한 모습

 

해당 스크립트를 넣어주면 포스팅을 생성했을 때 URL 주소 뒤에 본인이 설정한 URL 주소형식(숫자 또는 문자)으로 출력되어야 하는데, 실제로는 뒤에 카테고리 정보까지 추가되어 `https://rightnowhj.tistory.com/2?category=897423` 이런 식으로 주소가 생성됩니다.

 

이렇게 되면 나중에 글이 많아지면 많아질수록 수정과 생성, 삭제 등이 빈번하게 일어날텐데, 검색 엔진이나 애드센스 광고는 이러한 URL 정보를 토대로 검색 또는 광고 배치를 하므로 굉장히 비효율적인 상황이 일어납니다.

 

그래서 이런 카테고리 정보가 출력되지 않도록 위의 스크립트를 추가해주면 됩니다. 블로그 관리 측면에서 반드시 하나의 페이지가 검색되고 사람들에게 보여야 광고 수익도 극대화할 수 있습니다. 즉, 중복된 페이지가 생겨서 분산되는 것을 방지하기 위함입니다.

 

※ 가급적 주석(설명글)은 달아주시는게 좋습니다. 나중에 코드가 늘어나고 수정하거나 편집, 또는 스킨 자체를 새로 받아서 업데이트할 때 뭘 추가했고 수정했는지 알 수 없으면 낭패니 꼭 주석을 다는 습관을 가지시면 좋습니다~

= 주석은 `<!-- -->` 요 사이에 작성하고 싶은 글을 적어주시면 됩니다. (위의 이미지 참고)

 

 

🔹사이드바(Sidebar) 크기 조절

그리고 아래로 조금 내리면 `<style> ~ </style>` 태그 부분이 있습니다.

<style>
  :root {
    --h-idx: 1100px;
    /* index */
    --h-pem: px;
    /* permalink */
    --h-s: 360px;
    /* sidebar */
    --h-c: calc(100% - var(--h-s));
    /* content */
    --h-h: 256px;
    /* header */
  }
</style>

 

해당 태그부분을 보면 `/* sidebar */` 부분이 보입니다. 해당 주석 아래의 코드가 블로그의 좌측 사이드바 영역의 가로 너비를 나타내는 값입니다. 

 

계산식을 보면 `100% - var(--h-s)` 이렇게 되어 있는데, 간단하게 전체 100% 너비에서 var(--h-s) 이 값을 뺀다는 의미입니다. 해당 값은 바로 위에 `--h-s`로 360px 값을 볼 수 있는데 이 값은 현재 제가 사용하는 값으로, 아마 초기 설정값은 이보다 작을 겁니다. 

 

결론은 해당 360px로 적힌 값이 사이드바의 너비라고 보시면 됩니다. 저 값을 수정하면 사이드바의 크기를 수정할 수 있습니다. 이 값을 키운 이유는 추후 수동 광고를 사이드바에 넣기 위해서 크기를 확장한 겁니다. 본인이 광고를 넣을 생각이 없다면 취향껏 크기를 적용시키거나 초기값 그대로 사용하시면 됩니다.

 

초기 설정값으로 본 사이드바 크기사이드바 크기 수정 후 모습
초기 설정값(256px)과 크기 수정한 모습(360px) 비교

 

🔹인라인 코드 블록 스크립트 추가

인라인 코드 블럭이라는 `Code Block` ◀이렇게 변경해 주는 것이 있습니다. 해당 인라인 코드 블록은 CSS에서 'code'라는 id로 찾을 수 있으며, 위에서는 이것을 수정한 것입니다. 해당 코드블럭을 사용하는 방법은 `code` 라는 태그로 글을 감싸주면 됩니다.

 

하지만 글을 작성할 때 저런 식으로 태그를 감싸주기 어려우므로 간단하게 감싸주기 위한 방법으로 아래 스크립트를 HTML 편집에서 `</body>` 태그 위에 넣어줍니다.

 

<!-- 인라인 코드 블럭 시작 -->
<script>
    let textNodes = document.querySelectorAll("article > *:not(figure):not(pre)");
    textNodes.forEach(node => {
        node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, '<code>$1</code>');
    });
</script>

 

해당 코드를 추가하고 '적용'하면 이제 글을 작성할 때 인라인 코드블럭 스타일을 주기 위해 태그로 감쌀 필요 없이 `키(백틱이라고 하며, 숫자 1키 옆에 있는 키)로 감싸주면 됩니다. 

 

이상 hELLO 스킨에 대한 적용 및 HTML 편집 과정을 설명해보았습니다. 그 외에 CSS에 대해서 기본적인 스킨에 대해서 스타일을 변경(특히 화이트/다크 모드에 따른 배경색, 글자색 등) 방법에 대해서 내용이 좀 길어서 아래 링크를 통해 따로 설명해놓았으니 해당 스타일을 수정해보고 싶다면 아래 링크를 통해 CSS를 편집하시면 됩니다.

 

🔸hELLO 스킨의 CSS 편집하기

 

티스토리 스킨 적용 - hELLO 스킨 CSS 편집

어두운 배경이 싫으시다면 페이지 우측 하단에 보이는 초승달 모양의 아이콘을 클릭하면 화이트모드로 변경됩니다.초승달 모양 버튼 : `화이트/다크 모드` 전환이전 포스팅에 이어서 hELLO 스킨

rightnowhj.tistory.com

 

🔸코드 하이라이트(Highlights, 코드 블럭) 적용하기

 

티스토리 블로그 - 코드 하이라이트(highlightjs) 적용

어두운 배경이 싫으시다면 페이지 우측 하단에 보이는 초승달 모양의 아이콘을 클릭하면 화이트모드로 변경됩니다.초승달 모양 버튼 : `화이트/다크 모드` 전환개발자 블로그 또는 티스토리의

rightnowhj.tistory.com

 

4. hELLO 스킨 최신 버전 사용 시 무한 로딩 또는 화면 깨짐 현상 해결하기 (2024. 12. 추가된 내용)

오늘 갑자기 블로그 메인화면이 깨지거나 무한 로딩에 빠져서 상당히 놀랐는데, 다행히 제작자 깃허브 Issue 페이지에 저와 비슷한 분들이 계셔서 글을 올리셨고 답변이 올라와 적용했더니 정상적으로 돌아왔습니다. ㅎㅎ 

 

먼저 본인의 블로그 관리에서 현재 사용 중인 hELLO 스킨을 다운로드 받습니다. '스킨 변경'으로 이동하여 '사용중인 스킨'에 보이는 '다운로드'로 받을 수 있습니다.

 

티스토리 블로그에서 현재 사용중인 hELLO 스킨 다운로드 받기
티스토리 블로그에서 현재 사용중인 hELLO 스킨 다운로드 받기

 

다운로드 받은 압축파일을 해제하여 폴더 안에 'images' 폴더 안에 보면 `script.dugNnUNLJmZOsrH9Ba3H.js` 파일이 있습니다. 이것을 메모장 또는 notepad++과 같은 텍스트 편집 프로그램으로 열어서 아래 코드처럼 문제가 되는 코드를 주석처리하시면 됩니다. (코드는 맨 아래부분에 있습니다. 4.10 버전을 기준으로 584 라인)

 

setTitleToEditEntryFrame: function setTitleToEditEntryFrame() {
    //document.getElementById("editEntry").title = "Edit Entry";	// 여기 주석처리
}
 
// 출처 : https://github.com/pronist/hello/issues/262

 

주석처리를 한 뒤 저장하고 다시 블로그 관리 페이지의 '스킨 편집'으로 이동합니다. 여기서 'HTML 편집'으로 이동하여 '파일 업로드'로 이동합니다. 그리고 기존의 ` script.dugNnUNLJmZOsrH9Ba3H.js ` 파일을 선택하고 아래 '삭제' 버튼을 눌러 제거합니다.

 

기존의 script 제거
기존의 script 제거하고 수정한 script를 추가

 

다음으로 수정한 파일을 '추가' 버튼을 눌러서 업로드합니다. 저는 중간에 HTML 수정했던 것을 다시 복구하느라 '적용' 버튼이 활성화 되어 있어서 마지막에 눌러서 해결한 것을 확인했는데, 단순히 파일만 업로드하면 '적용' 버튼이 활성화가 안 됩니다. 

 

적용버튼을 누르지 않고도 메인화면이 정상작동한다면 상관없는데 script를 다시 업로드하고도 메인화면이 계속 무한 로딩 또는 깨져서 나온다면, '스킨 변경'에서 '사용중인 스킨'을 '보관' 버튼을 눌러 '스킨보관함'에 넣어주고, 이것을 다시 '적용' 하면 정상적으로 업데이트 됩니다.

구독 및 좋아요는 컨텐츠를 생산하는데 많은 도움이 됩니다. 😊

감사합니다.

티스토리툴바